opc/fire_goal
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
fire_goal/docs/06-设计协作方案.md
T
ilaandClaude Sonnet 4.6 7bd7284d92 docs: clarify MCP direction and Modao workflow in design collaboration doc 
- MCP is read-only (design tool → Claude Code), not AI controlling Figma
- Mark Modao as no-MCP; add Path 2-B for screenshot/image handoff
- Update workflow diagram to show unidirectional MCP arrow
- Update lightweight workflow: Modao screenshots as reference, Pixso/MCP for precise specs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-08 09:36:26 +08:00

6.5 KiB
Raw Permalink Blame History

06 · 设计协作方案

线上原型/UI 设计服务的选型，以及如何衔接本地开发（unibest 用户端 + Tabler 管理后台）。

一、设计分两个阶段

  1. 原型：画页面流程、点击跳转、低/高保真线框，先把"有哪些页面、怎么跳"定下来。
  2. UI 设计 + 交付：出高保真视觉稿、设计令牌（颜色/间距/字体），并把规格交付给开发。

二、线上服务选型（国内可用优先）

用户在国内 + 用腾讯云，优先选国产、免费、支持 MCP（MCP 是衔接本地开发的关键）。

用途 推荐 说明
UI 设计主力 Pixso / 即时设计 / MasterGo（三选一） Figma 国产替代，免费无墙，均已支持 MCP 设计稿转代码
交互原型 墨刀 Modao 国产经典快速原型，适合先跑通页面流程/跳转
交付/标注 腾讯 CoDesign 腾讯自研，与腾讯云生态一致；导入 Figma/MasterGo/Pixso/Axure，自动生成 CSS/iOS/Android 样式
国际备选 Figma 功能最强，2026-02 已与 Claude Code 官方双向集成（设计↔代码）；国内访问需解决网络

选型建议：单人自用三个国产工具差别不大。Pixso（MCP 起步早、文档全）或 即时设计（免费额度大、可导入 Figma 文件）优先。

三、衔接本地开发的 4 条路径（从强到弱）

⚠️ 重要：MCP 的方向是"设计工具 → Claude Code"，不是反过来。 Claude Code 通过 MCP 读取你画好的设计规格，然后生成代码；Claude Code 无法控制设计工具去画图。设计的工作仍由你完成。

⭐ 路径 1：MCP 直连 Claude Code（最推荐，限支持 MCP 的工具）

设计工具开放 MCP 服务，Claude Code 直接读取画板：节点树、组件、布局约束、设计令牌、切图引用，并生成匹配代码。

  • Figma：桌面端 → Preferences → 启用本地 MCP Server → Dev Mode；Claude Code 装 Figma 插件或 claude mcp add 接入。
  • Pixso / MasterGo / 即时设计：各自提供 MCP，按其文档配置进 Claude Code。
  • 墨刀：⚠️ 不支持 MCP，无法走此路径，见路径 2-B。
  • 效果：在设计稿选中页面 → Claude Code 读规格 → 落成 unibest 的 Vue 页面 或 Tabler 的 HTML 模板。

路径 2-A：Dev Mode / 开发者模式标注交付

不接 MCP 时的传统方式：在"开发者模式"量间距、取色值、看字号、导出切图（SVG/PNG），据此手写代码。CoDesign 这一环成熟。

路径 2-B：截图 / 导出图片交给 Claude Code（适用于墨刀等无 MCP 工具）

墨刀等原型工具不提供 MCP，但 Claude Code 支持直接读取图片：

方法 操作
截图 墨刀中截取页面图片，粘贴到对话
导出 PNG 墨刀「导出」→ PNG，发送给 Claude Code
导出 HTML 原型 墨刀支持导出可点击 HTML，Claude Code 可读其结构

效果与 MCP 稍弱（无精确像素数值），但对于确定"长什么样、有哪些元素"已经足够。墨刀建议只用来画流程和交互原型，精细 UI 规格交给支持 MCP 的工具或直接由 Claude Code 手写。

路径 3：设计令牌（Design Tokens）→ CSS 变量

把颜色/圆角/间距/字体导出为 CSS 变量，让 unibest 与 Tabler 共用一套主题，App 与管理后台视觉统一、改主题改一处。建议必做。

路径 4：设计转代码插件（仅作参考）

Visual Copilot(Builder.io)、Anima、Locofy，及 Pixso/MasterGo 自带转代码。

四、⚠️ 对本项目技术栈的现实提醒

自动"设计转代码"多输出通用 React/HTML/Tailwind，而本项目是 uni-app（Vue3 + 特有组件 + rpx 单位） 与 Tabler（Bootstrap 类名）——自动导出的代码基本不能直接用（类名/组件/单位都对不上）。

因此最靠谱的工作流：

你在设计工具画好设计稿
        │
        │  ← MCP（只读）：Claude Code 读取节点/规格/令牌
        │  ← 截图/图片：无 MCP 时的替代（如墨刀）
        ▼
Claude Code 按规格手写代码 → unibest Vue 页面 / Tabler HTML 模板
        │
        ▼
本地 pnpm dev:h5 / go run 预览 → 你反馈 → 迭代

MCP 方向是单向读取：设计工具 → Claude Code。Claude Code 无法反向控制设计工具画图。

设计工具负责"长什么样"与"令牌"，落地到框架由 Claude Code 手写，保证代码干净可维护。

五、推荐工作流（按投入分档）

轻量档（建议先用）

  1. 墨刀画原型，定页面流程与跳转；截图发给 Claude Code，作为页面参考；
  2. Pixso / 即时设计 出关键页面高保真 + 设计令牌，接 MCP 交付精确规格；
  3. Claude Code 按规格在 unibest/Tabler 中手写实现，浏览器预览迭代。

完整档

选一个工具（Pixso/Figma）做全套设计 → 接 MCP 到 Claude Code → 逐页像素级还原。

零外部工具档

跳过设计软件，直接由 Claude Code 用设计技能产出页面，看效果再调。对 4 页面的自用 App 往往最快。

六、落地到本项目的对接规范

  1. 设计令牌统一：在设计工具里定义并导出 → 生成 tokens.css（CSS 变量），unibest 与 Tabler 同时引用。
    • 命名建议：--color-primary、--color-success、--radius-card、--space-*、--font-size-*。
  2. 两套界面共用令牌：
    • 用户端（unibest）：在全局样式引入令牌；图表色取自令牌。
    • 管理后台（Tabler）：覆盖 Tabler 的 Bootstrap 变量为同一套令牌。
  3. 切图规范：图标优先 SVG；位图导出 2x；统一放 app/static/ 与 server/static/。
  4. 页面清单对齐：设计稿页面与 PRD 四大模块一一对应（打卡 / 目标进度 / 测算器 / 持仓）。

七、相关链接

Reference in New Issue View Git Blame Copy Permalink