今天，我整理了这份包含 10 个前端开发必备 AI Skills 的合集。这不仅是工具列表，更是我为大家梳理的一套从视觉构建到最终部署的高效工作流。
1. frontend-skill
简介：来自 OpenAI 的前端构建技能，专注于高视觉冲击力的页面开发。
功能特色/特点：非常适合用于构建 Landing Page（着陆页）、品牌展示页和 Demo 演示页。它的核心强项在于构建强有力的视觉论点、精准把控内容节奏，以及确保首屏的高质量呈现，能瞬间抓住用户眼球。
项目地址/产品地址：https://github.com/openai/skills/tree/main/skills/.curated/frontend-skill
2. frontend-design
简介：Anthropic 推出的高完成度前端设计技能。
功能特色/特点：与通用型方案不同，它更偏向于“高完成度”和“强风格”的前端设计实现。当你不满足于平庸的页面，而是希望把网页做得更有辨识度、更具设计感时，这个工具是理想选择。
项目地址/产品地址：https://github.com/anthropics/skills/tree/main/skills/frontend-design
3. figma-implement-design
简介：OpenAI 提供的核心技能，致力于实现从设计稿到代码的自动转化。
功能特色/特点：凡是涉及产品经理、UI 设计师和前端工程师协作的场景，这都应该是首选技能。它能很好地理解设计意图，将 Figma 中的设计稿转化为可运行代码，是设计落地的关键一环。
项目地址/产品地址：https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design
4. web-design-guidelines
简介：Vercel 出品，专注于 Web 设计规范的审查与优化。
功能特色/特点：在 UI 审查方面表现极其强悍。它能系统性地查漏补缺，涵盖可访问性标准、表单交互、动效实现、排版细节以及整体交互体验，确保你的产品符合专业的设计规范。
项目地址/产品地址：https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines
5. react-best-practices
简介：Vercel 针对 React 生态系统定制的最佳实践技能。
功能特色/特点：如果你的技术栈是 React 或 Next.js，这个技能几乎是必装的。它不关注“能不能做”，而是专注于提升代码的“实现质量”与“性能质量”，帮助开发者写出更优雅、更高效的代码。
项目地址/产品地址：https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices
6. playwright
简介：OpenAI 适配的端到端测试技能。
功能特色/特点：前端开发不仅仅涉及写代码，还需要验证在真实浏览器环境下的行为。该技能是 UI 流程调试和回归检查的通用执行层，确保功能在多浏览器中的一致性。
项目地址/产品地址：https://github.com/openai/skills/tree/main/skills/.curated/playwright
7. webapp-testing
简介：Anthropic 推出的 Web 应用测试技能。
功能特色/特点：相比 Playwright，它更贴近日常的本地应用验证。非常适合快速检查页面行为、生成截图、分析日志以及进行交互回归测试，是本地开发阶段的好帮手。
项目地址/产品地址：https://github.com/anthropics/skills/tree/main/skills/webapp-testing
8. canvas-design
简介：Anthropic 提供的创意设计与画布交互技能。
功能特色/特点：适合进行更自由的视觉探索、打造展示型页面，或者实现画布式交互及概念设计。虽然不是每个项目都需要，但在构建创意产品页或需要突破常规布局时极具价值。
项目地址/产品地址：https://github.com/anthropics/skills/tree/main/skills/canvas-design
9. brand-guidelines
简介：Anthropic 出品，专注于品牌规范与一致性维护。
功能特色/特点：适用于官网建设、营销页面制作、设计系统搭建等场景。它比单纯的“写 UI”更宏观，能确保品牌调性在各个页面中保持统一，非常适合产品与品牌协同工作。
项目地址/产品地址：https://github.com/anthropics/skills/tree/main/skills/brand-guidelines
10. vercel-deploy-claimable
简介：Vercel 提供的自动化部署技能。
功能特色/特点：严格来说它不属于设计类技能，但对前端和产品的工作流至关重要。它能实现页面完成后立即部署预览，极大地加快了反馈闭环，让产品迭代和验证变得更加敏捷。
项目地址/产品地址：https://github.com/vercel-labs/agent-skills/tree/main/skills/vercel-deploy-claimable
怎么选？
为了让大家更精准地使用这些工具，我根据不同的业务场景做了简单的分类建议：
偏品牌官网/营销页：推荐组合使用 frontend-skill（视觉冲击）、frontend-design（风格强化）、brand-guidelines（品牌一致性）。
偏产品 UI/设计稿还原：重点使用 figma-implement-design（设计转码）、react-best-practices（代码质量）、web-design-guidelines（规范审查）。
偏交互验证/可用性：首选 playwright（跨浏览器测试）、webapp-testing（本地行为验证）。
偏创意探索：尝试使用 canvas-design，释放更多的视觉可能性。
总结