Claude Code原型图实战
9 章 · 约 32 千字
目录
- Claude Code + Figma：AI 画原型完整教程，从 PRD 到设计稿只要 5 分钟
- AICoding实战：从Prd到代码生成
- Claude+Cursor+Figma Master Go四步生成高端的产品原型图（附提示词和步骤）
- Claude Code 打通 Figma，2 分钟搞定产品UI界面（附保姆级安装教程）
- Claude Code + Mermaid 一键生成架构图、时序图、流程图
- claude code从需求到低保真线框图，再到高保真UI原型，全流程
- 用claude code 画系统功能模块图和系统架构图
- Pencil + Claude Code：快速原型图
- 完整项目实战
Claude Code + Figma：AI 画原型完整教程，从 PRD 到设计稿只要 5 分钟
3 种方式，按需选择
Figma 和 Claude Code 之间有 3 种协作方式， 适合不同阶段：
方式
适合场景
是否付费
难度
HTML 原型 + Figma 插件导入
从零画原型
免费
简单
Copy as code → 粘贴给 AI
设计改了同步代码
免费
最简单
Figma MCP Server
全自动双向同步
免费可用（有调用限额）
中等
好消息：三种方式都不需要付费。 MCP Server 免费 Plan 就能连通， generate_figma_design （推代码到 Figma）甚至不限次数。
下面逐个展开，每种都给操作步骤。
方式一：AI 生成 HTML 原型 → 导入 Figma（推荐起步用）
这是 从零开始最快的 AI 画原型方式 ——让 Claude Code 根据你的 PRD 生成 HTML，再一键导入 Figma，整个过程不需要手动画任何组件。
操作步骤
第一步：让 Claude Code 生成 HTML 原型
把你的 PRD 和 UI 设计规范丢给 Claude Code，一句话搞定：
"根据 PRD 和 UI 设计规范，帮我把所有页面的原型画在一个 HTML 文件里"
Claude 会生成一个包含所有屏幕的 HTML 文件，每个屏幕是一个 390×844 的 iPhone 框架，并排排列。
第二步：导入 Figma（两种方式任选）
HTML 生成后，有两种方式导入 Figma：
方式 A：用 MCP 自动推送（推荐）
如果已经连通了 Figma MCP（配置方法见方式三），直接告诉 Claude Code：
"启动本地服务器，把这个 HTML 捕捉到我的 Figma 文件里"
Claude Code 会自动启动服务器、打开浏览器、捕捉页面、推送到 Figma，全程自动化。
方式 B：用 Figma 插件手动导入
启动本地服务器（Claude Code 会自动帮你启动）
打开 Figma → 运行插件 html.to.design （Builder.io 出品，在 Figma 插件市场搜索安装）
输入本地服务器地址
点击 Import，所有屏幕变成可编辑的 Figma Frame
一个 HTML 文件，5 个屏幕，一键全部导入 Figma。
两种导入方式对比
手动导入（html.to.design 插件）
自动捕捉（MCP generate_figma_design）
操作方式
在 Figma 里运行插件手动导入
Claude Code 通过 MCP 自动推送
还原度
高，基本无失真
会有一定失真
是否付费
免费
免费（不受配额限制）
适合场景
初次导入、追求精确
频繁迭代、追求速度
建议： 初期用手动导入，追求还原度。等工作流跑顺了、再考虑 MCP 自动捕捉。
适合什么情况
项目初期，从 PRD 快速出原型，不想在 Figma 里一个个拖组件
想让 AI 理解你的设计规范后自动排版
独立开发者没有设计师，需要 AI 辅助设计出图
方式二：Figma Copy as code（日常最实用）
这是 设计改完后同步到代码最顺手的方式， 完全不需要配置任何 MCP，零门槛。
操作步骤
第一步：在 Figma 里复制设计信息
选中你改过的组件，右键：
Copy/Paste as → Copy as code → CSS（或选 iOS/Android）
Figma 会把该组件的样式属性（尺寸、圆角、颜色、字体等）导出为结构化的代码格式。
第二步：粘贴给 Claude Code
把复制的内容粘贴给 Claude Code，告诉它要更新哪个组件就行。Claude 会自动识别设计属性，把设计稿的改动同步到代码里。
进阶用法：Copy link to selection
如果你已经配置了 Figma MCP（方式三），还可以用更快的方式：
选中组件 → 右键 → Copy/Paste as → Copy link to selection
得到一个带 node-id 的链接。把这个链接粘贴给 Claude Code，AI 会自动通过 MCP 读取该节点的完整设计数据——不用手动复制代码。
适合什么情况
产品改了 Figma，开发需要同步到代码
微调某个组件的样式
不想折腾 MCP 配置，粘贴就能用
方式三：Figma MCP Server（全自动双向同步）
这是 Figma 官方 2026 年初发布的 AI 集成方案， 支持设计和代码双向同步。 配置好后，Claude Code 可以直接读取 Figma 设计数据，也可以把代码界面推回 Figma。
两种 MCP Server 的区别
Remote Server
Desktop Server
地址
mcp.figma.com/mcp
127.0.0.1:3845/mcp
认证
OAuth 登录
无需认证
要求
所有 Plan（含免费）
付费 Plan + 桌面端
能力
读取 + 写入
读取 + 写入（基于选中内容）
各 Plan 调用限额
这是很多人关心的问题，实测后整理了一下：
Plan
限额
说明
Starter（免费）
每月 6 次
generate_figma_design 不占配额
Pro
每天 200 次
10 次/分钟
Organization
每天 200 次
15 次/分钟
Enterprise
每天 600 次
20 次/分钟
重点： generate_figma_design （把代码推送到 Figma）不受配额限制， 免费用户也能无限次使用。每月 6 次的限制主要影响读取类工具（如 get_design_context ），日常够用了。
MCP 配置教程
配置 Remote Server（推荐先试这个）
在 Claude Code 终端里运行一行命令就行，首次使用会弹出 Figma OAuth 授权页面，在浏览器打开链接登录允许即可。整个过程不超过 1 分钟。
配置 Desktop Server
打开 Figma 桌面端
切换到 Dev Mode → Enable desktop MCP server
在 Claude Code 终端添加本地 MCP 服务器地址
连通后能做什么
配置好 Figma MCP 后，Claude Code 获得 13 个工具， 核心分两类：
读取设计 — get_design_context （获取样式和布局）、 get_screenshot （截图）、 get_metadata （节点结构）等，帮你把 Figma 设计数据提取给 AI
写入 Figma — generate_figma_design， 把 HTML/代码界面推送回 Figma（不限次数）
用起来很简单——把 Figma 设计链接丢给 Claude Code，它会通过 MCP 自动读取设计数据，然后帮你实现对应的代码。反过来，代码改了 UI 之后，也可以让 Claude Code 自动捕捉界面推回 Figma。
踩坑记录（重要）
实测过程中遇到了 3 个坑，提前避开能省很多时间：
坑 1：VSCode 扩展里 OAuth 可能不弹出
Remote Server 在 VSCode Claude Code 扩展里可能无法完成 OAuth 认证流程。
解决方案： 先在终端 claude 里完成认证，再回 VSCode 就正常了。
坑 2：第三方 MCP 和官方 MCP 容易搞混
npm 上的 figma-developer-mcp 是第三方包（Framelink 出品），只能读不能写，还需要手动配 API Token。Figma 官方的 Remote MCP 地址是 mcp.figma.com/mcp， 用 OAuth 认证，功能完整——别装错了。
坑 3：免费 Plan 完全够用
一开始以为 MCP 需要 Pro，实测发现 Free Plan 就能连通。 generate_figma_design （推代码到 Figma）不受配额限制；读取类工具每月 6 次，日常够用。
我的推荐工作流（经过实测）
根据项目阶段选择不同的 AI 画原型方式：
初期：快速出原型
PRD + UI 规范 → Claude Code 生成 HTML 原型 → html.to.design 插件导入 Figma
5 分钟出完所有页面，比手动画快 10 倍。
日常：设计改完同步代码
Figma 改设计 → Copy as code → 粘贴给 Claude Code → 自动同步
设计稿转代码最顺滑的方式，零配置。
进阶：全自动双向同步（MCP 连通后，免费即可）
设计改了 → MCP 自动读取 → 代码同步 → 代码改了 UI → 自动推回 Figma（不限次数）
真正实现设计和代码的双向同步，免费 Plan 就能用。
实用技巧：建立设计-代码映射表
在项目里维护一份映射关系表，AI 看到就知道该改哪个文件：
UI 组件
Figma 帧
代码文件
体重卡片
Home/WeightCard
WeightCard.swift
睡眠条
Home/SleepBar
SleepCard.swift
AI 聊天气泡
AI/ChatBubble
ChatBubble.swift
这样不管用哪种方式，告诉 Claude Code"改体重卡片"，它就能精准定位到对应的 Figma 设计和代码文件。
对于独立开发者来说，这张表就是你的设计系统文档，维护成本极低但效果很好。
总结
2026 年，AI 辅助原型图绘制的链路已经完全跑通了：
三种方式都免费： HTML 原型、Copy as code、MCP Server 都不需要 Pro
MCP 免费版限制很少： generate_figma_design 不限次数，读取类工具每月 6 次，日常够用
核心思路： 让 AI 理解你的设计规范，而不是一个个像素去抠
工具在进化，但思路比工具重要—— 先把 PRD 和设计规范写清楚，AI 才能帮你高效干活。
AICoding实战：从Prd到代码生成
本文从以下几个模块实现最终的Coding能力：
构建AICoding标准workflow，实现端到端逐步生码
扩充模型上下文，增强对仓库历史知识的理解能力
沉淀流程数据，评测能力效果，不断优化AI生码质量
1. 框架
2. 扩充业务知识，增强模型能力
a. 业务知识体系化
面对庞杂的业务代码内容以及复杂的业务背景知识，需要从 安全业务wiki、安全代码wiki、通识wiki、需求wiki 多维度结构化补充背景知识，支撑跨仓库、跨业务链路、跨技术栈等复杂场景的生码能力。
安全业务wiki： 涵盖各业务领域知识、风控通识和稳定性知识，确保生成的代码符合安全研发规范（如三板斧、熔断），且充分理解了安全业务语义。
安全仓库wiki： 包括仓库级wiki、文件级wiki和调用链路wiki，提供全面的安全侧代码库知识，协助需求拆解和生码过程，快速定位需要修改/依赖的仓库代码内容。
通识wiki： 基于研发中间件知识和全站研发通用知识，确保需求拆解和生码符合蚂蚁研发规范。
需求wiki： 基于prd、系分和关联代码内容，构造需求和领域模型的关联背景知识，从实际需求扩充领域模型实际业务语义内容。
b. 上下文知识扩充，增强业务理解能力
ⅰ. RAG检索业务知识
对于大模型不理解特有业务场景的问题，使用业界通用方案，RAG在线检索相关的业务语义文档做代码生成的增强上下文。但是使用RAG知识库召回数据过程，会存在以下问题：
【召回准确率低】
当前RAG知识检索能力，普遍存在的召回率低问题，采用以下方式去优化：
提取业务实体： 增加需求实体提取阶段，避免整个需求文档直接搜索召回，提升准确率。
增加搜索标签： 针对二方包跨仓库调用场景，在需求描述时，指定需要的bundle，提升知识库召回率。
分应用召回： 核心h1h2应用使用geamker（支持业务三元组知识图谱和向量数据库），确保召回准确率；其他应用使用grt（仅有向量数据库搜索能力），保证可用性。
【支持库存储&检索耗时成本高】
为了增强用户体验，同时考虑到大规模数据存储的成本，从以下几个角度进行多维优化：
优化查询流程： 在知识库召回wiki过程中，剔除最后模型总结步骤，在只做文本搜索召回和倒排流程，节省98%耗时（3min->3s）。
精炼知识内容： 只保留代码总结中涉及业务语义的部分，降低知识库的初始化解析和存储成本。
ⅱ. 知识图谱能力扩充
在实践过程中，发现现有知识库都是以markdown格式做初始召回文本，但这也会存在一个通用问题：在语义检索时只会命中md文档的某一个chunck块，导致召回结果完整性缺失。
针对此问题，使用知识图谱能力，基于“文件路径+仓库”节点索引标签，定向检索知识库召回文档，扩充wiki内容。
同时，考虑到知识图谱的存储召回耗时成本，简化图谱结构，仅保留必要的文档、仓库、bundle、需求、rpc、drm节点，剔除扩散比大的方法、属性等节点。最终在不降低语义质量前提下，将知识图谱规模从10亿+节点，简化到100万+节点。
c. 模型能力强化
除了RAG+知识图谱方式扩充背景知识外，模型自身的需求拆解和业务理解能力也需要不断增强。
持续预训练： 基于Qwen-base model，在离线使用语料库，通过持续预训练方式，让需求拆解基模提前学习业务知识。
强化学习： 通过强化学习手段，让需求拆解模型拆解出的子任务有三板斧和鲁棒性考虑，从而实现风险左移。
整体流程如下：
训练语料： 基于pr的codediffs，先反向生成需求list，再反向合成原始需求。其中会用LLM进行多次扩充。以及原始prd提供反向生成上下文。
训练方式： 基于sllmworks框架，使用GRPO方式，设计多个维度奖励（输出格式、拆解任务个数、变更三板斧、鲁棒性、任务依赖准确性）增强模型拆解能力。同时利用agent提取高可用历史AAR经验，总结成关键词词库，及时更新prompt。
训练评测： 按照手动评测 + 自动评测，阶段性评测（需求拆解评测）+ 端到端评测（生码评测）相结合的方式对后训练后的需求拆解模型进行评测。
应用： 需求拆解后的子任务列表用于最终生码，同时还在探究在其他方向的落地（如：系分生成）。
在当前的强化学习训练过程中，我们主要面临数据质量的挑战，并已制定相应的改进思路与落地计划。
【训练集数据质量】
现状与做法： 现阶段采用“PR → 子任务列表 → 需求”的逆向工程链路构造训练样本，能够在数量上保证数据的充足。
同时对数据进行初步清洗：过滤掉代码改动行数在20以下或1000以上的PR，避免过于简单或过于复杂的样本带来的噪音与偏差；
在数据生成链路中引入两轮agent进行校验与补全（第一轮用于子任务完善、第二轮用于需求完善），在一定程度上提升了样本的可用性和一致性。
问题与不足： 自动化生成的数据仍可能存在语义偏差、场景不匹配、标签不够细致等问题；数据分布与真实生产场景不完全一致，容易导致训练过程中的偏拟合或泛化能力不足。
改进计划：
人工精标与优选： 建立小规模的“黄金集”，由领域专家人工审核与精标，作为训练与评测的对照基准；对自动生成数据进行抽样复核，沉淀高质量样本。
分类与分层： 根据实际应用场景对数据进行分类（如修复类、优化类、重构类、文档类等），并按难度分层（简单/中等/复杂），确保训练时的分布与使用时一致。
去重与一致性： 对近似或重复样本进行去重；提升一致性与可控性。
动态更新与课程学习： 建立数据滚动更新机制与课程式采样策略，先学易后难，逐步引入复杂场景，促进稳定收敛。
3. 标准化workflow，端到端生码
3.1 自动生成系分
【方案】
给出统一的系分文档，扩充业务流程、状态转换、权限约束规范等必要细节。
使用agent自动生成标准化文档，开发人员只需介入修订，减少人工撰写成本。
各模块说明## 模块名## **业务实体**| 实体 | 属性及类型<br/>（默认varchar类型） | 索引键 | 字段值说明 || --- | --- | --- | --- |
领域功能
| 领域 | 领域服务 | 领域功能 | 功能描述 | 规则约束 || --- | --- | --- | --- | --- |
应用服务
| 服务域 | 服务接口 | 服务方法 | 方法流程描述 | 校验约束 || --- | --- | --- | --- | --- |
业务流程与状态机说明### 状态机说明#### 实体名| 实体 | 当前状态 | 事件/操作 | 下一状态 | 校验约束 || --- | --- | --- | --- | --- |
业务流程说明
与其他bundle或系统的交互
| 交互方 | 交互方式 | 触发时机 | 主要接口/消息 | pom信息 | 业务目的/说明 | 出入参说明 || --- | --- | --- | --- | --- | --- | --- |
高可用相关能力
| 能力 | 是否需要 | 待补充内容 || --- | --- | --- |
3.2 需求拆解子任务
【方案】
目标： 将需求模块内容拆解为主要执行任务流程清单，包含详细描述和实现方案，并根据任务之间的依赖关系进行排序。
拆分标准：
确保子任务单一职责明确。
根据业务影响评估优先级。
维持与提供的业务背景知识、领域模型等的语义一致性。
3.3 仓储生码规范生成
【方案】
利用模型和codefuse具有的仓库索引能力，增加通用指令，以现有仓储具体场景为例，初始化生码规范（.project_rule），实现不同仓库的架构兼容规范。并在后续生码过程中将该规范内容作为生码上下文约束内容。例如以下是针对实际生产itask仓库自动生成的项目规范：
3.4 分层生码
Q：为什么不按照纵向分模块拆分生码，而是横向分层生码
A：
1. 在系分和需求拆解阶段，已经按照模块拆分，且根据模块间依赖问题，排序生码子任务。
2. 考虑到流程规范性，约束按照mvc分层生码，不仅能避免模块生码过程，模型偶尔丢失controller层代码问题，也能避免不同接口依赖同一个表或者接口、方法，导致merge冲突问题。
【方案】
固化生码指令，设计mvc三层各自的生码workflow。
优化生码指令，增加统一的命名规范、鲁棒性处理、可读性等质量要求。
3.5 自动review需求效果
【方案】
通过自定义prompt，固化需求实现效果总结指令，从变更代码结构、功能覆盖范围、稳定性需求、代码实现方案等多维度总结，降低cr难度。
4. 评测与数据更新，持续增强能力
a. 动态更新知识库，确保数据准确性
b. 能力评测
【评测重点】
RAG+知识图谱：评测知识召回能力
召回率： 实际命中文件数/目标召回文件数据，目前运行时核心链路能完全召回。
准确率： 实际命中文件数/实际召回文件总数。
模型训练：评测需求拆解偏好
总计1分 ，按照奖分方案，不扣分。
输出格式： 严格按照json格式、根据需求复杂度合理规划任务列表个数。
业务逻辑： 拆解任务列表需要满足三板斧、鲁棒性、任务依赖顺序合理等要求。
需求拆解能力：评测agent+上下文作用
拆解prompt优化效果：简单prompt vs 复杂prompt
拆解上下文作用：优化背景知识召回能力
端到端AICoding能力评测
评测数据覆盖标签范围
业务类别： 业务风控相关需求、反洗钱相关需求、高可用相关需求、处罚相关需求、终端相关需求、流量风控相关需求、内容风控相关需求、其他外包小二需求。 业务相关核心场景占比63%，高可用占比14%。
需求场景： 管理时需求(MVC类型服务架构，涉及接口、Controller等)占比 34% ；运行时需求（纯业务逻辑实现，不涉及Cotroller接口实现）占比 66% 。
需求类别： 新增、修改、新增+修改（占比77%）。
需求复杂度： 从拆出的需求任务个数和可能实现代码行数评估。简单10%、中等50%、困难40%。
评测重点
完整性： 需求是否覆盖prd文档中领域模型、业务流程和状态机相关内容，其他内容做参考。
一致性： 需求内容是否与PRD描述的领域模型、业务流程和状态机相关内容，其他内容做参考，领域模型属性描述不完全不影响需求列表的准确性。
依赖合理性： 需求间的依赖关系是否符合技术实现顺序。
覆盖范围： 拆分的需求列表是否包含prd以外的内容。如果包含，对于合理的额外内容，比如线程锁、单元测试等属于正常范围的合理扩展。其他额外内容，如增加prd不涉及的接口，此类占比超过整个需求列表的20%，则视为拆解不准确。
鲁棒性： 需求拆解过程是否考虑到包括数据、业务逻辑、安全、资源、外部依赖等各维度鲁棒性。
高可用能力： 可监控、可灰度、可应急
5. 通过AIcoding编码实际使用情况
CodeFuse 用户提交代码 AI 占比：43.25%
全部提交代码AI占比:36.01%
Claude+Cursor+Figma Master Go四步生成高端的产品原型图（附提示词和步骤）
第一步 ：发送初步简单的提示词到AI工具，表明自己的目的
现在我要开发一个汽车销售的app，根据三个角色设计提示词如下：我想开发一个汽车销售app要输出原型图，请通过以下方式帮我完成app所有原型页面的设计。
1、作为产品经理先设计出这个app实现哪些功能
2、作为UI设计师完成这些原型界面的设计
3、使用html在一个界面上生成所有的原型界面，使用Tailwind CSS创建高保真UI原型，可从Unsplash获取图片素材，使用FontAwesome等开源图标库，让原型显得更精美和更加真实
4、我需要这些界面可直接用于项目开发
帮我把这个提示词更加丰富，达到做出一个非常高端app的要求，最后把提示词以可以复制的形式给我
第二步 :AI给出具体的详细提示词(如果需要，可以自己修改)
高端汽车销售App原型设计
项目定位
开发一款高端豪华汽车销售App，对标蔚来、保时捷级别的数字化购车体验平台。目标用户：25-50岁中高收入人群。
请依次以三个角色完成设计：
---
角色一：产品经理
设计完整的产品功能架构，包含以下模块：
1. 首页/发现页 - 品牌故事、精选车型、活动Banner、智能推荐
2. 车型展示 - 车系列表、车型详情、配置对比、360°全景看车
3. 3D/AR看车 - 沉浸式3D展厅、AR实景摆放、内饰漫游
4. 智能选配 - 外观颜色、内饰材质、选装包、实时价格计算
5. 预约服务 - 在线预约试驾、到店接待、上门试驾
6. 金融方案 - 贷款计算器、分期方案、以旧换新估价
7. 订单中心 - 订单追踪、生产进度、物流状态、交付预约
8. 个人中心 - 会员体系、积分商城、专属顾问、收藏夹
9. 在线客服 - AI智能客服、真人顾问、视频咨询
10. 资讯社区 - 品牌动态、车主故事、试驾评测
输出核心页面清单（不少于18个页面）。
---
角色二：UI设计师
制定设计规范：
**设计风格**：极简奢华、科技未来感、沉浸式体验
**设计参考**：蔚来App、保时捷官网、特斯拉App、苹果设计语言
**配色方案**：
- 主色：深邃黑(#0A0A0A) / 纯净白(#FFFFFF)
- 强调色：香槟金(#C9A962) 或 电光蓝(#0066FF)
- 辅助色：高级灰(#8E8E93)、浅灰背景(#F5F5F7)
**设计元素**：
- 圆角：16-24px大圆角
- 阴影：轻微柔和阴影、毛玻璃效果
- 图片：高品质汽车大图
- 留白：大量留白营造高级感
---
角色三：前端开发
在单个HTML文件中实现所有原型页面。
**技术栈**：
- Tailwind CSS（CDN引入）
- FontAwesome / Heroicons 图标库
- Unsplash 高质量汽车图片
- Google Fonts 字体
**页面规格**：
- 移动端尺寸：390x844（iPhone 14 Pro）
- 所有页面以网格布局横向排列展示
- 每个页面添加标题标注
**必须包含的页面**：
1. 启动页/闪屏页
2. 登录页（手机号+社交登录）
3. 注册页
4. 首页（推荐车型、活动、快捷入口）
5. 车型列表页（筛选、排序）
6. 车型详情页（轮播图、参数、亮点）
7. 360°看车页
8. 智能选配页（颜色、配置选择）
9. 配置对比页
10. 预约试驾页
11. 预约成功页
12. 金融方案页（贷款计算器）
13. 订单列表页
14. 订单详情页（进度追踪）
15. 个人中心页
16. 会员中心页
17. 设置页
18. 在线客服页（聊天界面）
19. 资讯列表页
20. 资讯详情页
21. 搜索页
**视觉要求**：
- 使用Unsplash真实豪华汽车图片
- 界面精致度达到可直接开发的标准
- 注重细节：图标、间距、对齐、阴影
- 加入渐变、毛玻璃效果提升质感
- 底部导航栏固定美观
- 状态栏显示时间、信号、电量
**代码要求**：
- 语义化HTML5
- 清晰注释
- 组件化可复用
- 代码整洁
---
第三方平台导入兼容
生成的原型需支持导入以下设计平台：
**支持平台**：
- Figma
- MasterGo（即时设计）
- Sketch
- Adobe XD
- Pixso
**兼容性要求**：
1. **SVG导出支持**
- 每个页面可独立导出为SVG格式
- 添加"导出全部为SVG"功能按钮
- SVG保持矢量清晰度和图层结构
2. **图层命名规范**
- 使用语义化class命名（如：header、nav-bar、card-item）
- 组件层级清晰，便于在设计工具中识别
- 命名格式：模块/组件/状态（如：home/card/hover）
3. **设计标注输出**
- 输出完整的设计规范文档（Design Tokens）
- 包含：颜色值、字体大小、间距、圆角、阴影参数
- 格式兼容Figma Tokens插件
4. **组件化结构**
- 按钮、卡片、导航栏等封装为独立组件
- 便于在Figma/MasterGo中创建组件库
- 支持快速复制重建
5. **导出功能实现**
在HTML页面中添加工具栏，包含：
- [导出单页SVG] - 点击任意页面导出该页
- [导出全部SVG] - 打包下载所有页面
- [导出设计规范] - 下载JSON格式的Design Tokens
- [复制CSS变量] - 一键复制所有设计变量
6. **Figma导入指南**
- 在HTML中附带简要说明
- 步骤：SVG导入 → 解组 → 转换为Frame → 应用Auto Layout
---
输出标准
- 视觉效果接近真实App（高保真原型）
- 设计风格统一、专业、高端
- 功能逻辑完整、符合用户习惯
- 代码可用于实际开发参考
- 所有页面在一个HTML文件中完整呈现
- **支持一键导出SVG，可直接导入Figma/MasterGo等设计平台**
- **附带Design Tokens便于设计系统迁移**
请现在开始，依次以三个角色完成设计并输出完整HTML代码。
第三步：把上面的提示词复制给AI
第四步：AI生成对应的原型
具体原型
有了原型之后，可以自己进行修改，调试
设计规范 ：
设计规范 (Design Tokens)
颜色系统
主色-黑: #0A0A0A | 主色-白: #FFFFFF
强调色-金: #C9A962 | 强调色-浅金: #D4B978
中性灰: #8E8E93 | 浅灰背景: #F5F5F7
字体系统
展示字体: Playfair Display
正文字体: Inter
圆角系统
小圆角: 8px | 中圆角: 12px
大圆角: 16px | 超大圆角: 24px
间距系统
xs: 4px | sm: 8px | md: 16px
lg: 24px | xl: 32px
Figma/MasterGo 导入 ：
点击"导出全部SVG"下载所有页面的SVG文件
在Figma/MasterGo中，使用 File → Import 导入SVG
选择导入的SVG，右键 → Ungroup 解组
选择内容，右键 → Frame Selection 转换为Frame
应用Auto Layout整理布局
使用"导出设计规范"获取Design Tokens，导入到Figma Tokens插件
Claude Code 打通 Figma，2 分钟搞定产品UI界面（附保姆级安装教程）
一、安装claude code
第 1 步：下载 Cursor
安装claude code之前，要先安装Cursor、VScode等都可以。
直接让Cursor帮忙安装claude code
提示词：请直接在终端里帮我执行 npm install -g @anthropic-ai/claude-code 来安装 Claude Code CLI
然后如果遇到停顿，你就点击【RUN】就可以了。到下图的这一步，你就回复【用本地安装方案就行】
直到右图的显示，就说明安装成功了。
第 2 步：打开 Cursor 底部的“ 终端 (Terminal) ”
如果你现在界面底部没有那个用来敲命令的黑框框，你可以按下键盘快捷键 Cmd + J （Mac 系统），终端就会弹出来。
第 3 步：输入启动命令并回车
在弹出的终端里直接输入下面这三个单词，然后按下回车键：
npm run claude
如果遇到报错，直接截图发给Cursor问，根据他的步骤来解决。解决完报错问题，显示以下界面说明claude code安装成功了。
二、接入API
Claude Code 我们可以使用两种方式，第一种是官方版，第二种是使用国内模型如 GLM4.6 驱动 ClaudeCode。
使用官方版需要我们在 Claude.ai 进行订阅，目前 Claud 官方有 Pro、5x MAX、20x MAX 三种套餐形式，对应的价格分别为 20 刀、100 刀、200 刀。
另外因为 Claude 一直对国内进行封锁，所以想使用 Claude 官方版本需要突破网络和海外信用卡支付两个关卡，门槛较高。所以主要推荐大家使用国内的模型 GLM4.6 驱动 Claude Code
如果你是新用户，点击【财务】-【资源包管理】-【我的资源包】里面会有一些免费的额度可以使用。
如果你不是新用户，选择点击【GLM Coding Plan】
想试试水的话，选择第一个【GLM Coding Lite】就行了。
然后点击左侧菜单栏的API Key【添加新的API Key】
复制下图的API key。
三、下载cc switch
然后让AI直接帮你下载cc switch，我是让codex帮我下载的。
codex下载mac地址： https://openai.com/zh-Hans-CN/codex/codex
下载windows地址： https://apps.microsoft.com/detail/9plm9xgg6vks?hl=zh-CN&gl=CN
帮我下载cc switch：https://github.com/farion1231/cc-switch/releases
下载完后，打开CC Switch，点击右上角的添加【+】按钮。
选择智谱模型，再往下滑输入API。
粘贴刚刚复制的API key，点击【添加】就可以了。
再点击设置按钮。
这里有个设置一定要开，点击下面的【应用到claude code插件】开关。
四、启动claude code
点击删除按钮，删掉后，重新【command+j】打开终端。
输入命令claude回车，就可以愉快的聊天了！
五、连接figma mcp
第 1 步： 退回到最外层的电脑终端如果你现在还在 > 符号后面，请输入 /exit 然后回车。确保你回到了带有 % 符号的普通 Mac 终端界面。
第 2 步： 执行官方的“全局安装”命令在带有 % 的终端里，复制粘贴这行 Figma 官方专门给 Claude Code 准备的安装代码：
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
(注意：这里加了--scope user，意思是给你电脑上所有的代码项目都装上这个插件，以后换个文件夹敲代码也不用重复装了。复制完按下回车执行。)
第 3 步： 重新叫出claude code代码执行完毕后，再次输入启动口令，按回车：claude
第 4 步： 关键一步——去 Figma 官网领“通行证”在小机器人的 > 后面，输入 /mcp 并回车。看到>在figma中，继续回车。
请选择 Authenticate(授权) 并再次回车。电脑会自动弹出一个浏览器网页。在网页里登录你的 Figma 账号，并点击 Allow Access (允许访问) 。网页授权成功后，切回终端，你就会看到一句闪亮的 Authentication successful. Connected to figma.！
六、安装figma plugin
复制下面这条命令，粘贴到claude code，然后回车
/plugin install figma@claude-plugins-official
显示下面这个页面后，继续回车。
继续输入【/plugin】回车，会看到以下界面，键盘右键选择【installed】，再按回车。
这样插件就安装成功了！然后连按几下键盘左上角的 Esc键 ，直到退回那个只有 > 的普通聊天状态。
七、报错解决
这里有一个报错卡了我很久，就是下图这个400。
原本Claude code v2.1.69的版本降到68就可以了。
继续让codex帮你的版本改成低一个版本提示词：帮我的claude code版本改成v2.1.68
八、Claude code to figma
我们到figma【复制链接】建一个空的文件。
回到Cursor中，输入提示词：需要在下面的提示词中粘贴你的figma链接。
直接在这个空的 Figma 文件里，为我设计一个现代风格的设计师个人网站首页，包含导航栏、个人简介、作品集展示区和页脚。设计完成后，再帮我生成对应的 HTML/CSS/JS 代码：https://www.figma.com/design/obFdrXRrkBf7YlQzLNrr5F/Untitled?node-id=0-1&t=YaP6DHdJZ4fm0s
接着会一直做一些选项，一直选择yes回车就行。
最后会自动跳转到浏览器，然后可以直接点击【发送到figma】
就会自动发送到figma文件中。
看看它生成的效果，不愧是claude code，没话说，效果非常好！
九、修改完设计如何传回code里？
选择设计稿，右键复制【copy link to selection】。
回到claude code 中输入：
update changes:【这里是刚刚复制的链接】
claude就重新构建了对应的部分，就这么简单。
Claude Code + Mermaid 一键生成架构图、时序图、流程图
本文将手把手教你如何用 Claude Code生成Mermaid代码 ，并在Mermaid官网、draw.io、ProcessOn等工具中渲染成精美图表。
用Claude Code生成Mermaid代码
使用的工具是 Cursor + Claude Code，在Claude Code中输入结构化提示词，让它生成总体架构图，输出Mermaid代码。
生成时序图、流程图
有了Mermaid代码，那么生成时序图、流程图等图表也是同样的简单
使用Mermaid工具渲染图表（最快捷）
打开Mermaid官网，在Dashboard页面，选择“New diagram”新建图表
将Mermaid代码复制到左侧的CODE位置，右侧自动会生成架构图表，可以使用工具进行架构图风格的调整
使用draw.io工具渲染图表（功能最全面）
打开draw.io网站，点击“+”--->Mermaid...，将Mermaid代码粘贴到弹框中，点击“插入”即可生成架构图，可以使用工具进行架构图风格的调整
使用ProcessOn工具渲染图表（国内用户首选）
打开rocessOn网站，点击“新建”--->Mermaid，将Mermaid代码粘贴到页面左侧，则自动生成Mermaid图表，有条件的可以进行“图形化编辑”
生成时序图、流程图
有了Mermaid代码，那么生成时序图、流程图等图表也是同样的简单
总 结
通过Claude + Mermaid的组合，我们实现了：
效率提升： 从小时级到分钟级的图表生成速度
质量提升： 专业统一的图表风格
维护便捷： 文本格式方便迭代和版本管理
现在就开始你的AI绘图之旅吧！生成架构图、时序图、流程图、甘特图、状态图，你必须记住这个高效工作流：
描述需求 → 生成Mermaid代码 → 粘贴到渲染工具 → 精细化调整
claude code从需求到低保真线框图，再到高保真UI原型，全流程
利用AI IDE工具，从一个初始需求出发，生成专业的设计系统文档，再到低保真线框图，最终产出一套完整的高保真UI原型。
本文将包含所有步骤和反复验证过的高效提示词。
第一步：生成全面的设计系统文档
任何高质量的应用都始于一个统一、严谨的设计系统。它为整个产品的视觉和交互制定了标准，是后续所有开发工作的“单一事实来源”（Single Source of Truth）。
过去，这需要资深设计师投入大量时间。现在，通过一个结构化的Prompt，AI可以在几分钟内完成这项工作。
角色与目标
你是一位顶级的UI/UX设计系统架构师AI。你的核心任务是基于下方用户提供的极简信息，生成一份全面、结构化且对AI编程极其友好的设计系统文档。这份文档将作为唯一的“真理之源”，指导AI程序员以完美的一致性和高质量构建应用的前端界面。你必须能够自行推理和扩展，展现出高级的设计思维，生成绝大部分设计规范。
用户输入
这是我提供的核心信息：
1.产品需求：
* 显化APP:
`"一款名为‘星愿 (Stella)’的正念与愿望显化APP，目标用户是年轻职场人（25-35岁）。产品体验应是平静、充满希望、带有魔法感和空灵感的。核心功能包括每日誓言、感恩日记和一个用于可视化目标的‘愿望清单’。UI需要简洁、现代，并营造出一种私密、神圣的个人空间感。"`
2.核心色系：
--primary-100:#FF7F50;
--primary-200:#dd6236;
--primary-300:#8f1e00;
--accent-100:#8B4513;
--accent-200:#ffd299;
--text-100:#000000;
--text-200:#2c2c2c;
--bg-100:#F7EEDD;
--bg-200:#ede4d3;
--bg-300:#c4bcab;
你的任务：生成流程
请严格按照以下步骤，有条不紊地构建设计系统文档：
1.分析与推理： 深入分析“产品需求”，理解产品的气质、基调、目标用户和功能需求。你的所有设计决策都将以此为基础。
2.生成设计令牌 (Design Tokens)： 这是整个系统的基石。基于你的分析和用户提供的“核心色系”，生成一整套完整的设计令牌。
* 颜色 (Colors)： 将用户提供的核心色扩展为一个完整的色板。必须包含：
* 一个主色阶（例如从100到900），用于交互状态（如悬停、按下）。
* 一个完整的中性色（灰色）色阶，用于文本、背景和边框。
* 用于成功、错误、警告、信息状态的语义化颜色。
* **字体 (Typography)：** 建立一个和谐且易于访问的字体系统（如：大标题、一级标题、正文、辅助文字）。为每个样式定义`fontFamily`（字体族）、`fontWeight`（字重）、`fontSize`（字号）和`lineHeight`（行高）。请选择与产品气质相匹配的、免费可商用的字体（如：思源黑体、阿里巴巴普惠体、Inter等）。
* **间距 (Spacing)：** 基于标准的8px网格系统，定义一套间距单位（例如：4px, 8px, 16px, 24px, 32px, 48px）。
* **效果 (Effects)：** 定义标准的`borderRadius`（圆角）、`boxShadow`（阴影）以及其他可能需要的视觉效果（如`blur`模糊）。
3.**识别并生成核心组件：** 根据产品需求，主动识别并定义一套必要、可复用的UI组件。对于每个组件，你**必须**：
* 给它一个清晰、符合惯例的名称（如`Button`按钮、`Input`输入框、`Card`卡片）。
* 定义其可配置的`Props`（属性），如`type`（类型）、`size`（尺寸）、`state`（状态）。这对可复用性至关重要。
* 描述其样式是如何根据Props从设计令牌中派生出来的。
* **不要等我命名组件。请主动识别出按钮、输入框、卡片、模态框、导航栏等常见模式，并自己创建它们。**
4.**用示例页面蓝图进行演示：** 为了展示系统的实际应用，请为产品的一个关键页面（例如主看板或登录页）创建一个基于组件的布局蓝图。
输出格式
最终的输出**必须**是一个结构清晰的Markdown文档。请使用标题（`#`, `##`, `###`）来明确划分章节。所有的技术规范（令牌、组件属性）**必须**用YAML格式的代码块包裹，以确保最佳的可读性和机器可解析性。
---
[文档开始]
设计系统：[AI，请根据产品需求生成一个合适的项目名称]
1. 设计令牌 (Design Tokens)