AI导哈

Figma移动应用原型生成工具

通过Claude Code生成移动应用原型并利用HTML-to-Design插件推送至Figma的设计工具，适用于快速创建和迭代移动应用界面。

  • by SeanSmithDesign
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 SeanSmithDesign/claude-code-to-figma-experiments

使用说明

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=2000

Figma 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

添加新屏幕

  1. 将任何现有文件复制为模板
  2. 保持手机框架外壳（外面的一切 <!-- SCREEN CONTENT -->)
  3. 用屏幕的UI替换内容区域
  4. 验证总内容高度是否在~795px预算范围内

相关 MCP