Cursor 设计主管犀利点评初创公司网站

封面

摘要

本期"设计评审"（Design Review）邀请到 Cursor 设计主管 Rio Lou，对 YC 社区创始人提交的多个网站进行逐一点评。Rio 此前是 Notion 的创始设计师，也曾在 Stripe 和 Asana 担任产品设计师。所有参评网站均使用 Cursor 构建或部分构建。Rio 直言不讳地指出了初创公司网站的普遍问题：信息不足导致用户无法理解产品是什么、为谁服务、如何运作；AI 生成代码（Vibe Coding）的典型痕迹——紫色渐变、巨型阴影、糟糕排版和千篇一律的图标；缺乏设计令牌（Design Tokens）导致风格不统一；过度依赖类比（"Cursor for Email""ChatGPT inside your email"）而非直接解释产品功能。同时也肯定了优秀案例——Freya 的语音 AI 演示清晰直观、Finta 的细节处理到位。Rio 核心建议：用用户语言而非自创术语沟通、每次滚动只设一个主要行动号召（CTA）、首屏零缺陷、建立扎实的设计基础令牌让 AI 组合出更好的界面、让用户在注册前就能体验产品。

开场介绍

节目开场，主持人介绍了嘉宾 Rio Lou：Cursor 设计主管，这款领先的 AI 编程工具（AI Coding Tool）全球用户超过百万。此前 Rio 是 Notion 的创始设计师，也曾在 Stripe 和 Asana 担任产品设计师。本次评审的所有网站均由 YC 社区创始人提交，至少部分使用 Cursor 构建。Rio 表示不会留情面。

Crunched：Excel 原生 AI 分析师

首屏问题

Crunched 定位为"AI 重新定义 Excel"（AI Reimagined for Excel），面向企业用户。Rio 和主持人首先注意到 Logo 与 Replit 过于相似。首屏出现纽约城市天际线图片——推测是为了吸引金融从业者，但令人困惑。一个按钮突然跳出式的动画吸引了注意力，但时机不对——用户尚未理解产品就看到 CTA（Call to Action，行动号召），属于"太早了"。

Rio 指出运动效果（Motion）是一把双刃剑：可以抢夺注意力，但也可能分散注意力。首屏（Hero Section）的核心信息模糊，小字标注"Excel 原生 AI 分析师"含义不清。

信誉标志与互动问题

"Used by professionals at"下面列出了 BCG、Harvard 等机构和大学，但 Logo 悬停高亮效果异常——不是连续流式展示，而是在 100% 时突然跳变。Rio 建议应采用连续滚动流（Continuous Stream）。

产品展示混乱

"Transform your workflow with autonomous Excel agent"表述模糊——具体是什么工作流？Demo 动画播放过快，无法看清内容。虽然提到了 DCF（Discounted Cash Flow，折现现金流）、市场模型等金融术语，目标用户可能理解，但 Rio 坦承"我们不是他们的目标用户"。

Crunched 的提问与建议

Crunched 团队提问："希望获得关于整体消息质量和核心板块的建议，目标受众是高端投资银行、投资者和咨询师。网站由 Cursor 构建，非技术部分采用 Vibe Coding。"Rio 指出这正是悬停效果异常的原因。核心问题是消息传达不够——即使考虑到目标用户不是评审者，也应更直接地与目标用户对话，而非使用模糊的高层级表述。常见做法是在营销标题下方添加字面解释的副标题。

如何避免 Vibe Coding 痕迹

主持人提问：AI 有很多默认样式，尤其对设计经验不足的人，如何避免 Vibe Coding 的感觉？Rio 给出关键建议：

  1. 避免粗糙样式：不要使用 AI 常见的设计垃圾（AI Slop）——巨型阴影、紫色渐变、糟糕排版
  2. 审慎处理核心令牌：如果不确定，就用系统字体（System Fonts），让别人替你决定
  3. 建立扎实的设计基础：有了稳健的设计令牌（Design Tokens）和组件体系，AI 就能很好地将它们组合

Velvet：AI 品牌视频

信息严重不足

Velvet 定位为"Create detailed brand videos with AI"，但 Logo 太小且不清晰，首页几乎只有六个词描述产品功能。视频展示了人物或服装不断变换的 AI 生成画面，视觉冲击力强但含义不明——无法区分这是产品演示还是用户拍摄的视频。与 Sora 等视频模型的差异未做说明。

"Book a Demo"按钮位于首屏之下，点击后的页面同样缺乏信息。Rio 评价"几乎以为这是 YC 的网站，因为 YC Logo 比他们自己的更突出"。

Velvet 的提问与建议

Velvet 团队提问："希望确保网站上的文字正确强调产品价值。"Rio 直言关键词是"detailed"和"brand videos"——但什么是品牌视频？什么是 detailed？页面上仅有六个词描述他们做什么，其余全是注册引导。引言来自艺术家，但不应让用户费力推断。核心建议：增加内容，用更多文字说明产品。同时放大 Logo 或直接使用文字商标（Wordmark）。

Clavis AI / Strata：命名混乱与术语堆砌

双重品牌困惑

网站首屏出现"Introducing Strata"，但网站名称是 Clavis AI——两个品牌名让用户困惑。Rio 点评："刚开始为什么要两个名字？"

模板感与干扰过多

整体视觉像旧式 Bootstrap 模板。页面上充斥大量看起来像按钮的元素：Join our Discord、Check out GitHub、Backed by YC、Product of the Day、Start Free、Documentation、Sign Up——Rio 建议消除所有干扰，确保每次滚动只有一个主要 CTA，保持优先级：主消息 → CTA → 信任背书。

灰色方框内容无法查看，视频不会自动播放，需要点击"Tap to Play"。80 年代风格的背景音乐令人出戏。

自创术语无人理解

"Progressive Discovery, Smart Navigation, Precise Execution"——Rio 评价"不确定它们什么意思"。这是 Rio 最反感的设计模式：公司用自己发明的概念和术语说话，没有人能理解。正确做法是用用户的语言描述他们的问题、他们熟悉的世界、以及新方案有何不同。没有人会说"我需要一个渐进发现工具"，但会说"我的 MCP 太多了，不知道怎么管理"。

Clavis AI 的提问与建议

团队担心"首页是否太术语化"（Too Jargony），Rio 确认确实如此。建议：删除所有术语，去掉视频，直接展示所有可连接的 MCP（Model Context Protocol，模型上下文协议）——用视觉方式呈现它们汇聚到一个 Strata Logo。将副标题提升为主标题，统一品牌名称——只选一个名字。

Code Crafters：紫色渐变与品牌缺失

负面开场的消息问题

首屏标语"Stop following tutorials designed for beginners"以否定句开头，不具信息量。Rio 认为保持一定抱负感（Aspirational）没问题，但必须同时清晰传达产品是什么。实际上这是一个通过刻意练习（Deliberate Practice）项目提升工程师技能的学习平台，但浏览数分钟后仍难以判断。

品牌与视觉混乱

公司名称在首屏几乎不可见，Logo 过于通用。投资人照片处理方式不当——裁剪风格不一，有人为修改痕迹，且信息过时（某位标注为某公司，实际已去 Anthropic）。Rio 建议统一处理：去除背景保持白色，或添加黑白滤镜统一风格。

多版本网站风格割裂

从主页点击进入不同页面，设计风格截然不同——从紫色渐变切换到绿色，再切换到黑白，甚至出现信用卡相关页面。"About"页面直接链接到 YC Launch 页面而非自有页面，给人"公司太早期，连自己的 About 页面都没建"的印象。

Vibe Coding 典型特征

Rio 总结该网站具有 Vibe Coding 的所有典型特征，建议减少紫色渐变，打造更定制化的视觉风格，统一所有页面的设计语言。

闪电回合：Slashy、Freya、Finta、Vibe Flow

Slashy：Cursor for Email

Slashy 定位为"Cursor for Email"，将 ChatGPT 能力集成到邮件中。Rio 认为消息传达其实相当清晰，但细节严重缺失——UI 风格像原始 Markdown 输出，视频裁切不当，图片预览尺寸不一致，部分有阴影部分没有，部分有边框部分没有，多层嵌套的方框（Boxes in Boxes in Boxes）。

Rio 特别指出 Slashy 不断借用其他产品名来描述自己——"Cursor for Email""Power of ChatGPT""Best of Superhuman"——而非直接解释自己的功能，这导致品牌认同缺失。截图甚至直接使用了 Notion 的图片。

Freya：当日最佳

Freya 定位为"Voice AI that sounds human for enterprise"——为企业提供拟人化语音 AI。Rio 和主持人实际拨打了 Freya 的电话，体验了其对话能力。Rio 评价"这可能是今天看到的最好的网站"——消息非常清晰，定位明确，如果你运营企业呼叫中心，你会知道这是为你准备的。

亮点：语音演示直观可体验，用户可以直接与 Freya 对话。

问题：滚动劫持（Scrolljacking）扣分——不要劫持用户滚动行为；"Meet the Team"作为主 CTA 不如"Book a Demo"直接。

Rio 建议让演示更加前置突出，将主要 CTA 改为预约演示而非"认识团队"。

Finta：细节出色但层级混乱

Finta 定位为"Magically simplify accounting and taxes"（神奇地简化会计和税务），面向美国 C-Corp、LLC 和 PBC。一个巧妙的设计：页面显示"10 分钟设置完毕，下午 5:12 回归编程"——5:12 正好是当前时间 10 分钟后。Rio 称赞这个细节很聪明。

整体视觉质量较高，细节处理到位——没有展示远距离大截图让人看不清，而是聚焦于产品的具体功能点。但板块层级有些混乱，白色与灰色区域交替出现，卡片略微重叠导致视觉断裂。目标用户（美国 C-Corp 等）信息隐藏在页面底部，应提升至主消息区域。

Rio 评价"如果我是这类产品的潜在用户，这会吸引我"。核心改进：将目标受众信息更突出地展示。

Vibe Flow：Prompt it Visually

Vibe Flow 定位为"Prompt it Visually"——通过提示词可视化生成界面。但首页几乎无法使用：输入提示词后等待许久，系统报错；再试一次仍然失败。Rio 一针见血："感觉很 Vibe Coded"——所有细节无法融合，悬停状态异常（上圆角无下圆角），不同视图风格混乱，有些像是 iframe 嵌入，整体像是"VS Code 的 Vibe Code 版本"。

问题诊断：提示词框下方要求登录才能查看项目，没有提供任何免费体验机会；系统请求 3D 库失败后改用 CSS 模拟 3D 效果，结果呈现为"扁平地球"般的荒谬画面；两个加载旋转器同时出现；建议功能在系统执行任何操作之前就已展示。

AI 产品中的等待体验

Rio 专门讨论了 AI 产品中的等待状态设计：应展示每个正在进行的状态，包括工具调用过程，但需要控制信息密度——不能变成文字墙。关键是引导用户注意力聚焦：显示正在运行的任务、需要确认的操作、用户输入区域，随着进程推进逐步转移焦点。避免空状态加旋转器的模式——Vibe Flow 中预览区循环显示的随机消息实际上毫无帮助，反而分散注意力。

建议：给予用户有限的免费体验次数（如 Rio OS 允许三条免费消息），约束初始演示范围以获得更好的输出质量。

贯穿全场的核心设计原则

用户访问网站时的四个问题

Rio 反复强调，用户访问网站时在问自己四个问题：

  1. 这是什么？（What is this?）
  2. 是为我准备的吗？（Is it for me?）
  3. 它有效吗？（Does it work?）
  4. 它可信吗？（Is it credible?）

网站必须让用户轻松找到这些答案，而不是需要费力推断。

用用户的语言沟通

最致命的错误是用自创术语与用户沟通——"Progressive Discovery""Smart Navigation"这些词对公司有意义，对用户毫无意义。正确做法是进入用户的世界，用他们描述问题的语言，展示旧世界的痛点和新方案的不同。

CTA 优先级

每次滚动只应有一个主要行动号召。过多选择等于没有选择。优先级排序：核心消息 → 行动号召 → 信任背书。不要过早展示价格或要求注册。

避免 Vibe Coding 痕迹的实操建议

  1. 不使用 AI 默认的视觉垃圾：巨型阴影、紫色渐变、糟糕排版
  2. 审慎建立设计令牌（Design Tokens）：如果不确定，就用系统字体
  3. 有了稳健的基础组件体系，AI 组合出来的界面质量会显著提升
  4. 首屏零缺陷——第一印象至关重要
  5. YC 背书不应是最显眼的元素，让用户先关注产品本身

打破模板同质化

Rio 观察到大量初创网站采用完全相同的模板结构：顶部小横幅、两个蓝色按钮、标题+副标题、Logo 墙+产品截图。虽然用户已习惯这种模式、知道该去哪里点击，但如果想建立独特品牌身份和记忆点，就需要跳出这个框架，围绕你想传达的独特性进行设计。简单的纯朴风格同样可行——让用户滚动，让消息和产品成为主角。