面向设计师的 Agent Skills
设计师技能覆盖设计工作的完整弧线，在发散与收敛之间交替：研究和发现以理解人和问题，把问题定义得足够清晰以便评判解决方案，构思以在承诺之前生成多个方向，视觉设计处理字体、色彩、图像和层级，原型制作以便一个版本可以被点击和测试，交付以便工程团队无需猜测即可构建，以及设计系统以便后续页面不必重新发明第一个页面。使用排名列表时，定位你现在所处的阶段，而不是你希望所处的阶段。阅读该子主题中排名靠前的几条，比较每个实际做什么，然后选择匹配你下一步需要产出的成果的那个。
8 个先看59 个推荐选项
从这些开始。
Design work alternates diverge/converge: discover the problem, define it, explore solutions, then make and hand off something buildable.
这些是和这项工作最接近的结果。从第一条开始，打开后即可安装。
- 排名 01查看 Agent Skill直接匹配
figma-generate-library
官方从代码库在Figma中构建或更新专业级设计系统。当用户想要创建变量/令牌、构建组件库、设置主题（浅色/深色模式）、记录基础或协调代码与Figma之间的差距时使用。此技能教授构建什么以及以什么顺序——它补充了教授如何调用Plugin API的`figma-use`技能。两个技能应一起加载。
- 排名 02查看 Agent Skill直接匹配
penpot-build-screen
官方像资深视觉设计师一样，根据简要说明在 Penpot 中设计生产级界面——复用现有设计系统（tokens + 组件），逐区块组装，绝不一次性完成。用于根据描述创建界面/页面/落地页/仪表盘。不适用于翻译现有代码（请使用 penpot-build-from-code）。触发词：'design a dashboard'、'create a landing page'、'design this app screen'、'build a UI from this brief'、'design a settings page'、'mock up a screen in Penpot'。
- 排名 03查看 Agent Skill直接匹配
penpot-document-handoff
官方为交付而记录 Penpot 设计，方法是在设计旁边（绝不覆盖其上）构建干净的注释层：左侧上下文卡片（“我们如何能够”目标、业务规则、链接、状态、希望/不希望获得的反馈）、UI 上的编号图钉标记、右侧对应的观察/建议便签卡，以及可选工具提示——全部包裹在单个可隐藏分组中，以便露出干净的设计。如果存在注释组件套件和 token 则复用；如果缺失则提议并创建一个最小套件。不用于审计（使用 penpot-audit-*）或重命名图层（使用 penpot-rename-layers）。触发词：“记录这个设计”、“为这个屏幕添加注释”、“为交付做好准备”、“添加设计注释”、“为开发者解释这个流程”、“添加观察笔记”、“创建评审卡片”、“为交付编写这个屏幕的规格”。
- 排名 04查看 Agent Skill直接匹配
impeccable
设计、重新设计、评审、审计、打磨和改进前端界面：UX 审查、视觉层级、无障碍、主题、排版、动效，以及可复用的设计系统或令牌。
声明的前提（自述）: Node.js
319,215 · 受欢迎程度 - 排名 05查看 Agent Skill直接匹配
design-system
Token 架构、组件规格和幻灯片生成：三层 token（原始、语义、组件）、CSS 变量、间距/排版比例和组件规格。
35,230 · 受欢迎程度 - 排名 06查看 Agent Skill直接匹配
interface-design
以工艺为先的界面设计，适用于仪表盘、管理面板、SaaS 应用、工具和数据界面，涵盖视觉工艺、布局层级、token、状态和设计系统一致性。
28,822 · 受欢迎程度 - 排名 07查看 Agent Skill直接匹配
design-system-patterns
使用设计令牌、主题基础设施和组件架构模式构建可扩展设计系统，包括语义令牌层级和 Figma 到代码工作流。
15,237 · 受欢迎程度 - 排名 08查看 Agent Skill直接匹配
penpot-uiux-design
使用 MCP 工具在 Penpot 中创建专业 UI/UX 设计的全面指南：设计系统、组件、令牌、仪表板、表单、导航和无障碍。
12,684 · 受欢迎程度
展开另外 51 个 Agent Skills
- 排名 09查看 Agent Skill直接匹配
design-tokens
精选以 DTCG 格式生成、扩展或审计设计令牌，采用三层架构（基础、语义、组件）。
- 排名 10查看 Agent Skill直接匹配
figma-create-design-system-rules
官方为用户代码库生成自定义设计系统规则。当用户说“创建设计系统规则”“为我的项目生成规则”“设置设计规则”“自定义设计系统指南”，或希望为 Figma 转代码工作流建立项目专属约定时使用。需要 Figma MCP 服务器连接。
声明的前提（自述）: MCP server
- 排名 11查看 Agent Skill直接匹配
figma-generate-design
官方当任务涉及将应用页面、视图或多板块布局转换到 Figma 时，请将此 skill 与 figma-use 搭配使用。触发条件：'write to Figma'、'create in Figma from code'、'push page to Figma'、'take this app/page and build it in Figma'、'create a screen'、'build a landing page in Figma'、'update the Figma screen to match code'。当用户希望根据代码或描述在 Figma 中构建或更新完整页面、屏幕或视图时，这是首选的工作流 skill。它通过 search_design_system 发现设计系统组件、变量和样式，将其导入，并使用设计系统 token 而非硬编码值，逐板块增量组装屏幕。
- 排名 12查看 Agent Skill直接匹配
penpot-audit-tokens
官方审计 Penpot 设计中的设计系统 / token 治理问题（区别于无障碍）：存在 token 却硬编码颜色、偏离网格的间距、孤立/未解析/未使用的 token、重复值，以及本应是组件实例的分离部件。生成严重程度报告并建议语义 token 替换。触发词：'audit tokens'、'find hardcoded colors'、'token governance'、'check design system consistency'、'find off-grid spacing'、'detect raw values'、'are we using tokens correctly'。
- 排名 13查看 Agent Skill直接匹配
ui-ux-pro-max
精选面向 Web、移动端和桌面端的 UI/UX 设计智能。在设计、构建、审查或修复界面时使用此技能，包括页面、组件、设计系统、无障碍性、交互、响应式布局、排版、色彩、图表以及特定技术栈的 UI 实现。可搜索的本地数据：79 种可搜索样式（50 种活跃）、192 种产品配色方案和推理配置、74 种字体搭配、119 条 UX 指南、105 个图标、17 个 GSAP 预设、25 种图表类型和 22 个技术栈。
359,767 · 受欢迎程度 - 排名 14查看 Agent Skill直接匹配
superdesign
在 Superdesign 画布上借助多个 AI 模型设计或重新设计前端 UI、演示文稿和图形，支持设计系统、可复用组件和多页面流程。
10,257 · 受欢迎程度 - 排名 15查看 Agent Skill直接匹配
brandkit
精选根据简要说明生成无障碍品牌设计系统：DTCG tokens、浅色与深色，以及一个通过 WCAG 验证的 theme.css。
声明的前提（自述）: Python
- 排名 16查看 Agent Skill直接匹配
prototype
精选通过保真度阶梯（从内容优先到代码）推进想法，每个层级都有验证计划，并包含用户旅程映射。
- 排名 17查看 Agent Skill直接匹配
figma
官方使用 Figma MCP server 从 Figma 获取设计上下文、截图、变量和资源，并将 Figma 节点转换为生产代码。当任务涉及 Figma URL、节点 ID、设计到代码的实现，或 Figma MCP 设置与故障排除时触发。
声明的前提（自述）: Node.js
- 排名 18查看 Agent Skill直接匹配
frontend-design-review
官方> 审查和创建独特、生产级的前端界面，具有高设计质量和设计系统合规性。使用三个支柱进行评估：无摩擦的从洞察到行动、高质量工艺和可信赖的构建。适用于：PR 审查、设计审查、可访问性审计、设计系统合规性检查、创意前端设计、UI 代码审查、组件审查、响应式设计检查、主题测试和创建令人难忘的 UI。不适用于：后端 API 审查、数据库模式审查、基础设施或 DevOps 工作、无 UI 的纯业务逻辑或非前端代码。
- 排名 19查看 Agent Skill直接匹配
penpot-build-from-code
官方将现有应用页面、视图或组件代码转换为绑定到现有设计系统的 Penpot 屏幕——把代码样式映射到语义 token，并复用库组件而非原始形状。适用于用户拥有真实代码/标记并希望逐节、按系统在 Penpot 中重建时。触发词：'build this in Penpot from code'、'turn this React/HTML/CSS into a Penpot screen'、'recreate this view in Penpot'、'port this page to Penpot'、'translate this component to Penpot bound to our tokens'、'code to Penpot'。
- 排名 20查看 Agent Skill直接匹配
penpot-design-md
官方从 Penpot 文件中提取 DESIGN.md 设计文档文件：采用 design-md 格式的可移植 markdown 规范（YAML frontmatter 包含颜色/字体/圆角/间距/组件 token 映射 + 文字章节：Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gaps），基于文件的真实 token、库资产和采样的组件样式——绝不虚构。对画布只读；写入一个本地 markdown 文件。触发词：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。
- 排名 21查看 Agent Skill直接匹配
design-mobile-apps
通过 Sleek API 设计移动应用 UI 屏幕，创建项目、用自然语言描述屏幕，并获取渲染后的屏幕，用于 HTML、React Native 或 SwiftUI。
声明的前提（自述）: API key · Paid account
680,204 · 受欢迎程度 - 排名 22查看 Agent Skill直接匹配
design-taste-frontend
面向落地页、作品集和改版的反低质前端 skill：阅读需求简报，推断设计方向，交付非模板化界面，使用真实设计系统并以审计优先进行改版。
576,715 · 受欢迎程度 - 排名 23查看 Agent Skill直接匹配
stitch-design-taste
为Google Stitch生成对agent友好的DESIGN.md文件，强制执行高级反通用UI标准：严格排版、校准色彩、非对称布局和微动效。
360,899 · 受欢迎程度 - 排名 24查看 Agent Skill直接匹配
emil-design-eng
编码 Emil Kowalski 关于 UI 打磨、组件设计、动画决策以及让软件感觉出色的隐形细节的理念，并附有必需的审查格式。
334,004 · 受欢迎程度 - 排名 25查看 Agent Skill直接匹配
apple-design
Apple 的界面设计和流畅物理动效方法，为 Web 转化：手势驱动 UI、弹簧动画、拖拽/滑动/面板交互、材质、字体排印和减少动态效果。
193,107 · 受欢迎程度 - 排名 26查看 Agent Skill直接匹配
design-md
精选分析 Stitch 项目，并将语义设计系统综合到 DESIGN.md 文件中
61,832 · 受欢迎程度 - 排名 27查看 Agent Skill直接匹配
design
统一设计技能，涵盖品牌识别、设计 token、UI 样式、logo 生成、企业形象项目、演示文稿、横幅、社交照片和图标。
33,989 · 受欢迎程度 - 排名 28查看 Agent Skill直接匹配
taste-design
为Google Stitch生成对agent友好的DESIGN.md文件，强制执行高级反通用UI标准：严格排版、校准色彩、非对称布局和微动效。
19,080 · 受欢迎程度 - 排名 29查看 Agent Skill直接匹配
expo-design-system
在 Expo 应用内构建和维护设计系统：可复用的设计令牌主题（颜色、间距、排版、圆角、阴影、动效）、组件约定和漂移审计。
12,347 · 受欢迎程度 - 排名 30查看 Agent Skill直接匹配
hue
精选从品牌或参考生成新设计语言技能的元技能。
- 排名 31查看 Agent Skill直接匹配
frontend-design
官方在构建新 UI 或重塑现有 UI 时，提供打造独特、有意图的视觉设计的指导。帮助确定美学方向、排版，并做出不显得像模板化默认选项的选择。
765,703 · 受欢迎程度 - 排名 32查看 Agent Skill直接匹配
high-end-visual-design
教授高端代理机构视觉设计：精确的字体、间距、阴影、卡片结构和动画，让网站显得昂贵，阻止通用默认样式。
420,662 · 受欢迎程度 - 排名 33查看 Agent Skill直接匹配
gpt-taste
顶尖 UX/UI 和 GSAP 动效工程：Python 驱动的布局随机化、AIDA 页面结构、宽幅编辑排版、无间隙便当网格和严格的 GSAP ScrollTrigger。
364,217 · 受欢迎程度 - 排名 34查看 Agent Skill直接匹配
figma-code-connect-components
官方使用 Code Connect 映射工具将 Figma 设计组件连接到代码组件。当用户说“code connect”、“connect this component to code”、“map this component”、“link component to code”、“create code connect mapping”，或希望在 Figma 设计与代码实现之间建立映射时使用。若要通过 `use_figma` 进行画布写入，请使用 `figma-use`。
声明的前提（自述）: Node.js
- 排名 35查看 Agent Skill直接匹配
tailwind-design-system
精选使用 Tailwind CSS v4、设计令牌、组件库和响应式模式构建可扩展的设计系统。适用于创建组件库、实现设计系统或标准化 UI 模式时。
64,327 · 受欢迎程度 - 排名 36查看 Agent Skill直接匹配
ui-styling
使用 shadcn/ui 组件、Tailwind CSS 工具类样式和基于 canvas 的视觉设计创建无障碍 UI，包括设计系统、响应式布局和深色模式。
32,431 · 受欢迎程度 - 排名 37查看 Agent Skill直接匹配
web-design-guidelines
官方审查 UI 代码是否符合 Web Interface Guidelines。当被要求“review my UI”“check accessibility”“audit design”“review UX”或“check my site against best practices”时使用。
- 排名 38查看 Agent Skill直接匹配
image-to-code
图像优先的网站设计到代码技能：生成设计图像，深入分析它们，然后实现网站以匹配，避免千篇一律的卡片堆砌和薄弱的层次结构。
350,805 · 受欢迎程度 - 排名 39查看 Agent Skill直接匹配
extract-design-system
精选从公开网站提取设计基元，并为你的项目生成起始 token 文件。
129,148 · 受欢迎程度 - 排名 40查看 Agent Skill直接匹配
firecrawl-website-design-clone
使用 Firecrawl 抓取证据将网站的设计系统提取为 agent 可用的 DESIGN.md：颜色、字体、间距、组件、布局模式和品牌指导。
32,746 · 受欢迎程度 - 排名 41查看 Agent Skill可能匹配
imagegen-frontend-web
生成高端网站设计参考图，每个版块一张，具备构图多样性、叙事概念主线和一致调色板，适用于落地页和营销网站。
346,401 · 受欢迎程度 - 排名 42查看 Agent Skill可能匹配
imagegen-frontend-mobile
为 iOS、Android 和跨平台生成高级移动应用屏幕概念和流程，具有清晰的层级、受控的调色板和手机模型框架。
340,357 · 受欢迎程度 - 排名 43查看 Agent Skill可能匹配
enhance-prompt
精选将模糊的 UI 想法转化为精炼、针对 Stitch 优化的提示。增强具体性、添加 UI/UX 关键词、注入设计系统上下文，并组织输出以获得更好的生成结果。
56,037 · 受欢迎程度 - 排名 44查看 Agent Skill可能匹配
react:components
将 Stitch 设计转换为模块化的 Vite 和 React 组件，或将现有 React 组件同步至最新 Stitch 设计，并带 AST 校验。
50,432 · 受欢迎程度 - 排名 45查看 Agent Skill可能匹配
landing-page-design
落地页转化优化，涵盖布局规则、首屏区域设计、CTA 心理学、首屏公式、社会证明放置和移动端设计。
45,260 · 受欢迎程度 - 排名 46查看 Agent Skill可能匹配
stitch-design
通过串联静态 HTML 提取、设计系统提取和文件上传，将前端代码（React、Angular、Vue）转换为 Stitch Design。
25,095 · 受欢迎程度 - 排名 47查看 Agent Skill可能匹配
kpi-dashboard-design
设计有效的 KPI 仪表盘，包括指标选择、可视化最佳实践、图表选择和实时监控模式。
15,222 · 受欢迎程度 - 排名 48查看 Agent Skill可能匹配
SVG Logo Designer
根据描述和设计规格创建专业 SVG 标志，生成多种不同布局、风格和概念的变体。
7,522 · 受欢迎程度 - 排名 49查看 Agent Skill可能匹配
diagram-design
精选创建品牌化架构图、IT 现状图、流程图、时序图、状态机图、ER/数据模型图、时间线图、泳道图、象限图、雷达/蜘蛛图、极坐标图（polar/radial lollipop）、循环/飞轮图、嵌套图、树形图、组织架构图、层叠图、维恩图、金字塔/漏斗图、矩形树图、条形图、瀑布图、折线图、甘特图和散点图，以及高层级图、流程图、medallion 图、数据流图、DP 集成图、DP 安全矩阵图、桑基图、鱼骨图、Wardley 地图、看板图、用户旅程图、部署图、依赖关系图、UML 类图、故事地图或数据库 schema 图，并输出为独立的 HTML/SVG/PNG。按选定尺寸/细节重绘 .drawio/.drawio.png/.drawio.svg、Mermaid .mmd 或 Excalidraw .excalidraw 源文件；从网站导入品牌 token；添加语义模式、标注、无障碍动效或手绘/草图风格。
- 排名 50查看 Agent Skill可能匹配
canvas-design
官方运用设计理念在 .png 和 .pdf 文档中创作精美的视觉艺术。当用户要求制作海报、艺术作品、设计或其他静态作品时，应使用此技能。创作原创视觉设计，绝不复制现有艺术家的作品，以避免版权侵权。
- 排名 51查看 Agent Skill可能匹配
theme-factory
官方用主题为制品设置样式的工具包。这些制品可以是幻灯片、文档、报告、HTML 落地页等。有 10 个预设主题（含颜色/字体），可应用于任何已创建的制品，也可即时生成新主题。
- 排名 52查看 Agent Skill可能匹配
brainstorming
通过协作对话将想法转化为完整成型的设计和规格，在实施前将请求分类为 spike、有界或架构级。
383,748 · 受欢迎程度 - 排名 53查看 Agent Skill可能匹配
animation-vocabulary
精选反向查询术语表，将网页动画或动效的模糊描述转化为准确术语（“弹出框打开时弹跳的那个东西”→ Pop in；“iOS 橡皮筋滚动”→ Rubber-banding）。适用于用户问“那个叫什么…”，或描述某个动效但不知道名称，并想用正确的词来提示 AI 或设计师。用于命名效果，而非设计或构建效果。
149,000 · 受欢迎程度 - 排名 54查看 Agent Skill可能匹配
flutter-add-widget-preview
使用 previews.dart 系统为 Flutter 项目添加交互式小组件预览，以实现一致的设计和 UI 组件的交互式测试。
33,809 · 受欢迎程度 - 排名 55查看 Agent Skill可能匹配
banner-design
为社交媒体、广告、网站主视觉和印刷品设计横幅，提供多种艺术指导方案、安全区规则和 HTML/CSS 排版。
32,427 · 受欢迎程度 - 排名 56查看 Agent Skill可能匹配
power-bi-report-design-consultation
Power BI 报告可视化设计咨询：图表选择、布局设计、面向特定受众的模式，以及可访问性，以实现有效报告。
9,339 · 受欢迎程度 - 排名 57查看 Agent Skill可能匹配
brand-guidelines
官方将 Anthropic 官方品牌配色和字体应用于任何可能受益于 Anthropic 外观风格的产物。当适用品牌配色或风格指南、视觉格式或公司设计标准时使用。
- 排名 58查看 Agent Skill可能匹配
ui-taste
通过针对 Web 和 iOS 的反 UI 粗糙操作手册，让编码 Agent 拥有更好的 UI 品味：布局选择、视觉层级、打磨和设计评审工作流。
452,376 · 受欢迎程度 - 排名 59查看 Agent Skill可能匹配
ios-design
为 SwiftUI、UIKit 或 React Native 中的 iPhone 应用设计和审查 iOS UI/UX：导航、排版、表单、键盘和安全区域布局，以及符合 Apple HIG 的无障碍设计。
249,982 · 受欢迎程度
这个话题涵盖什么
每个子主题对应一类具体场景下的 Agent Skills。
- Research & discovery
- Learn about the people and the problem before drawing screens.
- Define the problem
- Name the problem sharply enough that a solution can be judged.
- Ideation
- Generate more than one direction before committing.
- Visual design
- How it looks: type, color, imagery, and hierarchy.
- Prototyping
- A version people can click so the idea can be tested.
- Handoff
- Give engineering enough to build it without guessing.
- Design systems
- Shared parts so later screens do not reinvent the first one.
常见问题
- 这个列表是如何排序的？
- 它按观测到的搜索需求排名，直接匹配主题的排在前，并对任何单一发布者可占据的条目数设上限。
- 如果我在项目早期，应该从哪里开始？
- 从研究和发现开始，然后定义问题。把问题清晰地命名出来，才能让之后的任何解决方案可被评判。
- 一个技能能覆盖整个设计流程吗？
- 各子主题按发散/收敛的节奏划分：发现并定义问题、探索方向，然后制作并交付可构建之物。选择与你所处阶段匹配的 Skill，而不是指望一个 Skill 横跨所有阶段。
- 在两个相似 Skill 之间选择前，我应该看什么？
- 将每个 Skill 产出的成果与你接下来需要的东西进行比较，无论是可点击原型、交接规范，还是共享组件集。
如何安装 Agent Skill
从本页第一条开始。Claude Code 会读取放进 skills 目录的 SKILL.md：
- Claude Code——把 figma-generate-library 的 SKILL.md 复制到 ~/.claude/skills/figma-generate-library/（个人使用），或 .claude/skills/figma-generate-library/（随项目共享）。
- 从 registry 安装——运行 npx skills add openai/skills@figma-generate-library。
- 或者从 figma-generate-library 的来源下载 SKILL.md，放进上面的目录。
如何挑选 安装前先看出处和技能自身的说明。Official 与 Notable 标签描述的是技能来源。