Back to Details

web-design-methodology

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Design Methodology

网页设计方法论

Universal patterns for building production-grade HTML/CSS. This skill covers implementation methodology — pair with 
web-design-patterns
for specific component designs.
构建生产级HTML/CSS的通用模式。本内容涵盖实施方法论——搭配
web-design-patterns
可获取特定组件设计相关内容。

What You Produce

产出成果

Production-ready HTML/CSS prototypes with:
  • Semantic CSS custom properties (tokens)
  • BEM-named components
  • Mobile-first responsive design
  • Accessible markup
  • Optional three-state dark mode
可投入生产的HTML/CSS原型，具备以下特性：
  • 语义化CSS自定义属性（Tokens）
  • 采用BEM命名的组件
  • 移动端优先的响应式设计
  • 符合可访问性规范的标记
  • 可选的三态深色模式

File Structure

文件结构

prototype/
├── index.html
├── about.html
├── services.html
├── contact.html
├── favicon.svg
├── css/
│   ├── variables.css     # Tokens: colours, typography, spacing
│   ├── styles.css        # All component styles (BEM)
│   └── mobile-nav.css    # Mobile menu styles
├── js/
│   ├── theme.js          # Dark mode toggle (only if requested)
│   └── mobile-menu.js    # Hamburger menu
└── media/
    └── images/
Build order:
  1. variables.css
    — tokens first
  2. favicon.svg
    — simple SVG from brand colour
  3. styles.css
    — all BEM components
  4. mobile-nav.css
    — responsive navigation
  5. JS files — from 
    assets/
    templates
  6. index.html
    — homepage first
  7. Inner pages — about, services, contact
  8. Mobile check — verify at 375px
prototype/
├── index.html
├── about.html
├── services.html
├── contact.html
├── favicon.svg
├── css/
│   ├── variables.css     # Tokens: colours, typography, spacing
│   ├── styles.css        # All component styles (BEM)
│   └── mobile-nav.css    # Mobile menu styles
├── js/
│   ├── theme.js          # Dark mode toggle (only if requested)
│   └── mobile-menu.js    # Hamburger menu
└── media/
    └── images/
构建顺序：
  1. variables.css
    — 优先处理Tokens
  2. favicon.svg
    — 基于品牌色的简单SVG
  3. styles.css
    — 所有BEM组件样式
  4. mobile-nav.css
    — 响应式导航样式
  5. JS文件 — 从
    assets/
    模板中获取
  6. index.html
    — 先完成首页
  7. 内页 — about、services、contact
  8. 移动端检查 — 在375px尺寸下验证

BEM Naming

BEM命名规范

Use Block-Element-Modifier naming. No exceptions.
css
/* Block */
.hero { }
.card { }
.nav { }

/* Element (child of block) */
.hero__title { }
.hero__subtitle { }
.hero__cta { }
.card__image { }
.card__content { }

/* Modifier (variation) */
.hero--split { }
.hero--minimal { }
.card--featured { }
.btn--primary { }
.btn--lg { }
Rules:
  • Blocks are standalone components
  • Elements are children, connected with 
    __
  • Modifiers are variations, connected with 
    --
  • Never nest more than one level: 
    .hero__content__title
    is wrong
  • Never use element without its block: 
    .card__image
    only inside 
    .card
采用Block-Element-Modifier命名法，无例外。
css
/* Block */
.hero { }
.card { }
.nav { }

/* Element (child of block) */
.hero__title { }
.hero__subtitle { }
.hero__cta { }
.card__image { }
.card__content { }

/* Modifier (variation) */
.hero--split { }
.hero--minimal { }
.card--featured { }
.btn--primary { }
.btn--lg { }
规则：
  • Block是独立的组件
  • Element是Block的子元素，用
    __
    连接
  • Modifier是变体样式，用
    --
    连接
  • 嵌套层级不得超过一级：
    .hero__content__title
    是错误写法
  • 不得脱离所属Block单独使用Element：
    .card__image
    只能在
    .card
    内部使用

CSS Custom Properties

CSS自定义属性

Use semantic tokens. Never hardcode colours, spacing, or typography values.
See 
references/css-variables-template.md
for the complete token template.
css
/* Always this */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Never this */
.card {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 24px;
}
使用语义化Tokens，绝对不要硬编码颜色、间距或排版数值。
完整的Token模板请参考
references/css-variables-template.md
。
css
/* Always this */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Never this */
.card {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 24px;
}

Dark Mode (Optional)

深色模式（可选）

Dark mode is optional — only add if the brief requests it. Most business sites ship faster as light-only.
When to include:
  • Brief explicitly requests it
  • Tech/developer audiences (expected)
  • Portfolio/creative sites (aesthetic choice)
When to skip:
  • Trades, hospitality, professional services
  • When simplicity and fast shipping matter more
深色模式为可选功能——仅当需求明确要求时才添加。大多数商业网站仅使用浅色模式可更快上线。
建议添加场景：
  • 需求明确要求
  • 面向技术/开发者受众（用户预期具备该功能）
  • 作品集/创意类网站（审美选择）
建议跳过场景：
  • 贸易、酒店、专业服务类网站
  • 更注重简洁性和快速上线的场景

If Adding Dark Mode

若添加深色模式

Use class-based toggle, never CSS media queries.
css
/* Light mode (default) */
:root {
  --background: #F9FAFB;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #1E293B;
}

/* Dark mode (via .dark class on html) */
.dark {
  --background: #0F172A;
  --foreground: #F1F5F9;
  --card: #1E293B;
  --card-foreground: #F1F5F9;
}
Rules:
  • .dark
    class on 
    <html>
    , toggled via JavaScript
  • NEVER use 
    @media (prefers-color-scheme: dark)
    — JS handles system preference
  • Every background token needs a paired foreground token
  • Brand colours get lighter/more saturated in dark mode
  • Backgrounds: 
    #0F172A
    to 
    #1E293B
    range (not pure black)
  • Every text-on-background combo must pass WCAG AA (4.5:1)
Use 
assets/theme-toggle.js
for the three-state toggle implementation.
采用基于类名的切换方式，绝对不要使用CSS媒体查询。
css
/* Light mode (default) */
:root {
  --background: #F9FAFB;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #1E293B;
}

/* Dark mode (via .dark class on html) */
.dark {
  --background: #0F172A;
  --foreground: #F1F5F9;
  --card: #1E293B;
  --card-foreground: #F1F5F9;
}
规则：
  • 在
    <html>
    标签上添加
    .dark
    类，通过JavaScript实现切换
  • 绝对不要使用
    @media (prefers-color-scheme: dark)
    ——由JS处理系统偏好设置
  • 每个背景Token都需要对应的前景Token
  • 品牌色在深色模式下应更浅/饱和度更高
  • 背景色范围：
    #0F172A
    至
    #1E293B
    （不要使用纯黑色）
  • 所有背景上的文字组合必须通过WCAG AA标准（对比度4.5:1）
三态切换实现可使用
assets/theme-toggle.js
。

Responsive Design

响应式设计

Mobile-first. Design for 375px, enhance upward.
移动端优先。先为375px尺寸设计，再向上优化。

Breakpoints

断点设置

css
/* Base: 375px (mobile) — no media query needed */
@media (min-width: 640px) { /* sm — large phone */ }
@media (min-width: 768px) { /* md — tablet */ }
@media (min-width: 1024px) { /* lg — small desktop */ }
@media (min-width: 1440px) { /* xl — standard desktop */ }
css
/* Base: 375px (mobile) — no media query needed */
@media (min-width: 640px) { /* sm — large phone */ }
@media (min-width: 768px) { /* md — tablet */ }
@media (min-width: 1024px) { /* lg — small desktop */ }
@media (min-width: 1440px) { /* xl — standard desktop */ }

Mobile Priorities

移动端优先级

  1. Phone number visible and tappable without scrolling
  2. Primary CTA visible without scrolling
  3. Navigation works via hamburger menu
  4. Touch targets minimum 44x44px
  5. No horizontal scrolling ever
  6. Images scale properly (no overflow)
  1. 电话号码无需滚动即可查看并点击
  2. 主要CTA无需滚动即可查看
  3. 导航通过汉堡菜单实现
  4. 触摸目标最小尺寸为44x44px
  5. 绝对禁止横向滚动
  6. 图片可正常缩放（无溢出）

Wide Screen Constraints

宽屏约束

css
.prose { max-width: 65ch; }
.hero__content { max-width: min(640px, 45vw); }
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section { padding: clamp(3rem, 6vw, 6rem) 0; }
Use 
assets/mobile-nav.js
for the hamburger menu implementation.
css
.prose { max-width: 65ch; }
.hero__content { max-width: min(640px, 45vw); }
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section { padding: clamp(3rem, 6vw, 6rem) 0; }
汉堡菜单实现可使用
assets/mobile-nav.js
。

Typography Rules

排版规则

  1. Dramatic size contrast. Headlines 3-4x body size. 
    clamp(2.5rem, 6vw, 5rem)
    for hero titles.
  2. Weight variety. Mix 300 and 800 weights. Uniform weight is boring.
  3. One display moment per page. One oversized word, one dramatic headline, one pull quote. Not three.
  4. Left-align body text. Centre only for heroes and short statements. Never centre paragraphs.
  5. Letter spacing on uppercase. Add 
    letter-spacing: 0.05em
    minimum.
  1. 显著的尺寸对比。标题字号为正文字号的3-4倍。Hero标题使用
    clamp(2.5rem, 6vw, 5rem)
    。
  2. 字重多样性。混合使用300和800字重。统一字重会显得单调。
  3. 每页一个视觉焦点。一个超大字号单词、一个醒目标题、一个引用块。不要三个都有。
  4. 正文左对齐。仅在Hero区域和短语句中使用居中对齐。绝对不要让段落居中。
  5. 大写文字添加字间距。至少添加
    letter-spacing: 0.05em
    。

Colour Usage

色彩使用

The 80/20 rule:
  • 80% neutral tones (backgrounds, text, cards)
  • 15% secondary/muted brand tones
  • 5% primary brand colour (CTAs, one accent per viewport)
If primary is on every heading, border, icon — nothing stands out.
遵循80/20法则：
  • 80%中性色调（背景、文字、卡片）
  • 15%次要/柔和品牌色调
  • 5%主品牌色（CTA、每个视口仅使用一次强调色）
如果主品牌色用于每个标题、边框、图标——那么没有任何元素会突出。

Spacing System

间距系统

Not uniform padding. Sections breathe differently:
css
/* Tight section (service list, FAQ) */
.section--compact { padding: clamp(2rem, 4vw, 4rem) 0; }

/* Standard section */
.section { padding: clamp(3rem, 6vw, 6rem) 0; }

/* Breathing room (editorial break, testimonial) */
.section--spacious { padding: clamp(4rem, 8vw, 10rem) 0; }
不要使用统一的内边距。不同区块的间距应有区分：
css
/* Tight section (service list, FAQ) */
.section--compact { padding: clamp(2rem, 4vw, 4rem) 0; }

/* Standard section */
.section { padding: clamp(3rem, 6vw, 6rem) 0; }

/* Breathing room (editorial break, testimonial) */
.section--spacious { padding: clamp(4rem, 8vw, 10rem) 0; }

Shadow System

阴影系统

ElementShadow
Cards at rest
--shadow-sm
Cards on hover
--shadow-md
Dropdowns
--shadow-lg
Modals
--shadow-xl
Not everything needs shadow. Use sparingly.
元素阴影
静止状态的卡片
--shadow-sm
悬停状态的卡片
--shadow-md
下拉菜单
--shadow-lg
模态框
--shadow-xl
并非所有元素都需要阴影，应谨慎使用。

Icons

图标

Use Lucide icons via inline SVG:
  • Size: 24px inline, 32-48px for feature blocks
  • Stroke width: 1.5 or 2 (consistent throughout)
  • Colour: 
    currentColor
    (inherits text colour)
  • Each icon should communicate something specific
通过内联SVG使用Lucide图标：
  • 尺寸：内联图标24px，功能区块图标32-48px
  • 描边宽度：1.5或2（保持全局一致）
  • 颜色：
    currentColor
    （继承文字颜色）
  • 每个图标应传递明确的含义

Accessibility

可访问性

Non-negotiable:
  • Semantic HTML: 
    <header>
    , 
    <nav>
    , 
    <main>
    , 
    <section>
    , 
    <footer>
  • Alt text: Meaningful for content images, empty for decorative
  • Contrast: 4.5:1 minimum (7:1 preferred)
  • Focus styles: Visible on all interactive elements
  • Skip link: First focusable element
  • Form labels: Associated with inputs
  • ARIA: 
    aria-expanded
    on toggles, 
    aria-label
    where needed
以下要求为硬性标准：
  • 语义化HTML：使用
    <header>
    、
    <nav>
    、
    <main>
    、
    <section>
    、
    <footer>
  • 替代文本：内容图片使用有意义的替代文本，装饰性图片留空
  • 对比度：最小4.5:1（推荐7:1）
  • 焦点样式：所有交互元素的焦点样式可见
  • 跳转链接：第一个可聚焦元素为跳转链接
  • 表单标签：与输入框关联
  • ARIA属性：切换按钮使用
    aria-expanded
    ，必要时使用
    aria-label

Performance

性能优化

  • loading="lazy"
    on images below the fold
  • loading="eager"
    on hero image
  • <link rel="preconnect" href="https://fonts.googleapis.com">
    in head
  • Keep CSS under 50KB total
  • No JavaScript frameworks — vanilla JS only
  • 首屏下方的图片添加
    loading="lazy"
  • Hero图片添加
    loading="eager"
  • 在
    <head>
    中添加
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • 总CSS体积控制在50KB以内
  • 不使用JavaScript框架——仅使用原生JS

Anti-AI Patterns

反AI生成模式

These patterns signal "AI generated this" — avoid:
  • Hero → trust bar → 3 cards → features → stats → CTA → footer (the skeleton)
  • Every section has identical padding
  • All cards same size in perfect 3-column grid
  • Everything centred
  • Every section: heading + subheading + content (same rhythm)
  • Decorative elements with no purpose
  • "Learn More" as every CTA
  • Inter/Arial/system fonts with no typographic personality
以下模式会暴露“由AI生成”的痕迹——请避免：
  • Hero → 信任栏 → 3张卡片 → 功能 → 数据统计 → CTA → 页脚（固定模板）
  • 所有区块使用相同的内边距
  • 所有卡片尺寸相同，排列成完美的3列网格
  • 所有内容居中对齐
  • 每个区块都遵循“标题 + 副标题 + 内容”的固定节奏
  • 无实际用途的装饰元素
  • 所有CTA都使用“了解更多”
  • 使用Inter/Arial/系统字体，无排版特色

Quality Checklist

质量检查清单

Before marking complete:
  • Direction is clear — can describe aesthetic in one phrase
  • Typography makes a statement — not Inter/system
  • Colour is restrained — primary used sparingly
  • No two adjacent sections look the same
  • CTAs are specific — no "Learn More"
  • Mobile works — tested at 375px
  • Dark mode works (only if enabled) — every section checked
  • No hallucinated images — only real file paths
  • Would a designer claim this as their work?
标记完成前请检查：
  • 设计方向清晰——可用一句话描述整体风格
  • 排版有特色——未使用Inter/系统字体
  • 色彩使用克制——主品牌色仅少量使用
  • 相邻区块风格不同
  • CTA表述具体——未使用“了解更多”
  • 移动端可用——已在375px尺寸下测试
  • 深色模式可用（若启用）——所有区块已检查
  • 无虚构图片路径——仅使用真实文件路径
  • 设计师会认可该作品为原创？