web-design-guidelines

与 frontend-design（强调题材辨识度与美学风险）互补：web-design-guidelines 更偏「基础质检」——布局层次、可读性、间距与常见 Web UI 质量底线。适合落地页与产品 UI 在视觉方向已定或只需稳健可用性时，让 Agent 按清单自检，而不是自由发挥风格。安装量来自 skills.sh 公开排行榜；细则以仓库内 Skill 文件为准。

Vercel Labs agent-skills 中的 web-design-guidelines：给 Agent 一套可执行的 Web 设计检查清单式指引。

• 营销站与文档站 UI
• 设计走查前的 Agent 自检
• 与 frontend-design 搭配使用
• 需要稳健可用性底线而非大胆风格实验

• 需要强烈品牌个性与题材叙事时（优先 frontend-design）。
• 无界面的 API / 基础设施任务。

1. 安装本 Skill 到项目或用户 Skill 目录。
2. 在 UI 走查 / 落地页质检任务中提及 web-design-guidelines。
3. 让 Agent 按 Skill 清单检查层次、对比度、间距与移动端可读性。
4. 若同时需要「有辨识度的视觉方向」，再叠加 frontend-design。

• Cursor
• Claude Code
• Codex
• GitHub Copilot
• Windsurf
• Gemini CLI
• 其他兼容 skills CLI 的 Agent

以 skills.sh「Available for these agents」所示生态为准；具体宿主是否已接入以各客户端文档为准。

作者 vercel-labs ↗ · skills.sh vercel-labs/agent-skills/web-design-guidelines ↗

• 同属 vercel-labs/agent-skills 仓库；与 react-best-practices 并列的设计向 Skill。
• 定位：可执行检查清单，偏质量底线。

• frontend-design
• vercel-react-best-practices

• skills.sh ↗
• vercel-labs/agent-skills ↗