figma bro
创建者 John Bai
读取 Figma 画板、准备实现规格、检查组件与设计变量一致性。
来源核查
从设计到实现
提供具体画板与前端栈，要求布局、状态和变量交接，再对照设计核查，使编程 Agent 的任务更具体。
前端工程师设计工程师小团队
使用方法 figma bro
把一个 Figma 画板变为可实施规格。
基于所链接模板的 AI IDE List 使用说明。任务与审阅标准是建议，并非实测结果。
先添加这个 Bot
打开 官方 figma bro 模板 ，选择 Import Bot 并在应用完成添加。进入对话后按下方流程操作；尚未配置应用时，请先阅读 安装与连接指南 .
准备事项
- Bot 可访问的具体画板链接。
- 框架、视口尺寸与组件约定。
- 相关设计变量或组件库参考。
确保画板可访问
提供具体链接并授权；失败时提供截图和变量，说明无法检查的内容。
说明实现背景
指定框架、组件库、响应式目标及静态画板之外的交互状态。
索取工程规格
要求布局尺寸、变量映射、组件复用和状态行为，区分推断与直接读取值。
构建前解决歧义
检查悬停、错误、加载与移动状态，规格明确后再批准构建。
首次运行示例
将所有 [BRACKETED_VALUE] 替换为你的资料，附上所需文件，然后在 Bot 对话中发送。
将 [FIGMA_FRAME_URL] 转为使用 [COMPONENT_LIBRARY] 的 [FRAMEWORK] 规格。宽度：[VIEWPORTS]，变量：[TOKEN_REFERENCE]。 描述布局、间距、字体、颜色、可复用组件与状态，区分直接读取值和假设。把缺失的移动、加载、错误、键盘焦点行为列成问题。 先返回规格，待我解决缺口再请求实现。
应得到的成果
用此检查表审阅首次成果，补足缺失项。
- 有测量值、变量与组件映射的画板规格。
- 交互与响应式要求，明确假设。
- 实施前需解决的设计缺口清单。
下次运行
用已批准规格构建，或审查另一画板的一致性；周查可选。
首次运行受阻时
只有截图时要求视觉近似与缺失尺寸表，精确 Figma 数值需要设计权限。
模板包含什么
官方来源根据公开条目整理。以下标签描述能力，实际安装的技能和连接器名称不一定公开。
集成与输入
- Figma
- 粘贴的设计链接
技能与操作流程
Build specifications · Token audits · Component audits · Motion notes
例行任务
可选每周组件库检查，默认关闭。
注意事项
截图提供的信息少于设计文件，请注明哪些数值是直接读取。