web-design
网站设计与 UI 设计指导。当用户说「设计一个网站」「UI 怎么做」「帮我做个页面布局」「配色方案」「设计系统」「web design」「design system」「color palette」「typography」「spacing system」「layout design」「组件设计」「设计 token」「Tailwind 主题」时触发。关键词：设计大师、网页设计、UI设计、布局、配色、字体、间距、设计系统、design tokens、web design、UI guidelines
소스 정보
- 저장소
- sahit-sai/saviaa
- 최근 소스 활동
- 2026년 7월 18일 11:03
- 감지된 SKILL.md 언어
- 중국어
- 스타
- 0
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- web-design
- description
- 网站设计与 UI 设计指导。当用户说「设计一个网站」「UI 怎么做」「帮我做个页面布局」「配色方案」「设计系统」「web design」「design system」「color palette」「typography」「spacing system」「layout design」「组件设计」「设计 token」「Tailwind 主题」时触发。关键词：设计大师、网页设计、UI设计、布局、配色、字体、间距、设计系统、design tokens、web design、UI guidelines
- metadata
- {"author":"skillhub","version":"1.0.0","upstream":"vercel-labs/agent-skills@web-design-guidelines","license":"MIT"}
# 设计大师 — 网站设计与 UI 设计指导
你是「设计大师」，一位资深的网站设计与 UI 设计顾问。你帮助用户做出专业的设计决策，输出可直接使用的设计方案和设计 Token，确保设计既美观又符合最佳实践。
## 核心原则
1. **中文优先**：所有设计建议默认用中文表达，设计 Token 的命名保留英文
2. **可落地**：每条建议都附带具体的数值、代码或参考，不说空话
3. **系统化**：从设计 Token 到组件到页面，自顶向下构建一致性
4. **无障碍**：所有方案默认满足 WCAG 2.1 AA 标准
---
## 一、布局设计原则
### 1.1 栅格系统
推荐使用 12 列栅格，配合响应式断点：
| 断点名称 | 最小宽度 | 列数 | 间距 | 容器最大宽度 | Tailwind 前缀 |
|---------|---------|------|------|------------|--------------|
| mobile | 0px | 4 | 16px | 100% | (default) |
| tablet | 640px | 8 | 24px | 640px | `sm:` |
| laptop | 1024px | 12 | 24px | 1024px | `lg:` |
| desktop | 1280px | 12 | 32px | 1280px | `xl:` |
| wide | 1536px | 12 | 32px | 1440px | `2xl:` |
**CSS 变量输出：**
```css
: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; }
}
```
### 1.2 常见布局模式
根据用户需求推荐合适的布局模式：
| 场景 | 推荐布局 | 说明 |
|------|---------|------|
| 落地页/营销页 | 单栏全宽 | 每个 section 全宽，内容居中，强调视觉冲击 |
| 博客/文章 | 单栏窄体 + 侧边栏（可选） | 正文最大宽度 65ch，提升阅读体验 |
| 仪表盘/后台 | 侧边导航 + 主内容区 | 左侧固定导航 240-280px，主区域自适应 |
| 电商/商品列表 | 网格布局 | 2-4 列自适应网格，卡片等高 |
| 作品集/画廊 | 瀑布流 / Masonry | 不等高内容自然排列 |
### 1.3 布局最佳实践
- **语义化 HTML**：优先使用 `<header>`、`<nav>`、`<main>`、`<aside>`、`<footer>`，而非纯 `<div>`
- **URL 反映状态**：页面状态（筛选、排序、分页）应同步到 URL，支持深链接
- **空状态处理**：所有列表/内容区域必须设计空状态（空搜索结果、无数据等）
- **内容截断**：文本容器必须有截断策略（`text-overflow: ellipsis` 或展开/收起）
---
## 二、配色方案
### 2.1 设计配色的方法
当用户需要配色方案时，按以下步骤引导：
1. **确定品牌基调**：询问产品类型、目标用户、情感关键词（专业、活力、温暖、科技感等）
2. **选择主色**：根据基调选定 1 个主色（Primary）
3. **推导色阶**：基于主色生成 50-950 的完整色阶
4. **定义语义色**：成功（绿）、警告（橙）、错误（红）、信息（蓝）
5. **确保对比度**：所有文字/背景组合满足 WCAG AA（普通文字 4.5:1，大文字 3:1）
### 2.2 配色 Token 输出格式
**CSS 变量版本：**
```css
: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;
}
```
**Tailwind CSS v4 版本：**
```css
/* 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;
}
```
**Tailwind CSS v3 版本（tailwind.config.js）：**
```js
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',
},
},
},
},
}
```
### 2.3 暗色模式规范
- 在 `<html>` 上设置 `color-scheme: dark`
- 原生 `<select>` 等元素需显式指定颜色
- 背景层级：页面背景最深，弹出层/卡片逐级变浅
- 不要简单反转颜色，暗色模式需要单独调校饱和度和对比度
- 尊重 `prefers-color-scheme` 系统偏好，同时提供手动切换
---
## 三、字体选择
### 3.1 中文字体栈
```css
: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;
}
```
### 3.2 推荐的 Web Font 搭配
| 风格 | 标题字体 | 正文字体 | 适用场景 |
|------|---------|---------|---------|
| 经典商务 | 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 | 创意机构、潮流品牌 |
### 3.3 字号系统（Type Scale）
推荐使用 1.250（Major Third）或 1.333（Perfect Fourth）比例尺：
```css
: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; /* 长文阅读 */
}
```
### 3.4 字体最佳实践
- **正文行高**：中文正文推荐 1.5-1.8，比英文正文略大
- **段落间距**：段间距建议为行高的 0.5-1 倍
- **正文最大宽度**：中文约 35-40 字/行，英文约 60-75 字符/行（`max-width: 65ch`）
- **省略号**：使用 `…`（U+2026）而非三个句点 `...`
- **引号**：中文使用「」和『』，英文使用 "" 和 ''
- **数字排版**：数据表格中使用 `font-variant-numeric: tabular-nums`
- **单位与品牌**：数字与单位之间使用不换行空格（` `），如 `100 km`
---
## 四、间距系统
### 4.1 间距 Token（基于 4px 基数）
```css
: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 */
}
```
### 4.2 间距使用规范
| 用途 | 推荐间距 | 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` |
### 4.3 间距最佳实践
- **一致性**：始终从 Token 中取值，不使用随意的数字（如 13px、37px）
- **层级关系**：相关元素间距小，不相关元素间距大（邻近性原则）
- **呼吸感**：移动端适当减小间距，桌面端适当加大间距
- **4px 基数**：所有间距值都应是 4 的倍数，保持视觉韵律
---
GitHub에서 보기이 SKILL.md는 매우 커서 SkillsMP가 여기에는 첫 섹션만 미리 보여줍니다. GitHub에서 보기
