yc-web-design-strategy

Web 设计策略

一项战略设计顾问技能，确保网站在考虑外观之前，先向正确的受众按正确的顺序传达正确的信息。

此技能适用于构建新网站、审查现有网站、撰写落地页文案，以及审核页面是否存在常见问题。进行深入审核或构建多版块页面时，请阅读 references/detailed-guidelines.md 中的完整清单。

核心原则

设计策略先于视觉呈现。一个传达错误信息、面向错误受众、顺序错误的精美网站，永远比不上信息清晰的朴素网站。先制定策略，再叠加美学设计（构建时可使用 frontend-design 技能进行视觉呈现）。

---

1. 根据阶段调整设计

在撰写任何文案或代码之前，先确定公司处于生命周期的哪个阶段。这将决定所有设计选择——布局复杂度、截图保真度、CTA 策略和页面深度。

阶段	设计方式	关键信号
发布前 / 早期阶段	营造神秘感。使用淡化或风格化的截图。收集候补名单 / 电子邮件。构建可在一天内完成的单页网站。传达简单、聚焦的信息。	尚无公开产品、团队规模小、尚无营收
增长阶段	提升品牌认知度。使用标志性强调色、详尽的功能介绍、高分辨率产品截图和多个 CTA。	产品已上线、用户活跃、正在迭代以实现产品与市场匹配
成熟阶段	提供丰富信息。设置产品子版块、路线图、安全 / 合规页面和企业级方案。采用克制、权威的配色方案。	已在市场站稳脚跟、达成企业级交易

发布前就模仿成熟公司的精致风格，会造成信任缺口——这会让人期待你无法兑现的完整度。反之，成熟产品却只有单页候补名单网站，则会传递出疏于维护的信号。

---

2. 五秒筛选法

每个落地页都必须在访客到达后的五秒内回答以下四个问题：

1. 这是什么？——使用直白、具体的语言。“聊天应用”，而不是“协同平台”。
2. 面向谁？——明确说明受众。“面向技术项目经理”，胜过“面向团队”。
3. 能带来什么？——说明直接的收益或结果。
4. 为什么值得关注？——它比现状好在哪里？

初创公司承受不起含糊的口号。使用具体术语作为高价值筛选条件——“问题追踪”能吸引工程师，同时筛除不匹配的受众。只有规模庞大的成熟平台，才有资格使用“工作发生的地方”之类的说法。

清晰度金字塔

按紧迫性递减的顺序组织主页内容：

1. 顶点——精准、契合行业术语的价值主张（首屏区域）
2. 拓展背景——随着用户向下滚动，通过视觉证据呈现功能叙述
3. 功能深度——技术文档、次要用例、定价和安全信息（成熟产品应放在独立页面中）

3. 避免“AI 垃圾内容”模式

原创性是产品质量的一个参考指标。如果网站看起来像大模型生成的通用内容，用户也会认为产品如此。请标记并消除以下模式：

视觉垃圾内容信号：

• 紫色渐变和默认投影（“这是 AI 做的”这一信号中最明显的一个）
• 通用便当盒网格（3×2 布局，只有简单图标，缺少产品背景）
• 仿 Google 风格的虚假仪表盘，搭配原色强调内容（红／黄／绿／蓝）
• 漂浮的立方体、抽象 3D 形状，或缺乏产品证据的通用主视觉图形

细节瑕疵（“完善度”层面）：

• 间距不一致、标题中出现双空格、多余句点
• 截图中出现硬编码时间戳或占位数据
• “风格大杂烩”——混用 5 种以上字体样式，破坏视觉层级
• 文字对比度低（浅色背景上的浅色文字、白底上的黄色文字）
• Logo 过小或尺寸不协调

文案垃圾内容信号：

• 用户评价中每个单词的首字母都大写（明显是“AI 生成的”）
• 使用“很棒的工具！”这类模糊的社会认同，而不是“节省了 500 小时的手动 QA 工作”
• 未定义的内部术语（不要假设用户知道“Deep Eval”或“MCP”是什么意思）

---

4. 交互设计规则

动画和交互应增强导航体验，绝不能分散用户对价值主张的注意力。

应该：

• 使用动效吸引用户关注主要 CTA
• 用细微的悬停颜色变化或发光效果表示元素可点击
• 以自然的方式呈现滚动触发的内容

不应该：

• 劫持滚动（用定时动画接管原生滚动行为）
• 循环播放背景动画（流星、闪烁的卡片、持续运动）
• 将信息隐藏在悬停状态后（在移动设备上无法正常使用，在桌面端则迫使用户“到处找”）
• 在主视觉区域堆砌“链接大杂烩”——同时放上指向 Discord、GitHub、Twitter 和 Docs 的链接

---

5. 转化率优化

每一道门槛都会让用户有机会离开。尽可能减少用户到达网站与获得“顿悟时刻”之间的阻碍。

• 演示悖论：“预约演示”按钮意味着要投入 20 分钟。先让用户浅尝体验——提供浏览器内提示词、交互式沙盒或简短产品视频。
• CTA 原则：每个滚动区段只设定一个明确目标。不要堆叠相互竞争的 CTA。
• 社会认同标准：使用真实姓名、真实职位和真实公司 Logo（使用黑白版本，保持简洁）。具体成果优先于笼统赞美。

---

6. 应用此技能

构建新页面时：

1. 询问（或判断）公司的生命周期阶段
2. 起草符合“五秒筛选”的文案
3. 使用“金字塔式清晰结构”规划信息架构
4. 构建页面（使用 frontend-design 进行视觉实现）
5. 根据 references/detailed-guidelines.md 中的垃圾内容检查清单和完善度项目审核结果

评审／批评现有页面时：

1. 阅读 references/detailed-guidelines.md，查看完整的审核清单
2. 首先评估页面是否适合所处阶段
3. 执行“五秒筛选”
4. 检查 AI 垃圾内容模式
5. 审核交互设计和转化流程
6. 按严重程度整理具体、可执行的反馈

撰写主视觉文案或 CTA 时：

1. 确定目标受众及其使用的语言
2. 将“五秒筛选”作为写作约束
3. 优先使用具体术语，而不是宽泛口号
4. 用视觉证据（截图、演示、指标）为每项主张提供支撑