Web Design Patterns 是一套基于原则的网站区块设计模式参考，旨在帮助设计出“像人设计的、而非 AI 生成”的网站区块。每个模式都讲解其背后的原因和适用时机，而不仅仅是提供可复制的模板。
用途
该技能用于设计网站中的常见区块，包括首页 Hero、页面头部、落地页、服务卡片、团队网格、定价层级、作品集、转化区块、按钮、横幅 CTA、可信度徽章、许可证、评价、保证、客户评价、社会证明和引用区块等。目标是让这些区块匹配具体业务语境，避免出现“AI 骨架”式的模板感。
主要能力
技能包含五个参考文件，按需加载，不必每个项目都全部阅读：
- references/hero-patterns.md（约 470 行）：首页 Hero、页面头部、落地页。涵盖方法选择、基于约束的创意、叠加技术、响应式行为、页面专属 Hero。
- references/card-patterns.md（约 550 行）：服务卡片、团队网格、定价层级、作品集。涵盖布局决策框架、反雷同策略、网格数学、孤行处理、CSS 模式、业务语境。
- references/cta-patterns.md（约 420 行）：转化区块、按钮、横幅 CTA。涵盖行动层级、放置策略、文案原则、视觉设计、移动端考量、语境专属 CTA。
- references/trust-signals.md（约 490 行）：可信度：徽章、许可证、评价、保证。涵盖信任心理学、信任层级、语境敏感信任、获客型 vs 客户型、放置策略、反模式。
- references/testimonial-patterns.md（约 350 行）：客户评价、社会证明、引用区块。涵盖社会证明心理学、获客伦理、设计方法选择、内容原则、放置、替代方案。
使用方式
根据当前正在构建的区块，阅读对应的参考文件。例如构建首页 Hero 时读 hero-patterns.md，构建服务卡片时读 card-patterns.md。技能强调按需加载，不要为每个项目一次性读完五个文件。
在阅读任何参考文件之前，应先内化跨领域原则，这些原则适用于所有模式。
跨领域原则
反 AI 模式（应避免）
“AI 骨架”会暴露模板生成的设计，包括：
- 固定顺序：Hero → 信任栏 → 3 张相同卡片 → 功能 → 数据 → CTA → 页脚
- 民主式设计：每个元素获得相同视觉权重，没有层级
- 完美对称：一切居中、完美对齐，没有刻意的不对称
- 完全相同重复：所有卡片同尺寸、同结构、同内边距、同阴影
- 通用文案：每个 CTA 都是“Learn More”，每个标题都是“Quality Service You Can Trust”
- 无目的装饰：漂浮形状、随机渐变、抽象色块
让设计显得像人设计的要素
- 一个元素明显主导——层级，而非民主
- 不对称是刻意的——并非一切居中或平衡
- 具体、有观点的文案——“Schedule Your Free Roof Inspection”而非“Learn More”
- 视觉权重引导视线——你知道先看哪里、再看哪里、然后看哪里
- 克制——不是每种技术都用，只用服务于目的的那些
- 语境适配——紧急水管工看起来应不同于豪华酒店
伦理规则
在所有模式中不可协商：在获客型网站（没有真实业务数据）上，绝不捏造：星级评分或评价数量、具体经营年限、许可证或 ABN 编号、具名个人或团队成员、确切客户数量。
获客型网站的安全替代：用“Experienced Team”而非“25 Years Experience”；用“Highly Rated”而非“4.9 Stars (127 Reviews)”；用“Licensed & Insured”而非“QBCC License #1234567”。
业务语境决定一切
同一区块类型在不同业务中看起来完全不同：紧急服务——直接、即时、电话优先；豪华/酒店——宽敞、精致、有氛围；技工/本地服务——可信、有能力、真诚；专业/企业——自信、干净、结构化；创意/代理——独特、大胆、有个性。
快速模式示例
Hero 方法
图像主导（有强摄影素材）：让图像发挥作用，文字最少；一个清晰焦点；文字置于图像构图中，而非直接贴上去。
排版主导（没有强图像）：字体选择、大小、粗细、间距本身就是设计；充裕留白作为主动设计元素；用色块或细微纹理替代库存照片。
分割/平衡（强文案 + 强图像）：一侧略微主导——真正的 50/50 显得犹豫不决；移动端顺序很重要——垂直堆叠中哪个元素在前。
卡片布局决策
先数项目——错误的网格数学会产生孤行卡片；检查层级——是否有一项更重要？以 2 倍尺寸突出它；内容密度——图像多则列少，文字多则列多；孤行修复——绝不让 1 张卡片单独占一行。
CTA 层级
让 CTA 紧迫性与业务语境匹配：紧急服务——电话号码就是 CTA，巨大、高对比、可点击；专业服务——先低承诺，“Book a consultation”；创意/代理——建立关系，“View our work”。黄金法则：先陈述价值，再请求行动。CTA 出现在价值之后。
信任信号层级
第 1 层（最强）：具体、可验证，如“QBCC License #1234567”。第 2 层：第三方验证，如“4.8 stars (127 Google Reviews)”+ 链接。第 3 层：自我声明，如“Fully licensed and insured”。第 4 层（最弱）：通用保证，如“Quality guaranteed”。一个第 1 层信号胜过三个第 4 层信号。信任应分布在整个页面，不要孤立在一个区块。
客户评价方法
一条有力评价——单条精选引用，做大；3-6 条好评价——网格呈现多样性，一条精选；没有真实评价——服务承诺、保证、流程描述。绝不要使用轮播——用户只能看到 5 条中的 1 条，点击控制的比例低于 1%。要么全部展示，要么精选最好的 3 条。
适用场景
适用于需要设计网站区块、并希望避免模板感和 AI 生成感的场景，尤其是首页 Hero、卡片布局、CTA、信任信号和客户评价等区块的设计。也适用于需要根据业务类型（紧急服务、豪华酒店、本地技工、专业企业、创意代理）调整设计风格的场景。
限制
该技能为原则型参考，不提供可直接套用的完整模板。每个参考文件为 300-470 行的深度内容，需要按需阅读。在获客型网站上，不得捏造星级评分、评价数量、经营年限、许可证编号、具名人员或确切客户数量等具体数据。关于该技能的收费、价格、平台支持情况，资料中暂未提供。