figma
一款快速集成Figma设计资源的高效开发工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figma。 它的用途是：一款快速集成Figma设计资源的高效开发工具 详细介绍见：https://321skill.com/skills/figma-figma-ui/ 请根据该页面的说明完成安装。
使用示例
“根据Figma文件‘项目主页’中的主按钮样式，生成对应的React组件代码。”，它会通过ui MCP查询到按钮的精确颜色、圆角、内边距和字体样式，并生成符合设计规范的代码片段。或者，你可以说：“检查当前组件的间距是否与Figma设计稿中的间距系统一致。”，它会自动对比并指出差异。
介绍
ui MCP 是一款旨在弥合设计与开发之间鸿沟的高效工具。它解决了开发者在将Figma设计稿转化为实际代码时，需要频繁手动查看、测量和复制设计元素（如颜色、间距、字体等）的繁琐问题，从而提升开发效率和准确性。
通过将Figma项目与你的开发环境（如IDE或命令行）连接，该工具允许你直接查询设计系统中的设计令牌（Design Tokens）、组件规格、图层信息等。你可以通过简单的命令获取颜色值、间距定义、字体样式等，并将其快速应用到代码中，实现设计与代码的同步。
该工具非常适合前端开发、UI设计师以及全栈开发人员使用。对于前端开发者，可以快速获取设计规范，减少沟通成本；对于UI设计师，可以确保设计系统被准确实施；对于产品经理或项目经理，可以更方便地跟踪设计实现的进度和一致性。
使用前请确保你拥有对应Figma文件的访问权限，并配置好必要的API密钥。建议在团队中推广使用，以建立统一的设计-开发工作流。注意，它主要辅助获取设计数据，不直接生成完整的UI代码，复杂的布局和交互逻辑仍需开发者手动实现。
核心特点
与同类工具相比，它深度集成MCP（Model Context Protocol）协议，能够将Figma设计数据作为结构化上下文直接提供给AI助手（如Claude），使AI能基于最新设计规范进行代码编写或审查，实现了设计数据与AI开发工作流的无缝结合。
注意事项
不适合需要直接生成复杂、完整页面代码或处理高度动态、交互式原型设计的场景。
常见问题
这个工具需要Figma的什么权限？
需要你拥有对应Figma文件的查看权限，并生成一个具有文件内容读取权限的Personal Access Token进行授权。
它能将Figma设计直接转换成代码吗？
不能直接生成完整页面代码，但它能高效提取设计令牌（如颜色、字体、间距）和组件信息，为开发者编写代码提供精确的数据支持。