面向前端/产品/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 ⚡

本条情报归属 AITOP「技巧」核心栏目，重点聚焦北美前沿实验室与硅谷科技巨头。在跨区域产业观察坐标中，该动态直接关联「AI 开发者工具链、Coding Agent 与工程化实践」研究主线，反映出当前技术演进与商业落地的最新风向。涉及核心实体与技术议题包括：Agent Skills、Claude Code、Vercel、Figma，读者可通过下方标签进入对应专题页查阅历史脉络与关联对比。

信源核验说明：本文原始线索采编自「shao__meng」（@shao__meng），经 AITOP 多维评分管线结构化提炼。截至目前，全网已有 11 家独立信源对该事件进行交叉印证与跟进报道（含 kimmonismus、Cognition、Perplexity 等），属于近期高关注度行业信号。