tempad-dev
Figma设计稿转前端代码的浏览器插件
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tempad-dev。 它的用途是：Figma设计稿转前端代码的浏览器插件 完整的 Skill 内容见：https://321skill.com/skills/tempad-dev/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我看一下Figma里这个按钮的CSS样式，并转换成React的style对象格式。” AI会引导你使用Tempad Dev插件选中该按钮，然后在插件面板中直接获取CSS代码以及对应的JavaScript样式对象，你可以直接复制到React组件中使用。
介绍
Tempad Dev是一款专为Figma设计的开源交付工具浏览器插件，旨在解决设计师与前端工程师之间在样式代码交付环节的沟通与效率问题。它允许开发者在浏览器中直接查看Figma设计稿中任何元素的CSS和JSX样式代码，无需在Figma桌面端与代码编辑器之间反复切换，极大简化了设计稿审查和样式复用的流程。
使用时，用户只需在Chrome浏览器中安装此插件，打开Figma网页版，选中设计稿中的任意图层或组件，即可在插件面板中实时获取该元素对应的CSS代码，以及转换为JavaScript对象形式的样式，方便直接用于React等前端框架。插件支持配置CSS单位（如px转rem）、根字体大小和缩放比例，以适应不同的项目规范和设计系统。
该工具非常适合前端开发工程师、全栈开发者以及需要频繁从Figma设计稿中提取样式进行编码的团队成员。对于追求开发效率、希望减少手动计算样式值、或需要在JSX中快速应用样式的场景尤为有用。
建议在使用前，根据项目的前端技术栈（如是否使用CSS-in-JS）和设计规范（如是否使用rem单位）预先配置好插件的偏好设置，如单位转换和变量显示模式。需要注意的是，插件仅影响其面板内的代码输出，不会改变Figma画布本身的显示。对于复杂嵌套组件或使用了非常规Figma特性的设计，提取的代码可能需要人工微调。
核心特点
它不仅提供标准CSS代码，还直接生成JavaScript对象形式的样式，便于在JSX等现代前端框架中直接使用；同时，它深度集成了Figma变量系统，能根据变量配置（如WEB codeSyntax）输出精确的开发者预设语法，而MCP get_code接口仍提供稳定的CSS变量中间表示，兼顾了灵活性与稳定性。
注意事项
该插件仅适用于Figma网页版，不支持Sketch、Adobe XD等其他设计工具，且其单位转换等功能仅作用于插件面板的代码输出，不改变Figma画布本身。
常见问题
Tempad Dev支持哪些浏览器？
目前主要支持Chrome浏览器，可通过Chrome网上应用店安装。
它能将Figma设计直接导出为可运行的前端项目吗？
不能，它主要提供元素级的CSS和JS对象样式代码，用于辅助开发，并非全项目代码生成器。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tempad-dev/raw/index.md 读取 tempad-dev 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tempad-dev/raw/index.md（查看排版版本）