SuperAPI AI 工具集

figma-analyze-frame

设计与创作

查看项目

更新于 10-16 03:39

技能介绍

用途:分析指定 Figma 画板的结构、属性与实现方式,为前端工程师提供落地指导。

主要能力:

  1. 结构分析:识别画板父子层级,列出各图层及其类型(文本、矩形、组、组件等),标明布局方式(自动布局、固定或绝对定位),识别组件实例。
  2. 样式分析:提取填充、描边、阴影等颜色,记录字体、字号、字重与行高,收集间距与尺寸值,检查 design token 使用及模糊等效果。
  3. 布局分析:描述布局系统(相当于 flexbox、grid 或绝对定位),根据约束和缩放规则推断响应式行为,识别内边距、间隙与对齐方式。
  4. 交互分析:识别按钮、链接、输入框等交互元素,查看原型连接与交互,检查 hover、active、disabled 等状态及对应组件变体。
  5. 实现建议:推荐 HTML 语义结构与 CSS 方案(flexbox、grid、自定义属性),给出组件拆分建议、无障碍注意事项和响应式策略。

使用方式:该命令依赖 Figma Desktop MCP 服务器访问画板属性、图层、样式与布局信息。接受基于当前选择或基于链接的输入;若两者都未提供,会提示用户选择画板或提供 URL。最终以分析报告形式输出,包含画板名称、文件、URL、层级树、布局系统、样式、所用组件、响应式行为、无障碍考量、实现建议、潜在问题与后续步骤。

适用场景:工程师在拿到 Figma 设计稿后需要理解其结构并规划实现;设计到代码的交接;需要拆解组件、规划断点与无障碍方案时。

限制:资料未提供收费、价格、平台支持范围与具体效果数据。报告中的部分内容(如无障碍、性能、暗色模式等)仅在用户额外请求时分析。若画板过于复杂,可建议分区块分析。

分类:依据其“从 Figma 设计到前端实现分析”的用途,归入前端与建站。