这 10 个 Skills 考虑到设计落地频率、对视觉/交互质量的直接提升、在 Codex/Claude Code 等的高复用性。

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

来自 OpenAI，设计稿到代码的核心 skill。凡是产品/设计/前端协作，这个都应该是常用项。 https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design

来自 Vercel，做 UI 审查非常强。可访问性、表单、动效、排版、交互细节，都能系统性补漏。 https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines

来自 Vercel，如果你做 React / Next.js，这个基本必装。它提升的是“实现质量”和“性能质量”。 https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices

来自 OpenAI，前端不是只写代码，还要验证真实浏览器行为。这个是 UI 流程调试和回归检查的通用执行层。 https://github.com/openai/skills/tree/main/skills/.curated/playwright

来自 Anthropic，比 playwright 更贴近日常本地应用验证，适合检查页面行为、截图、日志和交互回归。 https://github.com/anthropics/skills/tree/main/skills/webapp-testing

来自 Anthropic，适合更自由的视觉探索、展示型页面、画布式交互或概念设计，不是每个项目都需要，但做创意产品页很有价值。 https://github.com/anthropics/skills/tree/main/skills/canvas-design

来自 Anthropic，如果你在做官网、营销页、设计系统、品牌一致性，这个比单纯“写 UI”更上层，适合产品/品牌协同。 https://github.com/anthropics/skills/tree/main/skills/brand-guidelines

来自 Vercel，严格说它不是设计 skill，但对前端/产品工作流非常关键。做完页面立刻可部署预览，反馈闭环会快很多。 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