figma
SkillGitHub
io.github.openai/skills/figma
使用 Figma MCP 服务器获取设计上下文、截图、变量与素材，并把 Figma 节点翻译为可上线代码。当任务涉及 Figma URL、节点 ID、设计到代码的实现，或 Figma MCP 的配置与排障时触发。
source
“figma design image icon” 共 34 个结果
io.github.openai/skills/figma
使用 Figma MCP 服务器获取设计上下文、截图、变量与素材，并把 Figma 节点翻译为可上线代码。当任务涉及 Figma URL、节点 ID、设计到代码的实现，或 Figma MCP 的配置与排障时触发。
io.github.designed-by-ai/skills/design-mobile-apps
设计移动 App 或 UI 界面，并将 Sleek 设计落地为代码。
io.github.leonxlnx/taste-skill/image-to-code-skill
面向 Codex 的图生代码技能，先出设计图再实现网站。
io.github.leonxlnx/taste-skill/imagegen-frontend-web
按页面板块逐张生成横向设计参考图，保持统一配色。
io.github.prime-skills/runcomfy-agent-skills/image-to-video
按动画意图在 RunComfy 目录中匹配合适的图生视频模型。
io.github.prime-skills/runcomfy-agent-skills/image-edit
在 RunComfy 上按意图自动匹配最合适的图像编辑模型。
io.github.leonxlnx/taste-skill/imagegen-frontend-mobile
生成 App 原生风格的界面概念与流程设计图，仅出图。
io.github.leonxlnx/taste-skill/taste-skill-v1
保留的 v1 原版设计品味 Skill，仅供需要精确向后兼容的项目使用。
io.github.emilkowalski/skills/emil-design-eng
融入 Emil Kowalski 的 UI 打磨与动画决策理念。
io.github.emilkowalski/skills/apple-design
将 Apple 的界面设计与流畅物理动效理念移植到网页端，涵盖手势驱动 UI、弹簧动画、拖拽/滑动/弹层交互、惯性动效与可打断过渡、半透明材质与纵深感、排版、reduced-motion 及 Apple 风格界面的设计基础。
io.github.anthropics/skills/frontend-design
在为全新 UI 或改造现有 UI 提供有辨识度、有意图的视觉设计指导。帮助把握美学方向、字体排印，避免设计看起来像模板化的默认样式。
io.github.anthropics/skills/canvas-design
基于设计理念创作 .png 和 .pdf 格式的精美视觉作品。当用户要求制作海报、艺术作品、设计稿或其他静态作品时使用。只创作原创视觉设计，绝不抄袭现有艺术家作品以避免版权风险。
io.github.openai/skills/figma-use
**强制前置条件**——每次调用 `use_figma` 工具前必须先加载本技能，切勿在未加载的情况下直接调用 `use_figma`，否则会引发常见且难排查的失败。凡用户要执行写操作或需要在 Figma 文件内运行 JavaScript 的特殊读操作时触发——如创建/编辑/删除节点、配置变量或令牌、构建组件与变体、修改自动布局或填充、把变量绑定到属性、或以编程方式检查文件结构。
io.github.openai/skills/figma-implement-design
将 Figma 设计翻译为可上线的应用代码，视觉还原度 1:1。在从 Figma 文件实现 UI 代码时使用；用户提到“实现设计”“生成代码”“实现组件”、提供 Figma URL，或要求构建符合 Figma 规格的组件时触发。经 `use_figma` 写入 Figma 画布请用 `figma-use`。
io.github.openai/skills/figma-generate-library
基于代码库在 Figma 中构建或更新专业级设计系统。当用户想创建变量/令牌、构建组件库、配置主题（明/暗模式）、整理基础规范文档，或弥合代码与 Figma 差异时使用。本技能教“建什么、按什么顺序建”，与教“如何调用 Plugin API”的 `figma-use` 互补，两者应一起加载。
io.github.openai/skills/figma-generate-design
与 figma-use 配合使用，把应用页面、视图或多区块布局翻译到 Figma。触发语：“写到 Figma”“在 Figma 里从代码创建”“把页面推到 Figma”“用这个应用/页面在 Figma 里搭建”“创建界面”“在 Figma 里做落地页”“更新 Figma 界面以匹配代码”。凡用户要从代码或描述在 Figma 构建/更新完整页面、界面或视图，本技能是首选工作流。通过 search_design_system 发现设计系统组件、变量与样式并导入，按区块逐节拼装界面，始终使用设计系统令牌而非硬编码值。
io.github.openai/skills/figma-create-new-file
创建新的空白 Figma 文件。当用户想新建 Figma 设计文件或 FigJam 文件，或在调用 use_figma 前需要先有新文件时使用；必要时通过 whoami 完成方案解析。用法——/figma-create-new-file [editorType] [fileName]（例：/figma-create-new-file figjam My Whiteboard）
io.github.openai/skills/figma-create-design-system-rules
为用户代码库生成自定义设计系统规则。当用户说“创建设计系统规则”“为我的项目生成规则”“设置设计规则”“定制设计系统指南”，或想为 Figma 转代码工作流建立项目专属约定时使用。需要连接 Figma MCP 服务器。
io.github.openai/skills/figma-code-connect-components
使用 Code Connect 映射工具把 Figma 设计组件与代码组件关联。当用户说“code connect”“把组件连到代码”“映射这个组件”“链接组件与代码”“创建 code connect 映射”，或想建立 Figma 设计与代码实现之间的对应关系时使用。经 `use_figma` 写入画布时请配合 `figma-use`。
io.github.vercel-labs/agent-skills/web-design-guidelines
按 Web Interface Guidelines 合规性审查 UI 代码。当被要求“审查我的 UI”“检查无障碍”“审计设计”“评审 UX”或“对照最佳实践检查我的站点”时使用。
io.github.heygen-com/hyperframes/hyperframes
制作、编辑与渲染视频动画的统一入口，HyperFrames 默认框架。
io.github.prime-skills/runcomfy-agent-skills/nano-banana-2
在 RunComfy 上用 Google Nano Banana 2 生成图像并附提示词范式。
io.github.prime-skills/runcomfy-agent-skills/nano-banana-edit
用 Nano Banana 2 做图生图编辑，可保留主体或换背景。
io.github.heygen-com/hyperframes/media-use
HyperFrames 媒体统一入口：解析素材，处理配音与剪辑。