面向前端/产品/UI 的 10 个 Agent Skills 更新版推荐

关键变化包括：OpenAI 的 frontend-skill 已于 4 月下架，Anthropic 的 frontend-design 成为视觉方向最稳选择；Figma 官方的 figma-design-to-code 接替 figma-implement-design，会复用 Code Connect 组件；Vercel 的 react-best-practices 规则扩充到 70 条并改名 vercel-react-best-practices。

清单按场景分组：品牌页用 frontend-design 和 design-taste-frontend，产品 UI 用 figma-design-to-code、shadcn、composition-patterns，体验审查用 web-design-guidelines 和 webapp-testing，动效细节用 emil-design-eng。OpenAI 的 playwright skill 已进废弃仓库，本地验证改推荐 Anthropic 的 webapp-testing。

推荐 Top10：面向 前端 / 产品 / UI 的 Agent Skills（2026.11 更新版） 5 月份分享的这份 Top10 Agent Skills，有 1.3k 收藏，最近还有朋友在收藏关注，因为已经是半年前分享的，我再更新一版，避免有失效或不是最优的版本。 1. frontend-design 来自 Anthropic，更偏「高完成度、强风格」的前端设计实现。OpenAI 的 frontend-skill 在 4 月下架后，它是各家工具里最稳的视觉方向 skill，适合想把页面做得更有辨识度时用。 github.com/anthropics/ski… 2. design-taste-frontend 来自 Taste Skill（leonxlnx），补上 frontend-skill 留下的品牌站、落地页位置。强项是不做模板味的页面，多用真实照片和产品界面，并用浏览器检查来卡住完成度。 github.com/leonxlnx/taste… 3. figma-design-to-code 来自 Figma 官方，接替原来的 figma-implement-design。设计稿转代码优先用这个：它会先拿到设计上下文和截图，并复用 Code Connect 里的组件。 github.com/figma/mcp-serv… 4. web-design-guidelines 来自 Vercel，做 UI 审查依然很强。可访问性、表单、动效、排版、交互细节，都能对照最新的 Web Interface Guidelines 系统地补漏。 github.com/vercel-labs/ag… 5. react-best-practices 来自 Vercel，做 React / Next.js 基本必装。规则已经扩充到 70 条，官方名称改成了 vercel-react-best-practices，提升的是实现质量和性能。 github.com/vercel-labs/ag… 6. shadcn 来自 shadcn/ui 官方。它会读取项目里的 components.json，按你现有的组件、主题和 CLI 来拼界面，适合产品 UI 和设计系统落地。 github.com/shadcn-ui/ui/t… 7. emil-design-eng 来自 Emil Kowalski，专攻交互和动效的手感：按压、悬停、时机和过渡。同一仓库里的 review-animations 适合做完以后再审一轮。 github.com/emilkowalski/s… 8. composition-patterns 来自 Vercel，官方名称是 vercel-composition-patterns。适合做组件库和复杂的产品 UI：用复合组件和状态上提来减少布尔 props，让结构更容易接着改。 github.com/vercel-labs/ag… 9. webapp-testing 来自 Anthropic，依然适合日常的本地应用验证：检查页面行为、截图、日志和交互回归。OpenAI 的 playwright skill 已经进了废弃仓库，这个更贴近现在的用法。 github.com/anthropics/ski… 10. deploy-to-vercel 来自 Vercel，由原来的 vercel-deploy-claimable 改名而来。做完页面马上能拿到预览链接；现在优先走 git 关联部署，不行再退回 CLI 或可认领的临时部署。 github.com/vercel-labs/ag… 怎么选 ？ · 偏品牌官网/营销页：frontend-design、design-taste-frontend · 偏产品 UI/设计稿还原：figma-design-to-code、shadcn、react-best-practices、composition-patterns · 偏体验审查/可用性：web-design-guidelines、webapp-testing · 偏交互细节/动效：emil-design-eng · 偏预览闭环：deploy-to-vercel meng shao @shao__meng 推荐 Top10：面向 前端 / 产品 / UI 的 Agent Skills 这 10 个 Skills 考虑到设计落地频率、对视觉/交互质量的直接提升、在 Codex/Claude Code 等的高复用性。 1. frontend-skill 来自 OpenAI，适合做 landing page、品牌页、demo 页。强项是视觉论点、内容节奏、首屏质量。 github.com/openai/skills/… 2. frontend-design 来自 Anthropic，更偏“高完成度、强风格”的前端设计实现。适合你想把页面做得更有辨识度时用。 github.com/anthropics/ski… 3. figma-implement-design 来自 OpenAI，设计稿到代码的核心 skill。凡是产品/设计/前端协作，这个都应该是常用项。 github.com/openai/skills/… 4. web-design-guidelines 来自 Vercel，做 UI 审查非常强。可访问性、表单、动效、排版、交互细节，都能系统性补漏。 github.com/vercel-labs/ag… 5. react-best-practices 来自 Vercel，如果你做 React / Next.js，这个基本必装。它提升的是“实现质量”和“性能质量”。 github.com/vercel-labs/ag… 6. playwright 来自 OpenAI，前端不是只写代码，还要验证真实浏览器行为。这个是 UI 流程调试和回归检查的通用执行层。 github.com/openai/skills/… 7. webapp-testing 来自 Anthropic，比 playwright 更贴近日常本地应用验证，适合检查页面行为、截图、日志和交互回归。 github.com/anthropics/ski… 8. canvas-design 来自 Anthropic，适合更自由的视觉探索、展示型页面、画布式交互或概念设计，不是每个项目都需要，但做创意产品页很有价值。 github.com/anthropics/ski… 9. brand-guidelines 来自 Anthropic，如果你在做官网、营销页、设计系统、品牌一致性，这个比单纯“写 UI”更上层，适合产品/品牌协同。 github.com/anthropics/ski… 10. vercel-deploy-claimable 来自 Vercel，严格说它不是设计 skill，但对前端/产品工作流非常关键。做完页面立刻可部署预览，反馈闭环会快很多。 github.com/vercel-labs/ag… - 怎么选？- · 偏品牌官网/营销页：frontend-skill、frontend-design、brand-guidelines · 偏产品 UI/设计稿还原：figma-implement-design、react-best-practices、web-design-guidelines · 偏交互验证/可用性：playwright、webapp-testing · 偏创意探索：canvas-design 🔗 View Quoted Tweet📊 4 ⚡

This report is categorized under AITOP's "How-to" desk, focusing on US frontier AI labs and Silicon Valley technology leaders. Within our cross-regional analytical framework, it directly maps to AI developer toolchains, coding agents, and engineering workflows. Key entities and technical topics under continuous tracking include Agent Skills, Claude Code, Vercel, Figma.

Source attribution: curated from shao__meng (@shao__meng). Cross-source corroboration: 11 independent sources have covered this development (including kimmonismus, Cognition, Perplexity), confirming industry-wide signal strength.