全部 Codex Skills

figma-to-code

这个工具能帮你把Figma设计秒变Angular代码,像素级还原设计稿。它会自动提取Figma尺寸参数,生成对应组件,还能用Storybook记录设计规范,最后用截图对比确保代码实现与原设计毫厘不差。

分类
开发编程
来源仓库
https://github.com/psalkowski/figma-to-code

功能简介

这个工具能帮你把Figma设计秒变Angular代码,像素级还原设计稿。它会自动提取Figma尺寸参数,生成对应组件,还能用Storybook记录设计规范,最后用截图对比确保代码实现与原设计毫厘不差。

适用能力

[{"title":"设计到代码,一键直达","desc":"省去80%设计还原时间,让团队协作不再出现设计走样"},{"title":"复用项目上下文","desc":"结合已有文件、规则和输入材料,减少每次重新说明背景的成本。"},{"title":"输出可交付结果","desc":"适合生成分析结果、执行步骤、代码修改建议或可复制的内容草稿。"}]

输入说明

需求描述、项目文件、参考资料、截图或用户指定的执行规则。

输出说明

分析结果、执行步骤、生成内容、代码修改或可复制的交付文档。

示例提示词

["使用 figma-to-code 帮我处理这个任务","调用 figma-to-code,按当前项目规则给出执行方案","用 figma-to-code 生成一版可以直接交付的结果"]

安装命令

codex skill add psalkowski/figma-to-code