Claude Code到Figma实验
使用Claude Code生成的移动应用程序模型，并通过 HTML设计 MCP集成。
屏幕
| 文件 | 屏幕 | 描述 |
|---|---|---|
login.html | 登录 | 电子邮件/密码+谷歌账号；GitHub OAuth |
task-list.html | 任务列表 | 带过滤器、任务卡、底部导航的仪表板 |
task-detail.html | 任务详细信息 | 任务元数据、子任务、活动提要 |
new-task.html | 新建任务 | 创建带有指定人员、子任务的表单 |
用法
在本地提供文件并捕获到Figma中：
# Start a local server
npx http-server . -p 8080
# Each file can be opened with Figma MCP capture parameters:
# http://localhost:8080/login.html#figmacapture=...&figmaselector=.phone-frame&figmadelay=2000Figma MCP generate_figma_design 该工具处理捕获ID生成和轮询。
约束条件
每个HTML文件必须 独立的 （所有CSS都是内联的），因为Figma捕获序列化器一次处理一个页面。CSS在文件之间的重复是有意的。
看 docs/solutions/integration-issues/figma-mcp-overflow-scroll-height.md 用于序列化器特定的CSS规则和陷阱。
密钥序列化程序规则
- 使用
background-color不background纯色的简写 - 使用
flex: 1没有overflow-y: auto关于内容领域 - 替换CSS伪元素(
::before/::after)具有真正的DOM元素 - 内容必须物理上适合手机框架（~795px内容预算）
- 添加
?v=N迭代时缓存崩溃
手机框架模板
Phone frame: 433x892px, 12px padding
Phone screen: ~409x868px
Status bar: ~54px
Content area: ~760-795px
Home indicator + spacer: ~33px添加新屏幕
- 将任何现有文件复制为模板
- 保持手机框架外壳（外面的一切 ``)
- 用屏幕的UI替换内容区域
- 验证总内容高度是否在~795px预算范围内