网页设计方法论：生产级HTML/CSS构建模式与BEM命名规范

web-design-methodology by jezweb/claude-skills

311 周安装量

643 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/jezweb/claude-skills --skill web-design-methodology

方法论 CSS 开发

🇨🇳中文介绍

网页设计方法论

构建生产级 HTML/CSS 的通用模式。本技能涵盖实现方法论——搭配 web-design-patterns 以获取具体的组件设计。

产出内容

具备以下特性的生产就绪 HTML/CSS 原型：

语义化的 CSS 自定义属性（设计令牌）
BEM 命名的组件
移动优先的响应式设计
可访问的标记
可选的三态深色模式

文件结构

prototype/
├── index.html
├── about.html
├── services.html
├── contact.html
├── favicon.svg
├── css/
│   ├── variables.css     # 设计令牌：颜色、排版、间距
│   ├── styles.css        # 所有组件样式 (BEM)
│   └── mobile-nav.css    # 移动端菜单样式
├── js/
│   ├── theme.js          # 深色模式切换（仅在要求时添加）
│   └── mobile-menu.js    # 汉堡菜单
└── media/
    └── images/

构建顺序：

variables.css — 设计令牌优先
favicon.svg — 使用品牌色的简单 SVG
styles.css — 所有 BEM 组件

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

深色模式（可选）

深色模式是可选的——仅在需求说明中明确要求时添加。大多数商业网站仅发布浅色模式可以更快上线。

需求说明明确要求
面向技术/开发者受众（预期功能）
作品集/创意网站（美学选择）

贸易、酒店、专业服务类网站
当简洁性和快速上线更重要时

如果添加深色模式

使用基于类的切换，切勿使用 CSS 媒体查询。

/* 浅色模式（默认） */
:root {
  --background: #F9FAFB;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #1E293B;
}

/* 深色模式（通过 html 上的 .dark 类实现） */
.dark {
  --background: #0F172A;
  --foreground: #F1F5F9;
  --card: #1E293B;
  --card-foreground: #F1F5F9;
}

通过 JavaScript 在 <html> 元素上切换 .dark 类
绝不使用 @media (prefers-color-scheme: dark) — 系统偏好由 JavaScript 处理
每个背景令牌都需要一个配对的文字前景令牌
品牌色在深色模式下应变得更亮或更饱和
背景色范围：#0F172A 到 #1E293B（非纯黑）
每个文字与背景的组合必须通过 WCAG AA 标准（对比度 4.5:1）

三态切换的实现请使用 assets/theme-toggle.js。

移动优先。为 375px 设计，向上增强。

/* 基础：375px（移动端）— 无需媒体查询 */
@media (min-width: 640px) { /* sm — 大屏手机 */ }
@media (min-width: 768px) { /* md — 平板 */ }
@media (min-width: 1024px) { /* lg — 小桌面 */ }
@media (min-width: 1440px) { /* xl — 标准桌面 */ }

电话号码可见且无需滚动即可点击
主要行动号召可见且无需滚动
导航可通过汉堡菜单使用
触摸目标最小尺寸为 44x44px
绝不出现水平滚动
图片缩放适当（无溢出）

.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。

戏剧性的尺寸对比。 标题尺寸是正文的 3-4 倍。主标题使用 clamp(2.5rem, 6vw, 5rem)。
字体粗细变化。 混合使用 300 和 800 的粗细。统一的粗细很乏味。
每页一个展示亮点。 一个超大单词，一个戏剧性标题，一个引文。不要三个。
正文文本左对齐。 仅对主标题区和简短陈述居中。段落绝不居中。
大写字母添加字间距。 至少添加 letter-spacing: 0.05em。

80% 中性色调（背景、文字、卡片）
15% 次要/柔和的品牌色调
5% 主要品牌色（行动号召、每个视口一个强调色）

如果主要品牌色出现在每个标题、边框、图标上——就没有任何东西能脱颖而出。

不是统一的填充。不同区块的呼吸感不同：

/* 紧凑区块（服务列表、常见问题） */
.section--compact { padding: clamp(2rem, 4vw, 4rem) 0; }

/* 标准区块 */
.section { padding: clamp(3rem, 6vw, 6rem) 0; }

/* 呼吸空间（编辑性分隔、推荐语） */
.section--spacious { padding: clamp(4rem, 8vw, 10rem) 0; }

元素	阴影
静止状态的卡片	`--shadow-sm`
悬停状态的卡片	`--shadow-md`
下拉菜单	`--shadow-lg`
模态框	`--shadow-xl`

并非所有东西都需要阴影。请谨慎使用。

通过内联 SVG 使用 Lucide 图标：

尺寸：内联 24px，功能区块 32-48px
描边宽度：1.5 或 2（全局保持一致）
颜色：currentColor（继承文字颜色）
每个图标都应传达特定的含义

语义化 HTML：<header>, <nav>, <main>, <section>, <footer>
替代文本：内容性图片要有意义，装饰性图片可为空
对比度：至少 4.5:1（推荐 7:1）
焦点样式：所有交互元素上可见
跳过链接：第一个可聚焦元素
表单标签：与输入框关联
ARIA：切换按钮使用 aria-expanded，需要时使用 aria-label

首屏以下的图片使用 loading="lazy"
主图使用 loading="eager"
在 head 中添加 <link rel="preconnect" href="https://fonts.googleapis.com">
保持 CSS 总大小在 50KB 以下
不使用 JavaScript 框架——仅使用原生 JS

这些模式会暴露“这是 AI 生成的”——请避免：

主标题 → 信任条 → 3 个卡片 → 功能 → 统计数据 → 行动号召 → 页脚（千篇一律的骨架）
每个区块都有相同的填充
所有卡片在完美的 3 列网格中大小相同
所有内容都居中
每个区块：标题 + 副标题 + 内容（相同的节奏）
无目的的装饰性元素
每个行动号召都是“了解更多”
使用 Inter/Arial/系统字体，没有排版个性

在标记为完成前检查：

设计方向明确——可以用一句话描述美学风格
排版有特色——不是 Inter/系统字体
色彩克制——主要品牌色使用谨慎
没有两个相邻区块看起来一样
行动号召具体——没有“了解更多”
移动端可用——在 375px 下测试
深色模式可用（如果启用）——检查每个区块
没有虚构的图片——只有真实的文件路径
设计师会认为这是他们的作品吗？

🇺🇸English

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.

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

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:

variables.css — tokens first
favicon.svg — simple SVG from brand colour
styles.css — all BEM components
mobile-nav.css — responsive navigation
JS files — from assets/ templates
index.html — homepage first
Inner pages — about, services, contact
Mobile check — verify at 375px

BEM Naming

Use Block-Element-Modifier naming. No exceptions.

/* 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

CSS Custom Properties

Use semantic tokens. Never hardcode colours, spacing, or typography values.

See references/css-variables-template.md for the complete token template.

/* 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.

/* 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.

Responsive Design

Mobile-first. Design for 375px, enhance upward.

Breakpoints

/* 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

Phone number visible and tappable without scrolling
Primary CTA visible without scrolling
Navigation works via hamburger menu
Touch targets minimum 44x44px
No horizontal scrolling ever
Images scale properly (no overflow)

Wide Screen Constraints

.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.

Typography Rules

Dramatic size contrast. Headlines 3-4x body size. clamp(2.5rem, 6vw, 5rem) for hero titles.
Weight variety. Mix 300 and 800 weights. Uniform weight is boring.
One display moment per page. One oversized word, one dramatic headline, one pull quote. Not three.
Left-align body text. Centre only for heroes and short statements. Never centre paragraphs.
Letter spacing on uppercase. Add letter-spacing: 0.05em minimum.

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.

Spacing System

Not uniform padding. Sections breathe differently:

/* 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

Element	Shadow
Cards at rest	`--shadow-sm`
Cards on hover	`--shadow-md`
Dropdowns	`--shadow-lg`
Modals	`--shadow-xl`

Not everything needs shadow. Use sparingly.

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

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

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

Anti-AI Patterns

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

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?

Weekly Installs

311

Repository

jezweb/claude-skills

GitHub Stars

643

First Seen

Feb 18, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode272

codex269

gemini-cli267

github-copilot266

kimi-cli255

cursor255

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

105,000 周安装

网页设计方法论：生产级HTML/CSS构建模式与BEM命名规范

🇨🇳中文介绍

网页设计方法论

产出内容

文件结构

相关 Skills

BEM 命名

CSS 自定义属性

深色模式（可选）

如果添加深色模式

响应式设计

断点

移动端优先级

宽屏约束

排版规则

色彩运用

间距系统

阴影系统

图标

可访问性

性能

反 AI 模式

质量检查清单