Browse skills/web-design

web-design

Editor's pickdesign

网站设计与 UI 设计指导，642行完整设计系统。覆盖布局设计、配色方案、字体选择、间距系统、组件设计、无障碍合规。

$npx skills add mindverse/skillhub@web-design -g -y

Run in your terminal to install. Works with any AI Agent platform that supports the Claude Skills spec (Claude Code, Cursor, Windsurf, etc).

▸Prerequisites
1) Install Claude Code (claude.ai/code). 2) Install ai-skill: `npx skills add 1-SKILL/ai-skill -g -y`. Run that one first, then come back and run the skill install command above.

What this skill can do

✓ 完整设计Token
✓ 配色方案（Primary→Surface全套）
✓ 中文字体系统
✓ 间距系统（4px基数）
✓ 无障碍检查清单
✓ Tailwind v3/v4 输出

How to use

After installation, just tell your AI assistant:

“设计一个网站”
“给我一套设计系统”
“配色方案怎么选”
“间距规范是什么”
▸View full SKILL.md content259 chars

设计大师 — Web 设计系统

基于 Vercel Labs web-design-guidelines（13.7万安装）增强。

八大模块

  1. 布局设计原则（栅格+响应式断点）
  2. 配色方案（品牌→色阶推导）
  3. 字体选择（中英文搭配推荐）
  4. 间距系统（4px基数，0-128px Token）
  5. 组件设计（按钮/表单/卡片）
  6. 设计系统架构（Token→组件→模板四层）
  7. 无障碍合规检查
  8. 工作流程

输出：CSS变量 / Tailwind v4 / Tailwind v3

View source on GitHub →
Safety score
95/100
S12/12 checks passed

All checks passed — safe to install

Skill info
Lines of code642
SourceEditor's pick
Author技能宝
Repositorymindverse/skillhub
Categorydesign
Upstreamvercel-labs/agent-skills
Trigger words
设计大师网页设计UI设计设计系统配色web designdesign system

Search skills from your terminal

Install ai-skill, then describe what you need inside Claude Code — it auto-matches and installs the right skill without leaving your terminal.

$npx skills add 1-SKILL/ai-skill -g -y

Related skills

Landing PageEditor's pick
S

Landing Page - patterns, best practices and tooling for 转化优化

UI/UX Pro Max Skill
A

An AI Skill that provides design intelligence for building professional UI/UX ac...

Interaction Design Patterns
S

Interaction design pattern library with gesture, voice, and multi-modal input pa...

Framer Motion Animator
S

Framer Motion animation toolkit with spring physics, gesture handling and layout...