客户网站设计（无AI生成内容） 是做什么的？
自动将此技能应用于每一个网页设计请求（网站、页面、落地页、首页、设计稿、改版、重建、展示站点）——用户无需命名该技能。
构建看起来像真正的代理机构做出来的客户网站：独特设计、真实内容、干净代码，在交付前通过真实浏览器检查。
第一步——询问，切勿假设
在编写任何代码之前，确认（仅询问缺失的内容）：
- 技术栈：纯HTML/CSS/JS、Angular、React/Next.js 或 WordPress/Elementor。
- 业务：名称（准确拼写）、行业、城市、服务/产品、目标客户。
- 真实资产：Logo、照片、项目列表、联系电话、WhatsApp、地址、Google Maps链接、Google评分、社交媒体链接。
- 语言（例如英语+泰米尔语/卡纳达语）——切勿猜测。
- 网站的主要目标：电话、WhatsApp咨询、报价请求、预订或在线订单。 如果缺少资产，请使用明确标记的 TODO 插槽——切勿使用人物图库照片或虚构信息。
第二步——先写设计规范（还不做组件）
编写简短规范并获得批准：
- 美学方向——选定一个：编辑风、奢华风、工业风、温馨本地风、粗野主义、极简高端风。用一句话说明它为什么适合这个业务。
- 排版——一个独特的展示字体+一个整洁的正文字体。使用 fluid 大小配合 clamp() 并遵循严格的模块化比例（例如1.25）。切勿将默认的 Inter/Roboto/Arial 用作展示字体。
- 颜色（60-30-10）——60%基础色（例如暖灰白 #F7F6F2 或炭黑色 #111214），30%结构表面色，10%一个强烈的品牌强调色。定义为CSS变量/设计令牌。
- 网格与布局——12列网格，至少一个不对称/编辑风格的分割区段，1px细线边框，大量留白。
- 页面列表+真实文案——每个区段的标题和正文文案，需为这个行业和城市量身定制。
方向预设（起点，根据客户调整）
- 珠宝/黄金： 奢华编辑风；衬线展示字体（例如Cormorant、Instrument Serif）；象牙色+深酒红/深绿+金色点缀（少量使用）；大型产品摄影；带日期/时间的金价区块；储蓄计划区段；BIS认证信任条。
- 工业/制造业/B2B： 工业精确风；无衬线展示字体（例如Space Grotesk、Archivo）；炭黑色+钢灰色+一个安全强调色（橙色/黄色）；规格表格、项目案例研究（客户、地点、区域、时间线）、宣传册下载、详细报价表单。
- 酒店/酒店业： 温馨编辑风；客房卡片配真实照片、价格/设施、位置及附近景点、预订/WhatsApp行动号召按钮。
- 摄影/创意领域： 极简画廊优先；以图像引导的不对称瀑布流布局，极简金属质感，通过强字体区分名称/类别。
第三步——严格禁止（AI陈词滥调）
绝对不要：
- 紫色/靛蓝/蓝紫色的渐变、玻璃态模糊气泡、浮动渐变球体。
- 放置于彩色圆形内的通用图标组成的三列居中特色网格。
- 占位文案：“转变您的工作流程”、“赋能企业”、“释放您的潜力”、“提升您的体验”、“Lorem Ipsum”、“示例标题”。
- 与业务无关的微笑人物图库照片。
- 虚假统计数据、虚假客户评价或可能显示“0+”的动画计数器。
- 表情符号用作图标、所有内容居中、所有卡片高度完全相同。
- 已完成站点中指向“#”的链接。
第四步——构建规则
- 组件小而可组合（例如带有Header/Body/Footer部分的Card），而不是一个巨大的承载大量属性的组件。
- 移动优先；在390px和1440px宽度测试。
- 图片：使用有意义的alt文本、设置width/height（避免布局偏移）、懒加载（首屏以下）、尽可能使用WebP/AVIF格式。
- 动效：细微且有目的性（滚动时淡入/滑入、真实的悬停状态）；尊重prefers-reduced-motion。
- 无障碍性：WCAG AA对比度、可见的焦点状态、语义化标题（每个页面一个H1）、描述性链接文本（不能单独使用“了解更多”）。
- Angular + TranslateModule：始终为每个项目语言生成i18n键文件。
- 如果输出很长，先提出分批计划，然后完整生成每一批——切勿截断文件。
本地业务必备（印度中小型企业客户）
- 固定的WhatsApp按钮和点击拨打电话（tel:）链接。
- 地址+嵌入的Google地图+营业时间。
- Google评分/评价（真实的，链接到用户页面）。
- 真正能发送消息（邮件和/或WhatsApp通知）的联系/报价表单，并带有垃圾邮件保护。
- 搜索引擎优化（SEO）：页面标题 = “城市中的服务 | 品牌”；每个页面的meta描述；LocalBusiness JSON-LD结构化数据；Open Graph图片；sitemap.xml；robots.txt。
- 隐私政策页面；正确的当前版权年份。
第五步——在真实浏览器中验证
使用Playwright（无头Chromium）：
- 以1440px和390px截取每个页面的屏幕截图；查看截图。
- 检查水平溢出、文本重叠、图片损坏、过小的点击目标（<44px）。
- 检查控制台错误和失败的网络请求。
- 修复并重新截图直至干净。
第六步——交付前检查清单（必须全部通过）
- 没有留下“Lorem Ipsum”/“示例”/“TODO”文本。
- 没有href="#"或无效链接；所有社交媒体链接指向真实用户页面。
- 公共页面上没有管理员/登录链接；meta标签或源码中没有开发者邮箱或内部路径。
- 业务名称、客户名称和地址拼写正确且一致。
- 计数器、滑块、费率更新和表单渲染真实值且能正常工作。
- 每张图片都有有意义的alt文本；标题和meta描述每个页面都是唯一的。
- 已审查移动端和桌面端截图。
- Lighthouse：性能、无障碍性、搜索引擎优化（SEO）每项90+（或解释原因）。
最后以简短总结结束：已选择的设计方向、已构建的页面、检查清单结果以及仍需要客户提供的内容（照片、内容、凭据）。