ilaandClaude Sonnet 4.6
d558da51a6
- docs/: 6 development documents (PRD, tech selection, architecture, risks, roadmap, design workflow) - research/: FIRE background materials, personal plan, Excel calculator - 03-架构设计.md: add Section 8 documenting WSL2 → Windows browser dev environment (Vite host config, access URLs, mobile debugging tip) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
89 lines
5.1 KiB
Markdown
89 lines
5.1 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 条路径（从强到弱）
|
||
|
||
### ⭐ 路径 1：MCP 直连 Claude Code（最推荐）
|
||
设计工具开放 **MCP 服务**，Claude Code 直接读取画板：节点树、组件、布局约束、**设计令牌**、切图引用，并生成匹配代码。
|
||
- **Figma**：桌面端 → Preferences → 启用本地 MCP Server → Dev Mode；Claude Code 装 Figma 插件或 `claude mcp add` 接入。
|
||
- **Pixso / MasterGo / 即时设计**：各自提供 MCP，按其文档配置进 Claude Code。
|
||
- 效果：在设计稿选中页面 → AI 读规格 → 落成 **unibest 的 Vue 页面** 或 **Tabler 的 HTML 模板**。
|
||
|
||
### 路径 2：Dev Mode / 开发者模式标注交付
|
||
不接 MCP 时的传统方式：在"开发者模式"量间距、取色值、看字号、导出切图（SVG/PNG），据此手写代码。CoDesign 这一环成熟。
|
||
|
||
### 路径 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 按规格落地到 unibest / Tabler
|
||
│
|
||
▼
|
||
本地 pnpm dev:h5 / go run 预览 → 迭代
|
||
```
|
||
|
||
**设计工具负责"长什么样"与"令牌"，落地到框架由 AI 手写**，保证代码干净可维护。
|
||
|
||
## 五、推荐工作流（按投入分档）
|
||
|
||
### 轻量档（建议先用）
|
||
1. **墨刀**画原型，定页面流程；
|
||
2. **Pixso / 即时设计** 出关键页面高保真 + **设计令牌**；
|
||
3. 其余交给 Claude Code 用 `ui-ux-pro-max` / `frontend-design` 技能在 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/
|