关于 flutter-figma-workflow
面向 Flutter 开发者的 Figma 设计实现工作流技能，强调先检查设计和现有项目，再映射组件并通过截图验证视觉一致性。
主要功能
- 01检查 Figma 画板与变体
- 02提取设计令牌和资源
- 03映射到 Flutter 组件
- 04通过截图验证布局
- 05检查无障碍性与交互
适用场景
- 01将 Figma 界面转换为 Flutter 实现
- 02适配不同响应式视口
- 03对照参考图检查实现截图
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/flutter-figma-workflow确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
evals/cases.jsonreferences/design-extraction-and-mapping.mdflutter-implementation-and-parity.md详细介绍
Flutter Figma 工作流
将 Figma 视为设计依据，而不是生成的代码。实施前，检查目标节点和 Flutter 项目。如果无法访问 Figma，请索取导出的屏幕或规格，或基于提供的资料开展工作，并说明这一限制；切勿声称检查过无法访问的文件。
工作流
- 确认准确的画板、变体、断点、状态和平台目标。
- 提取可复用的设计令牌、组件、资源、排版、约束和交互。
- 创建新的基础元素前，先将这些内容映射到现有的 Flutter 主题和组件。
- 实现语义清晰、由约束驱动的 Flutter 结构；不要逐层复刻 Figma 图层，也不要粘贴 CSS 坐标。
- 在参考视口和相关响应式尺寸下，渲染确定性的测试样例。
- 对比屏幕截图，优先修正层级和几何差异最大的部分，然后验证无障碍性和交互状态。
如需了解 Dev Mode、设计令牌、资源或 Code Connect，请加载设计提取与映射。如需了解布局转换和视觉验证，请加载Flutter 实现与一致性。
边界
- 如果源资料不完整，或任务需要新的视觉方向，请使用
flutter-ui-design。 - 如果没有 Figma 源文件，请使用
flutter-ui-patterns来确定组件结构。 - 仅在明确涉及相关需求时，才添加
flutter-responsive-layout、flutter-animation或flutter-accessibility。 - 除非设计或任务表明确有必要，否则保留仓库现有的包、字体、图标、主题和状态管理方式。
来源
评论
支持 Markdown