Web 设计策略
一个战略性设计顾问技能，确保网站在担心美观之前，先将正确的信息以正确的顺序传达给正确的受众。
此技能适用于构建新网站、审查现有网站、撰写落地页文案以及审计页面常见失败点。执行深度审计或多部分页面构建时，请阅读 references/detailed-guidelines.md 获取完整检查清单。
核心原则
设计策略先于视觉执行。一个漂亮但说错话、找错人、顺序错乱的网站，永远会输给一个文案清晰但外观朴素的网站。先用策略引领，再叠加美学（构建时使用 frontend-design 技能进行视觉执行）。
1. 阶段感知设计
在写下一行文案或代码之前，先确定公司所处生命周期阶段。这决定了所有内容——布局复杂度、截图保真度、CTA策略和页面深度。
| 阶段 | 设计方法 | 关键信号 |
|---|---|---|
| 发布前/早期 | 营造神秘感。模糊或风格化的截图。等待列表/邮箱捕获。单页，一天内可完成。简单、聚焦的信息。 | 无公开产品、团队小、无收入 |
| 成长期 | 品牌认知。标志性强调色、详细功能分解、高分辨率产品截图、多个CTA。 | 产品已上线、有活跃用户、正在迭代PMF |
| 成熟期 | 信息深度。产品子版块、路线图、安全/合规页面、企业级套餐。克制、权威的配色方案。 | 成熟市场地位、企业级交易 |
在发布前阶段模仿成熟公司的精致会造成信任赤字——它承诺了你无法兑现的完整性。相反，成熟产品仍使用单页等待列表网站则显得疏忽。
2. 五秒过滤器
每个落地页必须在用户到达后的五秒钟内回答以下四个问题：
- 这是什么？ — 使用直白、具体的语言。用“聊天应用”而不是“协同平台”。
- 为谁而设？ — 明确受众。用“面向技术项目经理”而不是“面向团队”。
- 达到什么目的？ — 陈述即时利益或成果。
- 为什么他们应该在意？ — 这比现状好在哪里？
初创公司不能承受模糊的口号。将有价值的术语作为高价值过滤器——“问题追踪”吸引工程师，同时过滤掉不匹配的人。只有大型成熟平台才有资格说“工作发生的地方”之类的话。
清晰度金字塔
按紧迫性递减的顺序组织首页内容：
- 顶点 — 尖锐、符合术语的价值主张（英雄区）
- 扩展上下文 — 带有视觉证据的功能叙述，随用户滚动展开
- 功能深度 — 技术文档、次要用例、定价、安全（成熟产品的独立页面）
3. 避免“AI垃圾内容”模式
原创性是产品质量的代名词。如果网站看起来像LLM通用输出，用户会认为产品也是如此。标记并消除这些模式：
视觉垃圾信号：
- 紫色渐变和默认投影（头号“AI制作”信号）
- 通用便当盒网格（3×2 带有简单图标，无产品上下文）
- 带有原色标注的谷歌风格伪仪表盘（红/黄/绿/蓝）
- 浮动立方体、抽象3D形状或没有产品证据的通用英雄图形
微观细节失败点（“贴合与完成度”层面）：
- 间距不一致、标题中出现双空格、多余的句号
- 截图中可见的硬编码时间戳或占位数据
- “风格混乱”——混用超过5种字体处理方式，破坏视觉层次
- 低对比度文本（浅色背景配浅色文字、黄色背景配白色文字）
- 过小或比例不当的Logo
文案垃圾信号：
- 每条客户评价的每个单词都首字母大写（听起来像“AI生成的”）
- 模糊的社交证明，如“好工具！”而不是“在手动QA上节省了500小时”
- 未定义的内部术语（不要假设用户知道“Deep Eval”或“MCP”的含义）
4. 交互设计规则
动画和交互应增强导航，绝不应分散用户对价值主张的注意力。
应做：
- 使用动效将注意力吸引到主要CTA
- 微妙的悬停颜色变化或发光效果以指示可点击性
- 感觉自然的滚动触发揭示效果
不应做：
- 劫持滚动（用定时动画干扰原生滚动行为）
- 循环背景动画（流星、闪烁卡片、持续运动）
- 将信息隐藏在悬停状态中（在移动端失效，迫使桌面端用户“寻找”）
- 在英雄区创建“链接沙拉”——同时包含Discord、GitHub、Twitter和文档的链接
5. 转化优化
每一个障碍都是放弃点。最小化从到达到达“顿悟时刻”之间的摩擦。
- 演示悖论：“预约演示”按钮要求20分钟承诺。先提供试用——浏览器内提示、交互式沙箱、短视频。
- CTA纪律：每个滚动区域一个明确目标。不要堆叠竞争性CTA。
- 社交证明标准：真实姓名、真实头衔、真实公司Logo（为简洁可黑白处理）。具体成果优于泛泛称赞。
6. 应用此技能
构建新页面时：
- 询问（或确定）公司的生命周期阶段
- 草拟通过五秒过滤器的文案
- 使用清晰度金字塔规划信息架构
- 构建页面（使用
frontend-design进行视觉执行） - 对照垃圾检查清单和
references/detailed-guidelines.md中的贴合与完成度审核结果
审查/批评现有页面时：
- 阅读
references/detailed-guidelines.md获取完整审计检查清单 - 首先评估阶段适配性
- 运行五秒过滤器
- 检查AI垃圾模式
- 审计交互设计和转化流程
- 按严重性组织提供具体、可行的反馈
撰写英雄区文案或CTA时：
- 识别目标受众及其语言
- 使用五秒过滤器作为写作约束
- 优先使用具体术语而非宽泛口号
- 用视觉证据（截图、演示、指标）支持每个声明