ilaandClaude Sonnet 4.6
7bd7284d92
- 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>
108 lines
6.5 KiB
Markdown
108 lines
6.5 KiB
Markdown
# 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 四大模块一一对应（打卡 / 目标进度 / 测算器 / 持仓）。
|
||
|
||
## 七、相关链接
|
||
|
||
- Figma MCP 指南：https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server
|
||
- Claude Code 接入 Figma MCP：https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server
|
||
- Figma × Claude Code 双向集成：https://www.figma.com/blog/introducing-claude-code-to-figma/
|
||
- Pixso MCP：https://pixso.cn/mcp/
|
||
- MasterGo MCP 转代码：https://help.aliyun.com/zh/lingma/use-cases/use-lingma-mastergo-mcp-to-transforming-mastergo-design-draft-into-front-end-code
|
||
- 腾讯 CoDesign：https://codesign.qq.com/
|