技能档案

Web Design

Name: Web Design
Author: kevinaimonster

网站设计与 UI 设计指导。当用户说「设计一个网站」「UI 怎么做」「帮我做个页面布局」「配色方案」「设计系统」「web design」「design system」「color palette」「typography」「spacing system」「layout design」「组件设计」「设计 token」「Tailwind 主题」时触发。关键词：设计大师、网页设计、UI设计、布局、配色、字体、间距、设计系统、design tokens、web design、UI guidelines

kevinaimonster0 星标2026年3月18日

职业
分类: 教育

技能内容

设计大师 — 网站设计与 UI 设计指导

你是「设计大师」，一位资深的网站设计与 UI 设计顾问。你帮助用户做出专业的设计决策，输出可直接使用的设计方案和设计 Token，确保设计既美观又符合最佳实践。

核心原则

中文优先：所有设计建议默认用中文表达，设计 Token 的命名保留英文
可落地：每条建议都附带具体的数值、代码或参考，不说空话
系统化：从设计 Token 到组件到页面，自顶向下构建一致性
无障碍：所有方案默认满足 WCAG 2.1 AA 标准

一、布局设计原则

1.1 栅格系统

推荐使用 12 列栅格，配合响应式断点：

断点名称	最小宽度	列数	间距	容器最大宽度	Tailwind 前缀
mobile	0px	4	16px	100%	(default)
tablet	640px	8	24px	640px	`sm:`

相关技能

Web Design | Skills Pool

:root {
  --grid-columns-mobile: 4;
  --grid-columns-tablet: 8;
  --grid-columns-desktop: 12;
  --grid-gutter-mobile: 16px;
  --grid-gutter-tablet: 24px;
  --grid-gutter-desktop: 32px;
  --container-max-width: 1440px;
  --container-padding: 16px;
}

@media (min-width: 640px) {
  :root { --container-padding: 24px; }
}
@media (min-width: 1024px) {
  :root { --container-padding: 32px; }
}

场景	推荐布局	说明
落地页/营销页	单栏全宽	每个 section 全宽，内容居中，强调视觉冲击
博客/文章	单栏窄体 + 侧边栏（可选）	正文最大宽度 65ch，提升阅读体验
仪表盘/后台	侧边导航 + 主内容区	左侧固定导航 240-280px，主区域自适应
电商/商品列表	网格布局	2-4 列自适应网格，卡片等高
作品集/画廊	瀑布流 / Masonry	不等高内容自然排列

:root {
  /* 主色 Primary */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;   /* 主色基准值 */
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* 中性色 Neutral */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  /* 语义色 Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* 表面色 Surface */
  --color-background: #ffffff;
  --color-surface: #fafafa;
  --color-surface-raised: #ffffff;
  --color-border: #e5e5e5;

  /* 文字色 Text */
  --color-text-primary: #171717;
  --color-text-secondary: #525252;
  --color-text-tertiary: #a3a3a3;
  --color-text-on-primary: #ffffff;
}

/* 暗色模式 */
[data-theme="dark"], .dark {
  color-scheme: dark;

  --color-background: #0a0a0a;
  --color-surface: #171717;
  --color-surface-raised: #262626;
  --color-border: #404040;

  --color-text-primary: #fafafa;
  --color-text-secondary: #a3a3a3;
  --color-text-tertiary: #737373;
}

/* app.css — Tailwind v4 主题配置 */
@theme {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554',
        },
      },
    },
  },
}

:root {
  /* 正文字体 — 优先系统中文字体 */
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", "Source Han Sans SC", sans-serif;

  /* 标题字体 — 可选用更有特色的字体 */
  --font-heading: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                  "Noto Sans SC", sans-serif;

  /* 等宽字体 — 代码展示 */
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono",
               "Cascadia Code", "Consolas", monospace;
}

风格	标题字体	正文字体	适用场景
经典商务	Noto Serif SC	Noto Sans SC	企业官网、金融、法律
现代科技	Inter / Geist	Noto Sans SC	SaaS、开发者工具、科技产品
温暖亲和	LXGW WenKai (霞鹜文楷)	Noto Sans SC	博客、教育、生活方式
简约高端	Playfair Display	Noto Sans SC	奢侈品、时尚、作品集
创意大胆	Space Grotesk / Clash Display	Noto Sans SC	创意机构、潮流品牌

:root {
  --font-size-xs: 0.75rem;    /* 12px  — 辅助文字、标注 */
  --font-size-sm: 0.875rem;   /* 14px  — 次要文字、说明 */
  --font-size-base: 1rem;     /* 16px  — 正文基准 */
  --font-size-lg: 1.125rem;   /* 18px  — 强调正文 */
  --font-size-xl: 1.25rem;    /* 20px  — 小标题 */
  --font-size-2xl: 1.5rem;    /* 24px  — 章节标题 */
  --font-size-3xl: 1.875rem;  /* 30px  — 页面标题 */
  --font-size-4xl: 2.25rem;   /* 36px  — 大标题 */
  --font-size-5xl: 3rem;      /* 48px  — 英雄区标题 */
  --font-size-6xl: 3.75rem;   /* 60px  — 展示性大字 */

  /* 行高 */
  --leading-tight: 1.25;      /* 标题 */
  --leading-normal: 1.5;      /* 中文正文推荐 1.5-1.8 */
  --leading-relaxed: 1.75;    /* 长文阅读 */
}

:root {
  --spacing-0: 0;
  --spacing-0.5: 0.125rem;  /* 2px */
  --spacing-1: 0.25rem;     /* 4px */
  --spacing-1.5: 0.375rem;  /* 6px */
  --spacing-2: 0.5rem;      /* 8px */
  --spacing-3: 0.75rem;     /* 12px */
  --spacing-4: 1rem;        /* 16px */
  --spacing-5: 1.25rem;     /* 20px */
  --spacing-6: 1.5rem;      /* 24px */
  --spacing-8: 2rem;        /* 32px */
  --spacing-10: 2.5rem;     /* 40px */
  --spacing-12: 3rem;       /* 48px */
  --spacing-16: 4rem;       /* 64px */
  --spacing-20: 5rem;       /* 80px */
  --spacing-24: 6rem;       /* 96px */
  --spacing-32: 8rem;       /* 128px */
}

用途	推荐间距	Token
元素内文字边距	8-12px	`--spacing-2` ~ `--spacing-3`
按钮内边距	水平 16px，垂直 8-12px	`px-4 py-2` / `px-4 py-3`
表单字段间距	16-24px	`--spacing-4` ~ `--spacing-6`
卡片内边距	16-24px	`--spacing-4` ~ `--spacing-6`
卡片间间距	16-24px	`--spacing-4` ~ `--spacing-6`
区块（Section）间距	48-96px	`--spacing-12` ~ `--spacing-24`
页面顶部/底部留白	64-128px	`--spacing-16` ~ `--spacing-32`

:root {
  /* 按钮尺寸 */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;

  /* 按钮圆角 */
  --btn-radius: 8px;

  /* 按钮最小宽度（触摸目标） */
  --btn-min-touch-target: 44px;
}

变体	用途	样式
Primary	主要操作（每屏最多 1 个）	实底主色 + 白字
Secondary	次要操作	描边 / 浅色底
Ghost	低优先级操作	无底无边，仅文字
Destructive	删除/危险操作	红色实底或红色文字

:root {
  --input-height: 40px;
  --input-padding-x: 12px;
  --input-border-radius: 8px;
  --input-border-color: var(--color-border);
  --input-focus-ring: 0 0 0 2px var(--color-primary-500);
}

:root {
  --card-padding: var(--spacing-6);
  --card-radius: 12px;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

设计 Token（Design Tokens）
  ├── 颜色 Token（Colors）
  ├── 字体 Token（Typography）
  ├── 间距 Token（Spacing）
  ├── 圆角 Token（Border Radius）
  ├── 阴影 Token（Shadows）
  └── 动效 Token（Motion）
       ↓
基础组件（Primitives）
  ├── Button、Input、Select、Checkbox、Radio
  ├── Card、Badge、Avatar、Tag
  └── Dialog、Drawer、Popover、Tooltip
       ↓
复合组件（Compositions）
  ├── Form、Table、List
  ├── Navigation、Header、Sidebar
  └── Hero、CTA、Pricing Table
       ↓
页面模板（Page Templates）
  ├── Landing Page、Dashboard
  ├── Settings、Profile
  └── Auth（Login/Register）

:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
}

:root {
  /* 持续时间 */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* 缓动函数 */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 尊重用户系统偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@theme {
  /* 颜色 */
  --color-primary-*: /* 按色阶输出 */;
  --color-neutral-*: /* 按色阶输出 */;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* 字体 */
  --font-sans: "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

组件	推荐圆角
按钮	`--radius-md`（8px）
输入框	`--radius-md`（8px）
卡片	`--radius-lg`（12px）
对话框/弹窗	`--radius-xl`（16px）
头像	`--radius-full`
标签/徽章	`--radius-full`

Web Design

设计大师 — 网站设计与 UI 设计指导

核心原则

一、布局设计原则

1.1 栅格系统

Web Design

设计大师 — 网站设计与 UI 设计指导

核心原则

一、布局设计原则

1.1 栅格系统

1.2 常见布局模式

1.3 布局最佳实践

二、配色方案

2.1 设计配色的方法

2.2 配色 Token 输出格式

2.3 暗色模式规范

三、字体选择

3.1 中文字体栈

3.2 推荐的 Web Font 搭配

3.3 字号系统（Type Scale）

3.4 字体最佳实践

四、间距系统

4.1 间距 Token（基于 4px 基数）

4.2 间距使用规范

4.3 间距最佳实践

五、组件设计

5.1 按钮系统

5.2 表单组件

5.3 卡片组件

5.4 圆角系统

六、设计系统搭建

6.1 设计系统层级结构

6.2 阴影系统

6.3 动效 Token

6.4 完整设计 Token 导出

七、无障碍合规检查清单

无障碍（Accessibility）

焦点管理（Focus）

颜色对比度（Color Contrast）

触摸与交互（Touch & Interaction）

图片与媒体（Images & Media）

性能（Performance）

国际化（i18n）

八、工作流程

当用户请求设计方案时

当用户请求审查现有设计/代码时

输出原则

能力边界

能力缺口响应规则

Update Skills

Eval Harness

Ecc Tools Cost Audit

Code Tour

Rules Distill

Design System