#视觉质量

avatar
meng shao
3小时前
推荐 Top10：面向 前端 / 产品 / UI 的 Agent Skills 这 10 个 Skills 考虑到设计落地频率、对视觉/交互质量的直接提升、在 Codex/Claude Code 等的高复用性。 1. frontend-skill 来自 OpenAI，适合做 landing page、品牌页、demo 页。强项是视觉论点、内容节奏、首屏质量。 2. frontend-design 来自 Anthropic，更偏“高完成度、强风格”的前端设计实现。适合你想把页面做得更有辨识度时用。 3. figma-implement-design 来自 OpenAI，设计稿到代码的核心 skill。凡是产品/设计/前端协作，这个都应该是常用项。 4. web-design-guidelines 来自 Vercel，做 UI 审查非常强。可访问性、表单、动效、排版、交互细节，都能系统性补漏。 5. react-best-practices 来自 Vercel，如果你做 React / Next.js，这个基本必装。它提升的是“实现质量”和“性能质量”。 6. playwright 来自 OpenAI，前端不是只写代码，还要验证真实浏览器行为。这个是 UI 流程调试和回归检查的通用执行层。 7. webapp-testing 来自 Anthropic，比 playwright 更贴近日常本地应用验证，适合检查页面行为、截图、日志和交互回归。 8. canvas-design 来自 Anthropic，适合更自由的视觉探索、展示型页面、画布式交互或概念设计，不是每个项目都需要，但做创意产品页很有价值。 9. brand-guidelines 来自 Anthropic，如果你在做官网、营销页、设计系统、品牌一致性，这个比单纯“写 UI”更上层，适合产品/品牌协同。 10. vercel-deploy-claimable 来自 Vercel，严格说它不是设计 skill，但对前端/产品工作流非常关键。做完页面立刻可部署预览，反馈闭环会快很多。 - 怎么选？- · 偏品牌官网/营销页：frontend-skill、frontend-design、brand-guidelines · 偏产品 UI/设计稿还原：figma-implement-design、react-best-practices、web-design-guidelines · 偏交互验证/可用性：playwright、webapp-testing · 偏创意探索：canvas-design
#前端开发 #产品设计 #UI设计 #人工智能 #设计工具 #代码复用 #视觉质量