Back to Details

designing-beautiful-websites

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Designing Beautiful Websites

打造美观的网站

Core philosophy: Make the next action obvious. Build from user goals upward. Systemise visuals. Validate early.
核心理念： 让下一步操作清晰可见。从用户目标出发构建设计。视觉设计系统化。尽早验证。

Why this exists

设计的意义

Websites fail when they look “nice” but:
  • don’t match user goals,
  • hide key actions,
  • require too much thinking,
  • or are visually inconsistent.
This skill turns vague requests like “make it look better” into a repeatable workflow that produces:
  • clear structure,
  • usable interactions,
  • and a cohesive visual system.
很多网站看似“美观”，但实则失败，原因在于：
  • 不符合用户目标，
  • 隐藏关键操作，
  • 需用户过多思考，
  • 或视觉设计不一致。
本技能将“让它看起来更好”这类模糊需求转化为可重复的工作流，产出：
  • 清晰的结构，
  • 易用的交互，
  • 以及连贯的视觉系统。

What “done” looks like

交付标准

Deliverables should be usable by builders (engineers, no-code builders, future agents):
  • Design brief: users, goals, constraints, success metrics.
  • IA + flows: sitemap (or nav model), and 1–3 key user journeys.
  • Layout + wireframes: responsive page structure, component inventory.
  • Visual system: tokens (type, spacing, colour, radius, shadow), and usage rules.
  • Component specs: states, behaviour, empty/loading/error.
  • QA notes: accessibility, responsiveness, edge cases.
If time is limited, prioritise: clarity + hierarchy + consistency + accessibility.
交付成果需便于构建者（工程师、无代码搭建者、后续Agent）使用：
  • 设计简报：用户群体、目标、约束条件、成功指标。
  • IA + 流程：站点地图（或导航模型），以及1-3条核心用户路径。
  • 布局 + 线框图：响应式页面结构、组件清单。
  • 视觉系统：设计令牌（字体、间距、颜色、圆角、阴影）及使用规则。
  • 组件规范：状态、交互行为、空状态/加载状态/错误状态。
  • QA说明：无障碍适配、响应式适配、边缘场景处理。
若时间有限，优先保证：清晰度 + 层级结构 + 一致性 + 无障碍适配。

Quick start workflow

快速启动工作流

Copy this checklist into the working notes and tick it off:
  • 0. Inputs: goal, audience, content, constraints, brand signals.
  • 1. Strategy: user goals + business goals + success metrics.
  • 2. Scope: pages/features/content; prioritise “key paths”.
  • 3. Structure: IA + navigation model + flows.
  • 4. Skeleton: wireframes + component inventory + responsive layout.
  • 5. Surface: visual system + page comps + states.
  • 6. Validate: usability pass + accessibility pass + consistency pass.
  • 7. Hand-off: tokens + component specs + implementation notes.
Default rule: do not jump to surface polish until structure and skeleton are believable.
将以下清单复制到工作笔记中，逐项完成：
  • 0. 收集输入信息：目标、受众、内容、约束条件、品牌标识。
  • 1. 策略制定：用户目标 + 业务目标 + 成功指标。
  • 2. 范围定义：页面/功能/内容；优先聚焦“核心路径”。
  • 3. 结构搭建：IA + 导航模型 + 用户流程。
  • 4. 框架构建：线框图 + 组件清单 + 响应式布局。
  • 5. 视觉呈现：视觉系统 + 页面样稿 + 状态设计。
  • 6. 验证优化：可用性测试 + 无障碍适配检查 + 一致性检查。
  • 7. 交付对接：设计令牌 + 组件规范 + 实现说明。
默认规则： 在结构和框架设计合理前，不要急于进行视觉精细化处理。

Non‑negotiables

不可妥协的设计准则

1) Reduce thinking

1) 减少用户思考

Design so users rarely wonder:
  • “Where am I?”
  • “What do I do next?”
  • “Is that clickable?”
  • “Why did they call it that?”
Prefer obvious over clever.
设计需让用户无需频繁疑惑：
  • “我现在在哪里？”
  • “接下来该做什么？”
  • “这个可以点击吗？”
  • “为什么要这么命名？”
优先选择直观易懂而非标新立异。

2) Use conventions aggressively

2) 积极遵循设计惯例

Use familiar patterns unless there is a measured reason to deviate. Unusual UI is a tax on every user interaction.
除非有充分的理由，否则使用用户熟悉的设计模式。 非常规UI会增加每一次用户交互的认知成本。

3) Clear visual hierarchy

3) 清晰的视觉层级

Every screen must answer (at a glance):
  • what this page is,
  • what the primary action is,
  • where the navigation is,
  • what is secondary.
每一个页面都需在第一眼就能回答：
  • 本页面的用途是什么，
  • 核心操作是什么，
  • 导航在哪里，
  • 次要内容是什么。

4) Grouping must be unambiguous

4) 分组需明确无歧义

If spacing is doing grouping work:
  • there must be more space around groups than within groups.
若通过间距实现分组：
  • 组与组之间的间距必须大于组内元素的间距。

5) Feedback and forgiveness

5) 反馈机制与容错设计

Users should:
  • see results of actions quickly,
  • understand system status,
  • and recover via undo/back/cancel where possible.
Prefer preventing errors over scolding users.
用户应能：
  • 快速看到操作结果，
  • 了解系统状态，
  • 在可能的情况下通过撤销/返回/取消操作恢复。
优先预防错误，而非事后提示用户。

6) Accessibility is part of “beautiful”

6) 无障碍适配是“美观”的一部分

Good aesthetics survive:
  • keyboard-only use,
  • low vision,
  • colour‑blindness,
  • small screens,
  • slow networks.
优秀的视觉设计需适配：
  • 纯键盘操作，
  • 低视力用户，
  • 色盲用户，
  • 小屏幕设备，
  • 慢速网络环境。

Default outputs format

默认输出格式

When responding, produce:
  1. Design brief (bullets)
  2. IA + key flows (bullets + simple diagrams if useful)
  3. Component inventory (table or list)
  4. Design tokens (CSS variables or JSON)
  5. Page-level guidance (for each page/section)
  6. States & edge cases
  7. Implementation notes (HTML structure, CSS approach, ARIA, etc.)
If the user asked for a critique/audit, output:
  • issues (grouped by severity),
  • fixes,
  • and a “next iteration plan”.
响应时需产出：
  1. 设计简报（项目符号列表）
  2. IA + 核心流程（项目符号列表，必要时可搭配简单示意图）
  3. 组件清单（表格或列表）
  4. 设计令牌（CSS变量或JSON格式）
  5. 页面级指导（针对每个页面/板块）
  6. 状态与边缘场景
  7. 实现说明（HTML结构、CSS方案、ARIA等）
若用户要求进行评审/审计，输出内容包括：
  • 问题（按严重程度分组），
  • 修复方案，
  • 以及“下一迭代计划”。

The workflow in practice

实际工作流拆解

Step 0 — Gather inputs (fast)

步骤0 — 快速收集输入信息

Ask only what’s needed; otherwise assume and state assumptions.
Minimum questions:
  • Primary user: who is this for?
  • Primary goal: what must they do?
  • Business goal: what does success look like?
  • Content: what is real copy/data?
  • Brand signals: existing colours/logo/type/voice?
  • Constraints: tech stack, deadline, accessibility level.
If inputs are missing, create a working brief with explicit assumptions.
仅询问必要信息；否则做出假设并明确说明。
最低限度需询问的问题：
  • 核心用户：面向哪些用户？
  • 核心目标：用户必须完成什么操作？
  • 业务目标：成功的衡量标准是什么？
  • 内容：真实的文案/数据是什么？
  • 品牌标识：现有颜色/Logo/字体/品牌调性？
  • 约束条件：技术栈、截止日期、无障碍适配等级。
若输入信息缺失，需创建一份包含明确假设的工作简报。

Step 1 — Strategy (align intent)

步骤1 — 策略制定（对齐目标）

Produce:
  • primary + secondary user goals,
  • business objectives,
  • success metrics,
  • constraints/risk.
产出内容：
  • 核心 + 次要用户目标，
  • 业务目标，
  • 成功指标，
  • 约束条件/风险。

Step 2 — Scope (decide what exists)

步骤2 — 范围定义（明确边界）

Define:
  • pages/screens,
  • features,
  • content requirements,
  • and what is out of scope.
Pick 1–3 key paths (the journeys that matter most). Optimise these first.
定义：
  • 页面/屏幕，
  • 功能，
  • 内容要求，
  • 以及不属于本次范围的内容。
选择1-3条核心路径（最重要的用户旅程），优先优化这些路径。

Step 3 — Structure (make it findable)

步骤3 — 结构搭建（提升可发现性）

Create:
  • sitemap / nav model (global + local nav),
  • page purpose statements,
  • user flows for key paths.
Rule: navigation labels should be self‑evident; avoid internal jargon.
创建：
  • 站点地图 / 导航模型（全局 + 局部导航），
  • 页面用途说明，
  • 核心路径的用户流程。
规则：导航标签应直观易懂；避免使用内部术语。

Step 4 — Skeleton (arrange the UI)

步骤4 — 框架构建（排布UI）

Create:
  • wireframes per page,
  • component inventory,
  • layout constraints (container widths, grids, spacing rhythm),
  • and priority order per breakpoint.
Rule: start with the feature/content, not the “app shell”.
创建：
  • 各页面的线框图，
  • 组件清单，
  • 布局约束（容器宽度、网格、间距节奏），
  • 以及各断点的内容优先级顺序。
规则：从功能/内容出发，而非先设计“应用外壳”。

Step 5 — Surface (make it beautiful)

步骤5 — 视觉呈现（打造美观效果）

Build a consistent system:
  • spacing + sizing scale,
  • typography scale,
  • colour palette + shades,
  • radius + border rules,
  • elevation/shadow scale,
  • icon + illustration style,
  • motion rules (optional).
Apply to page comps.
构建一致的视觉系统：
  • 间距 + 尺寸比例，
  • 字体比例，
  • 调色板 + 色调，
  • 圆角 + 边框规则，
  • 层级/阴影比例，
  • 图标 + 插画风格，
  • 动效规则（可选）。
将视觉系统应用到页面样稿中。

Step 6 — Validate (fast loops)

步骤6 — 验证优化（快速迭代）

Run these checks:
  • Glance test (5–10 seconds): can someone tell what this is and what to do?
  • Key‑path walkthrough: can a first‑time user complete the main task?
  • Consistency pass: are tokens respected? is hierarchy consistent?
  • Accessibility pass: contrast, focus states, semantics, error messaging.
执行以下检查：
  • 快速扫视测试（5-10秒）： 用户能否快速判断页面用途和核心操作？
  • 核心路径走查： 首次使用的用户能否完成主要任务？
  • 一致性检查： 是否遵循设计令牌？层级结构是否一致？
  • 无障碍适配检查： 对比度、焦点状态、语义化、错误提示。

Step 7 — Hand-off (make it buildable)

步骤7 — 交付对接（便于开发）

Provide:
  • tokens,
  • component specs (states + spacing + behaviour),
  • responsive rules,
  • and edge cases.
提供：
  • 设计令牌，
  • 组件规范（状态 + 间距 + 交互行为），
  • 响应式规则，
  • 以及边缘场景处理方案。

Default starter system

默认初始设计系统

Use this system unless the project already has one.
除非项目已有设计系统，否则使用以下系统。

Spacing & sizing scale (px)

间距与尺寸比例（像素）

Use a non-linear scale so choices are easy: 
0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
Rules:
  • pick from the scale; avoid “one-off” numbers.
  • for grouping: inside-group spacing < between-group spacing.
使用非线性比例，便于选择合适的数值： 
0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
规则：
  • 从比例中选择数值；避免使用“一次性”数值。
  • 分组时：组内间距 < 组间间距。

Typography scale (px)

字体比例（像素）

Keep it tight: 6–8 sizes is enough.
Suggested:
  • 12
    caption
  • 14
    small/body-secondary
  • 16
    body
  • 20
    subheading
  • 24
    h3
  • 30
    h2
  • 40
    h1/hero
Rules:
  • default body line-height ~ 
    1.5–1.7
    .
  • limit line length for reading (~45–80 characters).
  • use weight/colour/spacing before adding new sizes.
保持精简：6-8种尺寸足够。
推荐方案：
  • 12
    说明文字
  • 14
    小号/次要正文
  • 16
    正文
  • 20
    子标题
  • 24
    三级标题
  • 30
    二级标题
  • 40
    一级标题/英雄区标题
规则：
  • 默认正文行高约为 
    1.5–1.7
    。
  • 限制阅读行宽（约45-80个字符）。
  • 优先通过字重/颜色/间距区分内容，而非新增字体尺寸。

Colour system

颜色系统

  • define neutrals (backgrounds + text), one primary, and semantic accents.
  • define shades up front (e.g., 100–900), don’t generate ad-hoc lightens/darkens.
  • “Grey” can be warm or cool; keep a consistent temperature.
Contrast rules:
  • normal text target: ≥ 4.5:1
  • large text target: ≥ 3:1
  • 定义中性色（背景 + 文字）、一种主色，以及语义强调色。
  • 提前定义色调（例如100–900），避免临时调整明暗。
  • “灰色”可偏暖或偏冷；保持色调一致。
对比度规则：
  • 普通文本目标对比度：≥ 4.5:1
  • 大文本目标对比度：≥ 3:1

Elevation / shadow system

层级/阴影系统

Use 3–5 shadow levels that map to meaning:
  • 1: buttons/cards (subtle)
  • 2: popovers/menus
  • 3: sticky headers
  • 4: modals
  • 5: high priority overlays
使用3-5种阴影层级，对应不同的语义：
  • 1级：按钮/卡片（细微阴影）
  • 2级：弹出框/菜单
  • 3级：固定头部
  • 4级：模态框
  • 5级：高优先级浮层

Borders

边框设计

Prefer:
  • spacing,
  • subtle shadows,
  • or small background changes over heavy borders.
优先选择：
  • 间距，
  • 细微阴影，
  • 或背景色细微变化 而非厚重的边框。

Empty states

空状态设计

Empty states are a first impression. They must:
  • explain what’s empty,
  • why it matters,
  • and what to do next.
空状态是用户的第一印象。 空状态设计需：
  • 说明什么内容为空，
  • 说明其重要性，
  • 以及下一步操作指引。

Progressive disclosure

渐进式披露

Use these reference files when deeper detail is needed:
  • Workflow & deliverables → references/WORKFLOW.md
  • Page patterns → references/PAGE-PATTERNS.md
  • Audit / critique → references/DESIGN-AUDIT.md
  • Usability & navigation → references/USABILITY.md
  • Visual design systems → references/VISUAL-DESIGN.md
  • Interaction & forms → references/INTERACTION-DESIGN.md
  • Information architecture → references/INFORMATION-ARCHITECTURE.md
  • Content & microcopy → references/CONTENT-COPY.md
  • Responsive rules → references/RESPONSIVE.md
  • Accessibility → references/ACCESSIBILITY.md
  • Checklists & templates → references/CHECKLISTS.md
需要更详细内容时，可参考以下文件：
  • 工作流与交付成果 → references/WORKFLOW.md
  • 页面模式 → references/PAGE-PATTERNS.md
  • 设计评审/审计 → references/DESIGN-AUDIT.md
  • 可用性与导航 → references/USABILITY.md
  • 视觉设计系统 → references/VISUAL-DESIGN.md
  • 交互与表单 → references/INTERACTION-DESIGN.md
  • 信息架构 → references/INFORMATION-ARCHITECTURE.md
  • 内容与微文案 → references/CONTENT-COPY.md
  • 响应式规则 → references/RESPONSIVE.md
  • 无障碍适配 → references/ACCESSIBILITY.md
  • 清单与模板 → references/CHECKLISTS.md

Quick search

快速搜索

If running locally:
bash
grep -i "empty state\|hierarchy\|spacing" -n references/*.md
若在本地运行：
bash
grep -i "empty state\|hierarchy\|spacing" -n references/*.md

THE EXACT PROMPT — UX/UI plan

标准提示词 — UX/UI设计方案

You are designing a website UI/UX.

1) Write a crisp design brief (users, goals, constraints, success metrics).
2) Define information architecture + navigation model.
3) Identify 1–3 key user paths; write step-by-step flows.
4) Produce a component inventory for the key pages.
5) Propose a design token system (spacing, type, colour, radius, shadow) with rules.
6) Describe page layouts (mobile-first) and key interactions.
7) List empty/loading/error states and edge cases.
8) Run a usability + accessibility + consistency pass; revise.

Output must be specific and implementable.
Avoid vague advice.
你正在为一个网站设计UI/UX。

1) 撰写简洁的设计简报（用户、目标、约束条件、成功指标）。
2) 定义信息架构 + 导航模型。
3) 识别1-3条核心用户路径；撰写分步流程。
4) 产出核心页面的组件清单。
5) 提出设计令牌系统（间距、字体、颜色、圆角、阴影）及使用规则。
6) 描述页面布局（移动端优先）和核心交互。
7) 列出空状态/加载状态/错误状态及边缘场景。
8) 执行可用性 + 无障碍适配 + 一致性检查；进行优化。

输出内容需具体且可落地。
避免模糊建议。

THE EXACT PROMPT — Visual polish pass

标准提示词 — 视觉精细化优化

Review this UI for visual quality.

- Fix hierarchy (what is primary vs secondary vs tertiary?)
- Fix spacing (grouping clarity; rhythm; alignment)
- Fix typography (scale, weights, line height, line length)
- Fix colour (contrast, palette consistency, accent usage)
- Fix depth (shadows/borders; focus on meaning)
- Improve empty states and microcopy

Return:
1) a list of concrete changes
2) updated tokens (if needed)
3) before/after descriptions of the most important screens.
评审该UI的视觉质量。

- 优化层级结构（区分核心、次要、 tertiary内容）
- 优化间距（分组清晰度、节奏、对齐）
- 优化字体（比例、字重、行高、行宽）
- 优化颜色（对比度、调色板一致性、强调色使用）
- 优化层级深度（阴影/边框；聚焦语义）
- 优化空状态和微文案

返回内容：
1) 具体修改清单
2) 更新后的设计令牌（若需要）
3) 最重要页面的前后对比说明。

THE EXACT PROMPT — Usability “glance test”

标准提示词 — 可用性“快速扫视测试”

Pretend you have 10 seconds to look at this page.

Answer:
- What is this page?
- Who is it for?
- What are the top 3 things I can do here?
- What is the primary action?
- Where is the navigation?

Then list everything that created a question mark, and propose fixes.
假设你只有10秒时间查看该页面。

回答：
- 这是什么页面？
- 面向哪些用户？
- 我可以在这里完成的3项核心操作是什么？
- 核心操作是什么？
- 导航在哪里？

然后列出所有让你产生疑惑的点，并提出修复方案。

THE EXACT PROMPT — Component spec (single component)

标准提示词 — 单个组件规范

Write a build-ready spec for this component.

Include:
- Purpose + when to use
- Anatomy (parts)
- Variants
- States: default/hover/focus/active/disabled/loading/error/success/empty
- Behaviour rules (keyboard + mouse + touch)
- Spacing + typography + colour tokens used
- Accessibility notes (ARIA if needed)
- Edge cases (long text, missing data, localisation)

Keep it concise but unambiguous.
为该组件撰写可直接用于开发的规范。

包含：
- 用途 + 使用场景
- 组成结构（各部分）
- 变体
- 状态：默认/悬停/聚焦/激活/禁用/加载/错误/成功/空状态
- 交互规则（键盘 + 鼠标 + 触摸）
- 使用的间距 + 字体 + 颜色令牌
- 无障碍适配说明（必要时包含ARIA）
- 边缘场景（长文本、缺失数据、本地化）

内容需简洁但明确。

THE EXACT PROMPT — Accessibility pass

标准提示词 — 无障碍适配检查

Review this design for accessibility.

Check:
- text contrast (normal and large text)
- keyboard navigation and focus visibility
- semantic element choices (button vs link vs div)
- form labelling and error announcement
- motion and reduced-motion behaviour

Return:
1) issues grouped by severity
2) concrete fixes (design + implementation)
3) any token changes needed (colours, focus styles)
评审该设计的无障碍适配情况。

检查：
- 文本对比度（普通文本和大文本）
- 键盘导航和焦点可见性
- 语义化元素选择（按钮 vs 链接 vs 容器）
- 表单标签和错误提示
- 动效及减少动效的适配行为

返回内容：
1) 按严重程度分组的问题
2) 具体修复方案（设计 + 实现）
3) 所需的令牌修改（颜色、焦点样式）

THE EXACT PROMPT — Responsive pass

标准提示词 — 响应式适配检查

Define responsive behaviour for this page/component.

For each breakpoint (small phone, large phone, tablet, desktop):
- layout (stack/columns)
- what becomes primary vs secondary
- how text wraps/truncates
- how tables, toolbars, and secondary actions adapt

Then list edge cases (long text, empty, error) and how they render.
定义该页面/组件的响应式行为。

针对每个断点（小屏手机、大屏手机、平板、桌面端）：
- 布局（堆叠/分栏）
- 核心与次要内容的切换
- 文本换行/截断方式
- 表格、工具栏和次要操作的适配方式

然后列出边缘场景（长文本、空状态、错误状态）及其渲染方式。