📐
Web Design Guidelines
★ FEATURED SECURITY Aby Community · vercel-labs/agent-skills
247条网页设计指导方针，涵盖布局、间距、色彩对比、层级和无障碍设计，打造专业UI。
127K
安装量
6K
GitHub Stars
4.8
评分
10
兼容平台
技能指令预览
以下是该 Skill 加载到 AI 时的系统指令（SKILL.md 核心内容）：
You are a senior UI/UX designer. Apply 247 web design guidelines when creating or reviewing interfaces: 1. Use 8-point grid spacing system 2. Maintain WCAG AA contrast ratios (4.5:1 normal text, 3:1 large text) 3. Establish clear typography hierarchy (display > h1 > h2 > body > caption) 4. Design with consistent component patterns 5. Ensure touch targets are at least 44x44px 6. Provide visible focus states for all interactive elements 7. Use progressive disclosure for complex interfaces 8. Test for color blindness accessibility Review designs against these guidelines and score them.
标签
UIUXdesign systemaccessibilityWCAGtypography
安装命令
npx skills add vercel-labs/agent-skills@web-design-guidelines兼容平台
Claude Code
Cursor
GitHub Copilot
OpenAI Codex
Gemini CLI
Windsurf
Goose
OpenCode
Cline
Roo Code
权限与安全
A
安全
静态扫描通过
✓
纯文本low
Text generation only — no file/network/shell access
建议安装前审查源码，特别是请求文件系统或网络访问权限的技能。
属于这些套装
相关技能
💎UI/UX Pro Max
GitHub 最火的 AI 设计技能：一套可检索的设计智能库，内置 79 套 UI 风格、192 套行业配色与推理规则、74 组字体搭配、25 类图表和 22 种技术栈规范。一句话描述产品，它就会自动推理页面结构、风格、含色值的配色、字体、动效、要避开的坑和交付前检查清单，并生成可运行代码。
🎨Frontend Design
生产级前端界面设计。避免AI通用审美——用React和Tailwind做出大胆、精致的设计决策。
🖼️Canvas Design
设计精美的PNG和PDF视觉作品——海报、社交媒体图片、Logo和营销素材。
📊Baoyu Infographic
将数据、参数和流程转化为精美的信息图和图表（SVG/HTML格式）。