面向应用设计的 Agent Skills
应用设计技能覆盖代码之前和代码周边的工作：研究应用面向谁以及这些人目前怎么做，为每项重要任务绘制贯穿各屏幕的流程，在流程确定后决定每个屏幕外观的 UI，在工程投入前做出可点击的原型，通过可用性测试观察人们试用原型并在哪里卡住，以及交接和系统工作，让工程得到一套协调的部件而不是一堆画板。使用排序列表时，将你当前阶段与所需子主题匹配，然后阅读技能描述以确认它适合你正在处理的屏幕或流程。选一个，应用到真实屏幕上，当输出站得住脚时再进入下一阶段。
8 个先看38 个推荐选项
从这些开始。
App design is product design for a small screen: research, flows, UI, prototype, then handoff and a system so later screens match.
这些是和这项工作最接近的结果。从第一条开始，打开后即可安装。
- 排名 01查看 Agent Skill直接匹配
figma-implement-design
官方将 Figma 设计转化为生产级应用代码，实现 1:1 视觉还原。适用于根据 Figma 文件实现 UI 代码、用户提到“实现设计”“生成代码”“实现组件”、提供 Figma URL，或要求构建与 Figma 规格匹配的组件时。若要通过 `use_figma` 写入 Figma 画布，请使用 `figma-use`。
声明的前提（自述）: Node.js
- 排名 02查看 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 而非硬编码值，逐板块增量组装屏幕。
- 排名 03查看 Agent Skill直接匹配
frontend-design
官方在构建新 UI 或重塑现有 UI 时，提供打造独特、有意图的视觉设计的指导。帮助确定美学方向、排版，并做出不显得像模板化默认选项的选择。
765,703 · 受欢迎程度 - 排名 04查看 Agent Skill直接匹配
frontend-design-review
官方> 审查和创建独特、生产级的前端界面，具有高设计质量和设计系统合规性。使用三个支柱进行评估：无摩擦的从洞察到行动、高质量工艺和可信赖的构建。适用于：PR 审查、设计审查、可访问性审计、设计系统合规性检查、创意前端设计、UI 代码审查、组件审查、响应式设计检查、主题测试和创建令人难忘的 UI。不适用于：后端 API 审查、数据库模式审查、基础设施或 DevOps 工作、无 UI 的纯业务逻辑或非前端代码。
- 排名 05查看 Agent Skill直接匹配
impeccable
前端界面设计 Skill，涵盖网站、仪表盘、产品 UI 和应用外壳的设计、重设计、评审、审计、打磨、UX 审查、层级、无障碍、动效和设计系统。面向应用 UI 设计，既广又深。
声明的前提（自述）: Node.js
319,215 · 受欢迎程度 - 排名 06查看 Agent Skill直接匹配
design-mobile-apps
当用户想要设计移动应用或 UI 界面、提到他们的 Sleek（sleek.design）项目，或用代码（HTML、React Native、SwiftUI）实现 Sleek 设计时使用。
声明的前提（自述）: API key · Paid account
692,237 · 受欢迎程度 - 排名 07查看 Agent Skill直接匹配
ui-ux-pro-max
面向 Web、移动端和桌面的 UI/UX 设计智能。此 skill 应在设计、构建、审查或修复界面时使用，包括页面、组件、设计系统、无障碍、交互、响应式布局、排版、颜色、图表，以及特定技术栈的 UI 实现。…
386,243 · 受欢迎程度 - 排名 08查看 Agent Skill直接匹配
imagegen-frontend-mobile
为 iOS、Android 和跨平台产品生成高端移动应用界面与流程图片：引导、认证、仪表盘等，具备应用原生的层级与一致性。直接面向移动应用设计概念。
340,357 · 受欢迎程度
展开另外 30 个 Agent Skills
- 排名 09查看 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'。
- 排名 10查看 Agent Skill直接匹配
penpot-document-handoff
官方为交付而记录 Penpot 设计，方法是在设计旁边（绝不覆盖其上）构建干净的注释层：左侧上下文卡片（“我们如何能够”目标、业务规则、链接、状态、希望/不希望获得的反馈）、UI 上的编号图钉标记、右侧对应的观察/建议便签卡，以及可选工具提示——全部包裹在单个可隐藏分组中，以便露出干净的设计。如果存在注释组件套件和 token 则复用；如果缺失则提议并创建一个最小套件。不用于审计（使用 penpot-audit-*）或重命名图层（使用 penpot-rename-layers）。触发词：“记录这个设计”、“为这个屏幕添加注释”、“为交付做好准备”、“添加设计注释”、“为开发者解释这个流程”、“添加观察笔记”、“创建评审卡片”、“为交付编写这个屏幕的规格”。
- 排名 11查看 Agent Skill直接匹配
prototype
精选通过保真度阶梯（从内容优先到代码）推进想法，每个层级都有验证计划，并包含用户旅程映射。
- 排名 12查看 Agent Skill直接匹配
design-review
精选使用 Nielsen 的 10 项启发式原则，从 6 个加权维度审查设计/UI，并提供按优先级排序的发现表。
- 排名 13查看 Agent Skill直接匹配
shadcn
精选管理 shadcn 组件和项目——添加、搜索、修复、调试、样式化和组合 UI，包括聊天界面。提供项目上下文、组件文档和使用示例。适用于使用 shadcn/ui、组件注册表、预设、--preset 代码，或任何带有 components.json 文件的项目。也会在“shadcn init”“create an app with --preset”或“switch to --preset”时触发。
271,099 · 受欢迎程度 - 排名 14查看 Agent Skill直接匹配
hallmark
反 AI 垃圾设计技能，适用于全新页面、审计、重设计和从 URL 或截图提取设计，强调结构多样性。非常适合提升应用/落地页 UI 设计质量。
60,409 · 受欢迎程度 - 排名 15查看 Agent Skill直接匹配
high-end-visual-design
教授高端代理机构风格的视觉设计：字体、间距、阴影、卡片结构和动画，并配有反通用规则和布局原型。非常适合高端 UI 视觉方向。
420,662 · 受欢迎程度 - 排名 16查看 Agent Skill直接匹配
gpt-taste
顶尖 UX/UI 与 GSAP 动效工程：强制布局变化、AIDA 页面结构、编辑式排版、无间隙便当网格和滚动动画。非常适合高端 Web UI 设计与动效。
364,217 · 受欢迎程度 - 排名 17查看 Agent Skill直接匹配
stitch-design-taste
为 Google Stitch 生成 DESIGN.md 设计系统文件，编码排版、颜色、布局、动效和反模式规则，以实现高级且非通用的 UI。适用于应用设计系统和屏幕生成。
360,899 · 受欢迎程度 - 排名 18查看 Agent Skill直接匹配
web-design-guidelines
官方审查 UI 代码是否符合 Web Interface Guidelines。当被要求“review my UI”“check accessibility”“audit design”“review UX”或“check my site against best practices”时使用。
- 排名 19查看 Agent Skill直接匹配
figma-create-design-system-rules
官方为用户代码库生成自定义设计系统规则。当用户说“创建设计系统规则”“为我的项目生成规则”“设置设计规则”“自定义设计系统指南”，或希望为 Figma 转代码工作流建立项目专属约定时使用。需要 Figma MCP 服务器连接。
声明的前提（自述）: MCP server
- 排名 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直接匹配
penpot-design-to-code-review
官方对照已实现的代码（源组件或 Storybook story）审查 Penpot 设计，并输出结构化的 DRIFT 报告。适用于工程师需要确认构建与设计一致时：从选区提取 HTML/CSS，将其 token/结构/状态映射到代码组件，进行差异比对，并列出双方各自缺失的内容及严重程度和调和方案。未提供代码源时，可优雅降级为设计系统 token 检查。触发词：'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。
- 排名 22查看 Agent Skill直接匹配
design-tokens
精选以 DTCG 格式生成、扩展或审计设计令牌，采用三层架构（基础、语义、组件）。
- 排名 23查看 Agent Skill可能匹配
image-to-code
图像优先的网站设计到代码工作流：生成设计图像，分析它们，然后实现前端以匹配。支持 Web 的视觉设计和原型制作，而非原生应用 UI。
350,805 · 受欢迎程度 - 排名 24查看 Agent Skill可能匹配
onboarding
优化注册后引导、激活、首次体验和价值实现时间，包括空状态和引导清单。适用于应用引导流程设计。
65,786 · 受欢迎程度 - 排名 25查看 Agent Skill可能匹配
minimalist-ui
干净的编辑风格界面。温暖的单色调色板、字体对比、扁平便当网格、柔和粉彩。无渐变，无厚重阴影。
388,176 · 受欢迎程度 - 排名 26查看 Agent Skill可能匹配
industrial-brutalist-ui
原始机械界面，融合瑞士字体印刷与军事终端美学。刚性网格、极端字号对比、实用主义色彩、模拟退化效果。适用于需要像解密蓝图一样的数据密集型仪表盘、作品集或编辑类网站。
363,309 · 受欢迎程度 - 排名 27查看 Agent Skill可能匹配
antfu-design
精选antfu 风格设计约定，范围更广。以 UnoCSS 优先，基于类的语义 token，为工具和 devtools UI 提供明暗双主题，并为落地页和产品界面提供设计解读、反粗制滥造和微交互打磨。在使用 UnoCSS 构建或重构任何界面时使用。
- 排名 28查看 Agent Skill可能匹配
frontend-ui-dark-ts
官方使用 Tailwind CSS 构建深色主题 React 应用，包含自定义主题、glassmorphism 效果和 Framer Motion 动画。在创建具有精致深色美学的仪表盘、管理面板或数据密集型界面时使用。
- 排名 29查看 Agent Skill可能匹配
vercel-react-view-transitions
官方指导使用 React 的 View Transition API 实现流畅、原生感的动画：页面过渡、共享元素、路由变化和列表重排。与应用 UI 动效和交互设计相关。
146,063 · 受欢迎程度 - 排名 30查看 Agent Skill可能匹配
pick-ui-library
精选且带有明确倾向的查询指南，用于为任务挑选合适的前端库：UI 基础组件、动效、图表、拖放、状态和样式。帮助做出应用 UI 实现选择。
144,655 · 受欢迎程度 - 排名 31查看 Agent Skill可能匹配
web-artifacts-builder
官方一套工具，用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂、多组件的 claude.ai HTML artifacts。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts——不适用于简单的单文件 HTML/JSX artifacts。
106,698 · 受欢迎程度 - 排名 32查看 Agent Skill可能匹配
higgsfield-websites
通过 Higgsfield CLI 构建、编辑和部署全栈网站、应用和游戏，包含设计简报和应用布局。应用构建在范围内，但设计次于部署。
113,070 · 受欢迎程度 - 排名 33查看 Agent Skill可能匹配
clerk-custom-ui
精选自定义身份验证流程和组件外观 - hooks（useSignIn，
51,131 · 受欢迎程度 - 排名 34查看 Agent Skill可能匹配
agent-browser
面向 AI agent 的浏览器自动化 CLI：导航页面、填写表单、点击、截图，以及 Web 应用探索性测试/QA。支持可用性测试和应用 QA，而非设计本身。
985,975 · 受欢迎程度 - 排名 35查看 Agent Skill可能匹配
webapp-testing
官方使用 Playwright 与本地 Web 应用交互并进行测试的工具包：验证前端功能、调试 UI 行为、截取屏幕截图和查看日志。支持应用 UI 的可用性/QA 测试。
172,108 · 受欢迎程度 - 排名 36查看 Agent Skill可能匹配
playwright-best-practices
全面的 Playwright 测试指导：E2E、组件、API、视觉、无障碍和安全测试，以及不稳定测试调试。支持应用 UI 的可用性/QA 测试。
90,886 · 受欢迎程度 - 排名 37查看 Agent Skill可能匹配
ios-design
为 iPhone 应用设计并审查 iOS UI/UX，使用 SwiftUI、UIKit 或 React Native：导航流程、排版、表单、键盘/安全区域布局，以及符合 Apple HIG 的无障碍设计。直接面向移动应用设计。
249,982 · 受欢迎程度 - 排名 38查看 Agent Skill可能匹配
ui-taste
为编码代理提供更好的 UI 品味：用于构建、重新设计、评审和打磨 Web 与 iOS 界面的反 UI 垃圾手册，并可选真实产品参考。直接针对 UI 设计质量。
452,376 · 受欢迎程度
这个话题涵盖什么
每个子主题对应一类具体场景下的 Agent Skills。
- Research
- Who this app is for, and what they already do instead.
- Flows
- The path through screens for each important job.
- UI
- How each screen looks once the flow is settled.
- Prototype
- Something tappable before engineering commits.
- Usability
- Watch people try the prototype and see where they stall.
- Handoff & system
- Give engineering a coherent set of parts, not a pile of artboards.
常见问题
- 我应该从哪个应用设计 Skill 开始？
- 从与你工作卡点相符的子主题开始。如果你还没确定应用面向谁，从研究开始；如果受众明确但屏幕路径不清晰，从流程开始。
- 这个列表是如何排序的？
- 该列表按观测到的搜索需求排名，直接匹配主题的排在前，并对任何单一发布者设上限，避免一个来源占满页面。
- 设计一个应用需要全部六个子主题吗？
- 这些阶段依次为研究、流程、UI、原型、可用性，然后是交接与系统，每个阶段都依赖前一个。你可以只加载单个阶段的技能，仍能获得有用的输出，但跳过研究或流程往往会让后续的 UI 工作更难站得住脚。
- 原型技能能替代可用性测试吗？
- 不是。原型 Skill 在工程投入之前产出可点击的东西，而可用性工作是观察人们试用该原型并看到他们在哪里卡住。它们是不同阶段，原型是可用性会话的输入。
如何安装 Agent Skill
从本页第一条开始。Claude Code 会读取放进 skills 目录的 SKILL.md：
- Claude Code——把 figma-implement-design 的 SKILL.md 复制到 ~/.claude/skills/figma-implement-design/（个人使用），或 .claude/skills/figma-implement-design/（随项目共享）。
- 从 registry 安装——运行 npx skills add openai/skills@figma-implement-design。
- 或者从 figma-implement-design 的来源下载 SKILL.md，放进上面的目录。
如何挑选 安装前先看出处和技能自身的说明。Official 与 Notable 标签描述的是技能来源。