面向Web 设计的 Agent Skills
网页设计技能涵盖将网站转变为访客真正能使用的东西。这分为几个可识别的领域：信息架构，即页面地图及其连接方式；用户体验，即访客能否完成他们前来的任务；视觉设计，即网站作为一个连贯表面看起来如何；响应式布局，即布局能重排而非在小屏幕上崩坏；无障碍性，即能用辅助技术操作而非仅靠鼠标；内容设计，即文字和媒体是为页面而设计而非随意堆砌；以及交互设计，即用户操作时的状态、动效和反馈。使用排名列表时，将你当前的瓶颈与这些领域之一匹配，然后阅读技能描述以确认它针对该领域，再加载它。
8 个先看47 个推荐选项
从这些开始。
Web design decomposes the same way as website design: structure, experience, visuals, responsiveness, and access — then the content and interactions that live on top.
这些是和这项工作最接近的结果。从第一条开始，打开后即可安装。
- 排名 01查看 Agent Skill直接匹配
impeccable
前端界面设计技能，涵盖形状、评审、审计、打磨、布局、排版、颜色、动效、无障碍、响应式行为和设计系统，适用于网站、仪表板和产品 UI。
声明的前提（自述）: Node.js
319,215 · 受欢迎程度 - 排名 02查看 Agent Skill直接匹配
ui-ux-pro-max
可搜索的 UI/UX 设计智能，涵盖样式、调色板、字体搭配、UX 指南、图标、图表以及针对 Web、移动和桌面界面的技术栈特定实现。
386,243 · 受欢迎程度 - 排名 03查看 Agent Skill直接匹配
redesign-existing-projects
审计现有网站和应用中通用的 AI 设计模式，并在不破坏功能的前提下应用高端排版、色彩、表面和布局升级。
418,259 · 受欢迎程度 - 排名 04查看 Agent Skill直接匹配
interface-design
面向仪表盘、管理后台、SaaS 应用、工具和数据界面的工艺优先界面设计技能，涵盖视觉层级、tokens、状态和设计系统一致性。
28,822 · 受欢迎程度 - 排名 05查看 Agent Skill直接匹配
frontend-design-direction
为网站、仪表盘、应用和组件设定产品专属的前端设计方向，涵盖用途、受众、基调、层级、排版、色彩、动效和响应式约束。
6,663 · 受欢迎程度 - 排名 06查看 Agent Skill直接匹配
image-to-code
图像优先的网站设计工作流：生成区块设计图，深入分析后实现匹配的前端，面向高端落地页和营销网站。
350,805 · 受欢迎程度 - 排名 07查看 Agent Skill直接匹配
huashu-design
基于 HTML 的高保真设计技能，适用于原型、幻灯片、动画和可视化，具备三方向草稿关卡、艺术指导角色和专家评审工作流。
47,980 · 受欢迎程度 - 排名 08查看 Agent Skill直接匹配
ux-heuristics
使用 Nielsen 启发式、Krug 定律、严重程度评级、认知走查和暗黑模式识别来评估并改进界面可用性。
7,967 · 受欢迎程度
展开另外 39 个 Agent Skills
- 排名 09查看 Agent Skill直接匹配
imagegen-frontend-web
生成高级的逐区块网站设计参考图，具备构图多样性、一致的调色板，以及面向落地页和产品稿的转化感知艺术指导。
346,401 · 受欢迎程度 - 排名 10查看 Agent Skill直接匹配
penpot-uiux-design
通过MCP工具在Penpot中创建专业UI/UX设计的指南，涵盖设计系统、组件、仪表板、表单、导航、落地页和无障碍设计。
12,684 · 受欢迎程度 - 排名 11查看 Agent Skill直接匹配
interaction-design
设计和实现微交互、动效设计、过渡、加载状态和用户反馈模式，并附有时机和缓动指导。
15,330 · 受欢迎程度 - 排名 12查看 Agent Skill直接匹配
site-architecture
信息架构专家技能，用于规划网站页面层级、导航、URL 结构和内链，附带站点类型模板和层级设计指导。
113,956 · 受欢迎程度 - 排名 13查看 Agent Skill直接匹配
accessibility-compliance
实现符合 WCAG 2.2 的界面，包含 ARIA 模式、键盘导航、焦点管理、屏幕阅读器支持和包容性设计实践。
14,016 · 受欢迎程度 - 排名 14查看 Agent Skill直接匹配
accessibility
在 Web、iOS 和 Android 上设计、实现并审计符合 WCAG 2.2 AA 的无障碍 UI，涵盖 ARIA 角色、焦点管理、对比度、目标尺寸和屏幕阅读器。
8,244 · 受欢迎程度 - 排名 15查看 Agent Skill直接匹配
wcag-audit-patterns
开展 WCAG 2.2 无障碍审计，包括自动化测试、人工验证、POUR 原则、严重性评级和修复指导。
11,974 · 受欢迎程度 - 排名 16查看 Agent Skill直接匹配
web-typography
选择、搭配和实施 Web 字体的实用指南，涵盖可读性、响应式排版、字体加载、层级和性能。
8,413 · 受欢迎程度 - 排名 17查看 Agent Skill直接匹配
ui-styling
使用 shadcn/ui 组件、Tailwind CSS 工具类样式、响应式布局、主题、深色模式和设计系统 token 构建无障碍用户界面。
32,431 · 受欢迎程度 - 排名 18查看 Agent Skill直接匹配
apple-design
将 Apple 的流体界面设计和物理运动原则转化到 Web，涵盖手势驱动 UI、弹簧、拖拽/滑动/面板交互、材质、排版和减少动态效果。
193,107 · 受欢迎程度 - 排名 19查看 Agent Skill直接匹配
information-architecture
在视觉设计开始前定义产品或网站的结构层。涵盖导航、内容层级、页面结构、URL 模式和用户流程。适用于用户想要规划网站结构、定义导航、梳理用户流程、组织内容，或提到“IA”或“信息…”时。
5,661 · 受欢迎程度 - 排名 20查看 Agent Skill直接匹配
web-design-reviewer
此技能可对本地或远程运行的网站进行视觉检查，以识别并修复设计问题。触发请求如“review website design”、“check the UI”、“fix the layout”、“find design problems”。可检测响应式设计、无障碍、视觉一致性和…方面的问题
13,744 · 受欢迎程度 - 排名 21查看 Agent Skill直接匹配
web-design-engineer
使用 HTML/CSS/JavaScript/React 构建或重新设计精美的浏览器渲染视觉产物：页面、仪表盘、原型、幻灯片、动画、UI 原型图和数据可视化。用于视觉前端创作、设计系统探索、设计评审或明确的浏览器验收/……
7,763 · 受欢迎程度 - 排名 22查看 Agent Skill直接匹配
high-end-visual-design
教会 AI 像高端机构一样做设计。定义让网站显得昂贵的精确字体、间距、阴影、卡片结构和动画。屏蔽所有让 AI 设计显得廉价或平庸的常见默认设置。
420,662 · 受欢迎程度 - 排名 23查看 Agent Skill直接匹配
frontend-design
官方在构建新 UI 或重塑现有 UI 时，提供打造独特、有意图的视觉设计的指导。帮助确定美学方向、排版，并做出不显得像模板化默认选项的选择。
765,703 · 受欢迎程度 - 排名 24查看 Agent Skill直接匹配
web-design-guidelines
官方审查 UI 代码是否符合 Web Interface Guidelines。当被要求“review my UI”“check accessibility”“audit design”“review UX”或“check my site against best practices”时使用。
- 排名 25查看 Agent Skill直接匹配
frontend-design-review
官方> 审查和创建独特、生产级的前端界面，具有高设计质量和设计系统合规性。使用三个支柱进行评估：无摩擦的从洞察到行动、高质量工艺和可信赖的构建。适用于：PR 审查、设计审查、可访问性审计、设计系统合规性检查、创意前端设计、UI 代码审查、组件审查、响应式设计检查、主题测试和创建令人难忘的 UI。不适用于：后端 API 审查、数据库模式审查、基础设施或 DevOps 工作、无 UI 的纯业务逻辑或非前端代码。
- 排名 26查看 Agent Skill直接匹配
firecrawl-website-design-clone
使用 Firecrawl 抓取证据，将任何网站的设计系统提取为 Agent 可用的 DESIGN.md。当用户想要从网站获取颜色、字体、间距、组件、布局模式或品牌/UI 指南，以便 AI Agent 创建新网站、克隆外观或构建受其启发的页面时使用…
32,746 · 受欢迎程度 - 排名 27查看 Agent Skill直接匹配
penpot-audit-accessibility
官方根据 WCAG 2.1/2.2 AA（可选 AAA）审核 Penpot 设计，并生成结构化严重性报告：颜色对比度、触摸/目标尺寸、文本替代、标题层级和键盘/焦点顺序。提出修复建议——不会自动应用。还充当 brief-to-screen 循环中的 Evaluator。触发词：'check accessibility'、'accessibility audit'、'WCAG check'、'contrast audit'、'a11y review'、'check color contrast'、'is this accessible'。
- 排名 28查看 Agent Skill直接匹配
antfu-design
精选antfu 风格设计约定，范围更广。以 UnoCSS 优先，基于类的语义 token，为工具和 devtools UI 提供明暗双主题，并为落地页和产品界面提供设计解读、反粗制滥造和微交互打磨。在使用 UnoCSS 构建或重构任何界面时使用。
- 排名 29查看 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 而非硬编码值，逐板块增量组装屏幕。
- 排名 30查看 Agent Skill可能匹配
figma-implement-design
官方将 Figma 设计转化为生产级应用代码，实现 1:1 视觉还原。适用于根据 Figma 文件实现 UI 代码、用户提到“实现设计”“生成代码”“实现组件”、提供 Figma URL，或要求构建与 Figma 规格匹配的组件时。若要通过 `use_figma` 写入 Figma 画布，请使用 `figma-use`。
声明的前提（自述）: Node.js
- 排名 31查看 Agent Skill可能匹配
figma-create-design-system-rules
官方为用户代码库生成自定义设计系统规则。当用户说“创建设计系统规则”“为我的项目生成规则”“设置设计规则”“自定义设计系统指南”，或希望为 Figma 转代码工作流建立项目专属约定时使用。需要 Figma MCP 服务器连接。
声明的前提（自述）: MCP server
- 排名 32查看 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'。
- 排名 33查看 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'。
- 排名 34查看 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'。
- 排名 35查看 Agent Skill可能匹配
brand-guidelines
官方将 Anthropic 官方品牌配色和字体应用于任何可能受益于 Anthropic 外观风格的产物。当适用品牌配色或风格指南、视觉格式或公司设计标准时使用。
- 排名 36查看 Agent Skill可能匹配
theme-factory
官方用主题为制品设置样式的工具包。这些制品可以是幻灯片、文档、报告、HTML 落地页等。有 10 个预设主题（含颜色/字体），可应用于任何已创建的制品，也可即时生成新主题。
- 排名 37查看 Agent Skill可能匹配
web-artifacts-builder
官方一套工具，用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂、多组件的 claude.ai HTML artifacts。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts——不适用于简单的单文件 HTML/JSX artifacts。
106,698 · 受欢迎程度 - 排名 38查看 Agent Skill可能匹配
web-component-design
精通 React、Vue 和 Svelte 组件模式，包括 CSS-in-JS、组合策略和可复用组件架构。适用于构建 UI 组件库、设计组件 API 或实现前端设计系统时。
12,687 · 受欢迎程度 - 排名 39查看 Agent Skill可能匹配
design
统一设计 skill，涵盖品牌识别、设计 token、UI 样式、logo 生成、CIP 样机、演示文稿、横幅、图标和社交图片。
34,174 · 受欢迎程度 - 排名 40查看 Agent Skill可能匹配
extract-design-system
从公开网站提取设计基元（颜色、字体、间距、圆角、阴影），并为项目的设计系统生成起始 token 文件。
129,921 · 受欢迎程度 - 排名 41查看 Agent Skill可能匹配
onboarding
入门与激活 CRO Skill，涵盖首次运行体验、空状态、检查清单以及注册后用户流程的 time-to-value 优化。
65,786 · 受欢迎程度 - 排名 42查看 Agent Skill可能匹配
cro-methodology
审查网站和落地页的转化问题，并设计基于证据的 A/B 测试，涵盖漏斗映射、说服资产和异议处理。
5,526 · 受欢迎程度 - 排名 43查看 Agent Skill可能匹配
performance
以证据为导向的 Web 性能优化技能，涵盖 Core Web Vitals、关键渲染路径、资源加载和性能预算，并包含测量工作流。
38,617 · 受欢迎程度 - 排名 44查看 Agent Skill可能匹配
lark-apps
精选妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。
659,164 · 受欢迎程度 - 排名 45查看 Agent Skill可能匹配
animation-vocabulary
反向查询术语表，将 Web 动效的模糊描述映射到精确的动画术语，用于命名效果，而非设计或构建效果。
194,627 · 受欢迎程度 - 排名 46查看 Agent Skill可能匹配
firecrawl-workflows
以成果为导向的 Firecrawl 工作流，产出结构化网络数据产物，包括研究报告、SEO 审计、QA 报告和网站设计系统。
32,186 · 受欢迎程度 - 排名 47查看 Agent Skill可能匹配
ui-taste
用于构建、重新设计、评审和打磨 Web 与 iOS 界面的反 UI 粗制滥造实战手册，涵盖布局、层级和细节工作流，并可选配真实产品参考。
452,376 · 受欢迎程度
这个话题涵盖什么
每个子主题对应一类具体场景下的 Agent Skills。
- Information architecture
- The map of pages and how they connect.
- User experience
- Whether a visitor can complete the job they came for.
- Visual design
- How the site looks as a coherent surface.
- Responsive layout
- Layouts that reflow instead of breaking on small screens.
- Accessibility
- Operable with assistive technology, not only a mouse.
- Content design
- Words and media designed for the page, not dumped into it.
- Interaction design
- States, motion, and feedback when the user acts.
常见问题
- 这个列表是如何排序的？
- 它按观察到的搜索需求排序，与主题直接匹配的排在前面。对任何单一发布者设置上限，可避免一个来源占满页面。
- 我应该从哪个子主题开始？
- 从你能说清的问题入手：页面结构不清指向信息架构，小屏布局错乱指向响应式布局，依此类推。上面的子主题直接对应这些问题。
- 一个 Skill 能覆盖其中多个领域吗？
- 该主题可分解为结构、体验、视觉、响应性和可访问性，再加上其上的内容和交互。一个 Skill 可能涉及多个领域，所以要对照你需要的具体领域检查其描述。
- 这些技能会取代设计决策吗？
- 不。它们作用于这里列出的领域——架构、UX、视觉设计、响应式布局、无障碍、内容设计和交互设计。网站需要做什么仍然由你决定。
如何安装 Agent Skill
从本页第一条开始。Claude Code 会读取放进 skills 目录的 SKILL.md：
- Claude Code——把 impeccable 的 SKILL.md 复制到 ~/.claude/skills/impeccable/（个人使用），或 .claude/skills/impeccable/（随项目共享）。
- 从 registry 安装——运行 npx skills add pbakaus/impeccable@impeccable。
- 或者从 impeccable 的来源下载 SKILL.md，放进上面的目录。
如何挑选 安装前先看出处和技能自身的说明。Official 与 Notable 标签描述的是技能来源。