项目工作台使用文档

fast-uxspec 项目工作台将产品规划的四个关键环节整合到同一界面：业务需求、信息架构、视觉规范、技术选型。 每个模块独立编辑，最终导出结构化的 Markdown 提示词文件，供 AI 编程工具（Cursor、Claude Code 等）直接使用，确保生成代码的一致性和专业度。

快速开始

1. 1从顶部导航点击 项目工作台 或访问 /canvas 进入工作台。
2. 2首次进入会弹出 角色选择引导，根据你的身份（产品经理 / 设计师 / 开发者）推荐适合的模块组合。所有模块随时可手动开关。
3. 3在左上角输入 项目名称，它会自动同步到所有模块的导出文件。
4. 4按推荐顺序 业务需求 → 信息架构 → 视觉规范 → 技术选型 逐步填写。每个模块都有实时 Markdown 预览。
5. 5完成后通过 Tab 栏右侧的 导出 按钮下载 .md 文件，放入项目根目录供 AI 工具读取。

角色与模块

不同角色的关注点不同，系统会根据你的选择推荐最相关的模块：

模块一：业务需求

业务需求模块帮助你系统地梳理产品的目标用户、商业目标、核心功能和用户故事。填写的内容会实时生成 Markdown 文档，作为 AI 编程时的产品上下文。

目标受众

• 自由文本描述 — 描述你的目标用户群体特征。例如：“25-35 岁的年轻白领，关注效率和生活品质”。

业务目标与核心功能

• 列表式管理 — 通过输入框逐条添加业务目标和核心功能，支持删除和重新编辑。每一条都会在导出时转为 Markdown 列表项。

用户画像

• 多角色画像卡片 — 每个画像包含名称、角色、目标列表和痛点列表。你可以创建多个画像来覆盖不同的用户群体，帮助 AI 理解需要服务的人群差异。

用户旅程

• 流程化用户旅程 — 定义用户从进入到完成任务的关键步骤（有序列表），描述理想路径（Happy Path）和可能的边界情况（Edge Cases）。导出后 AI 会据此生成合理的页面流转和异常处理。

模块二：信息架构

信息架构模块提供一个可视化画布，通过拖拽组件和连接线来搭建页面结构、用户流程和系统交互图。支持 40+ 种组件类型和 AI 智能生成。

组件面板

左侧面板提供了按类别组织的组件库，支持搜索。9 大类别覆盖完整的产品设计需求：

此外还有 批注 类组件（7 种），如提示、警告、性能标注、可访问性标注等，用于为画布添加说明信息。

画布操作

• 拖拽创建 — 从左侧面板拖拽组件到画布上，组件会自动创建并定位。点击组件可在右侧面板编辑属性。
• 连接线 — 从组件的连接点拖拽到另一个组件，创建表示页面跳转或数据流向的连接关系。
• 撤销 / 重做 — Cmd+Z 撤销，Cmd+Shift+Z 重做。操作历史自动保存。
• 预览模式 — 点击右上角的 “预览” 按钮，隐藏编辑控件，以只读方式查看完整架构图。
• 自动保存 — 画布每 5 秒自动保存到浏览器本地，切换 Tab 不会丢失内容。

AI 智能输入

画布底部的输入栏支持用自然语言描述你想要的页面结构，AI 会自动解析并在画布上生成对应的组件节点和连接。

模块三：视觉规范

视觉规范模块让你以可视化方式定义设计系统的所有 Token（颜色、字体、间距、圆角、阴影等），生成的 Markdown 可以直接作为 CLAUDE.md 或 design-system.md 使用。

加载配方

• 内置配方模板 — 提供 9 套预置设计系统模板：Material Design 3、Apple HIG、Fluent 2、NVIDIA、Tesla、Amazon、iOS 清新、SaaS 专业、内容暖色。一键加载即可获得完整的设计 Token。
• 品牌灵感库 — 内含 20+ 个社区贡献的品牌设计参考，可按名称或网站搜索，点击即可导入其设计 Token 作为起点。
• 重置 — 一键清空当前配置，恢复到默认空白状态重新开始。

设计 Token 编辑

左侧面板以折叠分区的形式组织所有设计 Token，你可以逐项微调：

• •颜色 — 主色、中性色、语义色、自定义调色板
• •字体 — Web / iOS 字体栈、全局字号阶梯（xs ~ 4xl）
• •间距 — 间距比例尺、容器宽度预设
• •圆角与阴影 — 全局圆角规范、阴影层级
• •组件规则 — 按钮、卡片等组件的尺寸变体和最佳实践
• •Feature Flags — 响应式、深色模式、安全区域、无障碍、国际化等开关
• •Do / Don't 规则 — 自定义设计约束，约束 AI 在特定组件上的行为

预览与导出

右侧面板支持两种预览模式切换：

• •可视化看板 — 渲染后的设计系统预览，直观检查配色、字号和间距是否协调
• •Markdown 源码 — 一键复制生成的提示词文档

模块四：技术选型

技术选型模块通过一份简短的需求问卷，自动推荐适合的技术栈方案。推荐结果可手动覆盖，最终导出为技术说明文档。

需求问卷

• 目标平台 — Web / 移动端 / Web + 移动端
• 后端需求 — 无（纯前端）/ 简单 API / 完整后端
• 功能需求 — 实时功能、CMS、用户认证、在线支付、数据分析 — 按需勾选
• 团队规模 — 独立开发 / 小型团队（2-5 人）/ 大型团队（5+）
• 经验水平 — 初级 / 中级 / 高级

智能推荐

系统内置的推荐引擎会根据你的回答组合，自动生成包含以下维度的技术栈建议：

• •前端框架（Next.js / React Native / Expo）
• •UI 组件库（Tailwind + shadcn/ui / NativeWind）
• •状态管理方案
• •后端服务（Supabase / Node.js / Firebase）
• •数据库、托管、认证方案
• •辅助工具（ESLint、Prettier、Stripe 等）

每条推荐都附有 推荐理由，解释为什么这个组合适合你的项目需求。

手动调整

对推荐结果不满意？每个字段都可以手动覆盖。你的修改会立即反映在 Markdown 预览中，导出时使用你的最终选择。

导出选项

Tab 栏右侧的 导出 下拉菜单提供三种导出方式：

• 单模块导出 — 分别下载每个模块的 .md 文件（如 business-requirements.md、visual-spec.md）。适合只需要某个维度的场景。
• 合并导出 — 将所有激活模块的内容合并为一个 prompt.md 文件，各模块之间用分隔线分开。推荐作为项目的主提示词文件。
• 全部导出 — 同时下载所有模块的独立文件。适合希望分文件管理不同维度规范的团队。

推荐工作流

常见问题