How To Stand Out In A World Of AI Designs

如何在AI设计泛滥的时代脱颖而出 Alex Danilowicz展示了Magic Patterns及其全新的MagicOS画布如何将代码作为终极设计媒介，使团队能够通过MCP将产品需求文档（PRD）、图像和Cursor提示词直接输送到可交互的实时原型中。从产品演示转向实际网站评审，Aaron和Alex对Ego、Sentient OS、CeraNovus以及Slashy等初创公司进行了点评，指出了诸如劫持滚动条、不可用的伪输入框、滥用默认字体以及遮蔽核心功能的自动轮播标签页等典型的AI设计缺陷。讨论最后为工程师提供了切实建议，涉及如何培养审美力、及早建立品牌体系，以及全员参与倾听客户反馈。 Magic Patterns已从一个基础的“提示词生成设计”工具转型为MagicOS，这是一个协作式的“Canvas 2.0”；团队可以在此汇集PRD、设计系统和视觉素材，通过Cursor的Model Context Protocol (MCP)等集成生成由代码驱动的多线程交互原型。 (5:00) AI代码生成大幅压缩了下游的前端开发周期，从而将核心产品瓶颈推向了上游——即决定构建什么、可视化边缘状态以及筛选PR审查。 (8:00) 对早期AI初创公司的审查揭示了“氛围编程”（vibe coding）的常见弊病，包括劫持滚动条、不可交互的伪输入框、过度依赖Instrument Serif等默认字体，以及更偏向投资人行话而非解决客户痛点的融资PPT风格落地页。 (18:17) 对于深度集成和本地运行的AI工具而言，前期展现的信任信号——例如显眼的安全性链接、突出的数据隐私FAQ，以及醒目的“免费”或开源标识——是决定访客转化率的首要因素。 (27:57)

In an interview with Aaron Epstein on Y Combinator's *Design Review*, Magic Patterns co-founder Alex Danilowicz argues that generative AI is transforming code into the primary medium for software design while simultaneously flooding the web with superficial 'vibe-coded' interfaces. From Static Mockups to Code-Backed Canvases (0:00) Danilowicz and his co-founder entered Y Combinator (W23) as front-end engineers who struggled with Figma, eventually focusing on their core strength: turning design mockups into working code. After launching in October 2023 when tools like v0 offered only static, single-prompt UI generation, Magic Patterns evolved into MagicOS—an infinite, multi-threaded canvas where agents consume product requirement documents (PRDs), notes, images, and Model Context Protocol (MCP) connections to generate interactive front-end code. Danilowicz argues that software development has traditionally suffered from miscommunication between product managers, designers, and engineers over micro-interactions. By grounding early exploration directly in code and WebGL simulations—such as an interactive 3D theme park generated in few-shot passes—teams can brainstorm and evaluate live UI behavior rather than handing off flat vector mockups. Recognizing Vibe-Coded Design Hallmarks (30:00) Reviewing early-stage startup landing pages, Danilowicz and Epstein identify several telltale indicators of unpolished AI generation. These include pervasive typography defaults such as Instrument Serif and Space Grotesk, excessive em dashes, and randomly bolded text. Epstein compares these styling trends to a dated 1980s kitchen, warning that unchecked AI default aesthetics will look unmistakably stale within a few years. To counteract this homogeneity, Danilowicz notes an early founder regret and advises startups to define a clear brand book and design system before prompting generative agents. Without dedicated brand guidelines, models default to identical stylistic tropes that signal low effort and erode brand distinctiveness. Usability Traps and Conversion Pitfalls (20:00) Generative coding agents tend to generate over-engineered interactive flourishes that look appealing in isolated previews but create severe friction for human visitors. Analyzing landing pages like Ego, Sentient OS, and Slashy, the hosts point out non-functional input boxes that react to cursors without accepting text, disorienting 'scroll-jacking' that hijacks trackpad physics, and auto-advancing feature tabs on timers that desynchronize from a user's reading pace. Drawing on conversion data from Creative Market, Epstein emphasizes that open, permanently visible input forms consistently outperform hidden pop-ups or multi-step flows. Danilowicz warns that major decacorn companies avoid scroll-jacking entirely because it harms conversion rates, noting that AI models often prioritize flashy motion over the practical constraints of busy human visitors. Establishing Trust and Navigational Clarity (32:01) For software that requires high-level system permissions or personal data access, interface design must prioritize immediate trust over clever abstractions. Analyzing CeraNovus and Slashy, Epstein criticizes hero sections filled with high-level buzzwords and pitch-deck audience segments, arguing that users visit landing pages seeking solutions to specific problems rather than corporate categorization. Both hosts highlight proactive trust patterns, such as placing explicit 'Trust and Security' links and data-retention FAQs directly in header navigation bars. For desktop and inbox AI tools, Danilowicz stresses making 'free' pricing explicit and highlighting 'on-device' or 'open-source' architecture upfront. He also cites a structural insight from PostHog: extensive page length and generous spacing serve as subtle meta-signals communicating company maturity and stability. Maintaining Quality at Accelerated Shipping Speeds (43:08) Danilowicz disputes the conventional assumption that shipping quickly requires sacrificing visual polish, asserting that AI code generation has collapsed implementation time and eliminated the historical speed-versus-quality trade-off. However, realizing this advantage requires teams to supply 10 minutes of upfront context—such as design system files and `agents.md` documentation—rather than relying on clever one-off prompts. To maintain high design standards, Danilowicz recommends that engineers cultivate aesthetic taste by engaging with physical art, architecture, and design literature. At Magic Patterns, every team member rotates through the customer support inbox daily, an operational rule that allows engineers to experience user confusion firsthand and eliminate friction in production code immediately. Danilowicz concludes that as frontier labs continue advancing coding agents, runnable code will permanently displace static artboards as the ultimate medium for product design. However, teams that rely on raw, automated outputs without human taste, customer support feedback, and deliberate brand foundations risk producing generic, low-converting software.

Magic Patterns联合创始人兼CEO Alex Danilowicz与投资人Aaron Epstein指出，随着AI让前端代码生成变得极其廉价，软件设计正从静态矢量图转向以可运行代码为核心的上下文协作；但过度依赖AI默认样式的“氛围编程（vibe coding）”常导致动效泛滥、形式主义和转化率崩塌，建立独立设计规范与聚焦真实用户体验才是脱颖而出的关键。 代码作为设计介质与上下文驱动的原型构建 (5:00) 传统设计流程长期受制于产品经理、设计师与工程师之间围绕微交互的低效沟通，而Figma等传统工具充斥着静态画板与复杂的操作门槛。Magic Patterns的演进表明，现代界面探索正转向以可运行代码为载体的多线程画布。通过模型上下文协议（MCP），开发者能够直接将Cursor或Claude Code中的本地上下文、产品需求文档（PRD）和系统架构即时同步至全局协作画布，实现多组件、多状态（如加载、响应式布局、错误处理）的并行推演与即时渲染，甚至在浏览器中通过WebGL生成具备交互能力的3D游乐园仿真场景。 Alex Danilowicz强调，生成式设计的核心竞争力在于前期上下文的注入，而非单次提示词的技巧。企业团队逐步通过设立专职赋能小组，将设计系统、组件规范与技能文档前置接入工具，使AI代理能像读取文件系统一样参考多模态资产批量产出高保真原型。这种基于代码的敏捷原型制作大幅压缩了开发后期的代码审查负担，使团队能够将更多精力投入到早期的产品构思与方案决策中。 “氛围编程”的视觉沉疴与交互形式主义 (18:17) 在对真实初创公司网站的审查中，嘉宾指出了由AI辅助生成的“氛围编程”网站普遍存在的UX硬伤。AI代理在设计时往往受目标函数驱动而过度偏向酷炫动效与复杂动效，例如Ego页面上充斥着类似音频推子的闪烁噪点和巨大的眼球图形，反而淹没了核心价值主张与主要行动号召（CTA）。更严重的问题在于虚假UI的滥用：页面上出现了能够响应光标悬停却无法实际输入的文本框，这种无效的互动不仅未能展示产品功能，反而严重分散了用户的注意力并阻碍注册转化。 除了动效失控，AI生成的内容在视觉风格与排版上也呈现出极易被识别的同质化倾向。Aaron Epstein指出，Space Grotesk与Instrument Serif等字体已被Claude Code等工具设为默认偏好，正如文本生成中过度使用的破折号与随机加粗一样，成为明显的AI生成印记。Alex对此以80年代的厨房装潢为喻，警告当前的AI设计陈规在数年后将显得极为过时，并敦促初创团队尽早建立独立明确的品牌视觉规范（Brand Book），避免全盘接受AI代理的默认排版与样式。 转化率导向的排版、交互与信任机制构建 (20:00) 优秀的落地页设计必须服务于转化率，而非沦为给投资人看的高级幻灯片。针对CeraNovus等网站充斥高阶抽象术语（如“决策基础设施”）以及要求访客自行按企业规模分类的结构，Aaron指出用户只关心具体问题能否解决，而非公司的内部客户画像。在表单设计上，Creative Market的实际测试证实，完全展开、立即可见的输入框转化率远高于隐藏在弹窗或多步骤交互后的形式；而Sentient OS采用的滚轮劫持（scroll-jacking）动效虽在概念上契合使用场景，却破坏了原生触控板操作手感，这也是高估值成熟企业（decacorn）普遍规避该交互的原因。 对于深度接入本地系统或用户邮箱等高敏感权限的AI应用，隐私透明度与信任背书是决定转化的关键生命线。无论是在页面首屏显著标示“完全本地运行”和“开源”，还是在顶部导航栏设置醒目的“信任与安全”及数据留存FAQ，都能有效打消用户顾虑。此外，借鉴PostHog的经验，详实充沛的页面纵深、清晰的功能区块与宽阔的排版间距，能够在潜意识中向访客传递出团队长期稳健运营的元信号（meta-signaling），从而显著提升转化意愿。 打破速度与品质的对立，全员深耕用户感知 (43:08) 针对硅谷普遍认为“好设计必然导致交付缓慢”的偏见，Alex提出反驳：AI编码工具已经极大缩短了编写基础代码所需的时间，团队完全有条件在保持极高发布节奏的同时完成最终20%的细节打磨。忽视设计品质看似节省了短期工时，实则会在后续的用户流失和认知混乱中付出隐性成本。建立审美壁垒并不仅关乎像素级的圆角调整，更关乎通过阅读设计经典与接触高水平艺术来培养对用户体验的敏锐直觉。 为了防止开发流程脱离真实用户，Magic Patterns推行了全员处理客户支持信箱的机制。当工程师亲自面对用户因两个主操作按钮颜色完全相同而找不到分享功能的真实困境时，能够第一时间在代码层面发起修复。Alex呼吁开发者切忌停留在未经打磨的原始AI输出阶段，必须以高度负责的态度对抗浮躁的“氛围编程”，通过持续的一线反馈闭环来锤炼经得起推敲的产品体验。 前沿模型与智能体生态的发展确立了可运行代码作为现代软件设计的终极介质，但工具门槛的骤降并未降低好设计的标准，反而让缺乏打磨的AI陈词滥调暴露无遗。如何在追求交付速度的同时守住审美底线、建立隐私信任并始终以转化和真实人为中心，已成为AI时代产品构建的核心命题。

## Background 本期内容由 Y Combinator 于 2026 年 10 月 22 日在其播客频道发布。节目中，Magic Patterns（YC W23）联合创始人兼 CEO Alex Danilowicz 与 YC 的 Aaron Epstein 共同演示了其最新的 MagicOS 画布与原型生成工具，并针对多家初创公司的落地页展开了深度的“设计评审（Design Review）”，探讨如何在 AI 生成界面泛滥的当下打造出兼具转化力与独特品味的产品设计。 ## TL;DR 节目首先回顾了前端工程师背景的 Alex 历经 9 个月数次转型、最终打造出 Magic Patterns 并通过 MCP 与 Cursor 深度整合的创业历程，展示了在“代码编写末端被极限压缩”的今天，团队如何利用 MagicOS 展开多模态画布与并发原型探索。随后，两人逐一拆解了 Ego、Sentient OS、CeraNovus 和 Slashy 四个真实网站，犀利指出了“氛围编码（vibe coded）”常见的前端败笔，包括无法打字的假输入框、引发反感的滚轮劫持、滥用 Instrument Serif 等默认字体、晦涩的投资人黑话以及无人点击的多标签轮播。最后，Alex 结合全员轮值客服的实战经验，强调追求精细打磨并不会拖慢交付节奏，代码仍是连接视觉设计与生产环境不可动摇的核心载体。 ## Atmosphere & style 整场对话洋溢着硅谷工程师特有的务实与坦诚，既有对创业踩坑历程的轻松自嘲，又有对产品交互细节极其挑剔的专业洞察。在网站评审环节，两位嘉宾毫不留情地现场吐槽各种看似酷炫实则损害转化的“AI 编程味”坏习惯，节奏明快、针针见血；而探讨到品牌系统与用户同理心时，又展现出对底层设计哲学的深思熟虑，让听众在直观幽默的拆解中感受到一线产品打磨的严苛标准。 ## Bulletin - `05:59` Magic Patterns 推出整合代码 Agent 与多模态探索的 MagicOS 画布平台，支持通过 MCP 协议将 Cursor 等本地开发环境与在线视觉协作画布打通，以多智能体并发形式加速前端构思。 - `08:21` AI 辅助编程正极限压缩软件开发的末端编码阶段，促使团队将更多精力前置投入到产品需求探索、边界条件推敲与真实用户体验设计上。 - `21:40` 当前初创公司网站普遍充斥“氛围编码（Vibe Coded）”硬伤，诸如无法输入的假组件、滚轮劫持（scroll-jacking）动效以及被多级标签页隐藏的核心功能，均在显著拉低实际转化率。 - `27:57` 面对端侧 AI 等高敏感度工具，隐私合规与透明度已成为获取用户下载的首要壁垒，品牌需在落地页首屏建立信任机制而非过度依赖投资人层面的抽象商业黑话。 ## Key takeaways - `03:01` 创业初期应专注于创始人最擅长的领域；Magic Patterns 历经 9 个月多次转型后，靠满足“10 个真正高频使用且付费的真爱粉”确立方向。 - `05:59` MCP 协议正重塑开发工作流，让开发者无需在本地运行环境与视觉分享之间反复折腾，能够直接将 Cursor 等智能体投射至统一协同画布。 - `08:21` 由于代码与 PR 生成被 AI 极限压缩，产品竞争的重心已从交付速度转移至更前期的头脑风暴与边界场景推敲。 - `10:00` 画布模式并非适合所有阶段的新手，采用类似 MagicOS 的渐进式呈现与多上下文整合工作流能够更好地平衡极客与普通用户的需求。 - `15:00` 在设计探索阶段先花 10 分钟引入现有的规范、图片与 PRD 上下文，长期来看能为团队省下数小时的重复沟通成本。 - `20:00` 直接在页面展示敞开式原生表单的转化率远高于要求用户二次点击弹窗的设计，默认交互越简单转化越好。 - `21:40` 指针显示为手型却无法输入的假组件和画蛇添足的“Scroll”提示，是典型的 AI 生成落地页硬伤，会严重分散用户的核心 CTA 注意力。 - `23:59` 滚轮劫持动效会破坏用户对滑动的肌肉记忆并增加操作挫败感，百亿美元级企业极少采用这种会损害转化率的噱头动效。 - `27:57` 对于本地模型及读取隐私数据的端侧 AI 而言，“开源”与“纯端侧不联网”的安全背书是转化率的核心决定因素。 - `30:00` 滥用 Instrument Serif 字体、无规则加粗以及高频使用破折号已成为 AI 生成内容的刻板标记，初创团队应尽早沉淀定制化设计系统以规避同质化。 - `32:01` 落地页应针对解决终端用户的具体痛点展开，切忌将其做成面向投资人的抽象黑话商业计划书（Pitch Deck）。 - `36:59` 用户从来不会主动点击自动轮播标签页（Tabs），将核心卖点藏在次级标签后极易造成关键信息被完全忽略。 - `40:00` 社交证明（Social Proof）具有强烈的受众锚定效应，如果背书全来自 VC 和创始人，会误让通用型工具看起来像特定圈子的垂直产品。 - `43:08` 工程师提升审美与产品感最有效的方法是实行全员轮值客服，直面真实用户在使用混乱界面时遭遇的真实折磨。 - `45:00` 现代 AI 辅助编码已经打破了“精细设计必然拖慢交付”的传统权衡，极致的代码 Agent 反而为团队争取到了追求高品质设计的空间。 ## Detailed walkthrough ### `00:00` Magic Patterns 的诞生与早期探索 Aaron Epstein 邀请到了 Magic Patterns（YC W23）的联合创始人兼 CEO Alex Danilowicz。作为一款 AI 设计工具，Magic Patterns 能够让用户在几分钟内把脑海中的点子转化成真实的、由代码驱动的可交互原型（interactive code-backed prototype）。谈及创立初衷，Alex 表示他和联合创始人本质上都是前端工程师而非专业设计师，因此设计领域一直让他们感到棘手。当他们入选 YC 训练营时，合伙人给出的建议是专注于自己擅长的事。对他们而言，最擅长的就是将 Figma 视觉稿实现为代码，而 Magic Patterns 正是他们梦寐以求的产品——一个专门为像他这样不精通 Figma、却不得不在创业中承担海量设计工作的非设计师打造的直观工具。 Magic Patterns 是最早涉足“文本提示词生成设计（prompt-to-design）”的先驱之一。Alex 回忆，他们在 2023 年 10 月正式上线该产品时，市面上唯一的同类竞品是 v0。在那个模型能力尚不完善的阶段，甚至连实时聊天交互（chat）都无法实现。用户输入一段 prompt，模型直接吐出一个静态设计，没有任何能够与智能体展开多轮往复沟通的交互空间。如今，产品经理、创业者以及专业设计师都开始依赖 Magic Patterns，无论是用于低门槛沟通想法、快速制作交互原型，还是导出可直接上线生产环境的可用代码。 - **上线时间**：2023 年 10 月推出首版，当时市面上仅有 v0 这一款类似工具。 - **早期技术限制**：当时大语言模型无法支撑多轮对话界面，交互形态仅仅停留在“单次提示词输入 -> 静态设计生成”。 ### `03:01` 九个月的连续转型与寻找真爱用户 在创立 Magic Patterns 之前，Alex 和联合创始人最初申请 YC 时的项目完全不同——那是一款短信分析工具（text message analyzer）。该工具可以统计用户群聊中最常用的词、最活跃的群组，甚至评选出“跨群聊发送的最搞笑发言”。尽管当时靠这个项目获得了微薄收入并拿到了 YC 的门票，但入驻 YC 后，合伙人明确告诉他们：“这是一个还可以的点子，但我强烈建议你们去做自己极度熟悉的事情。”于是，他们果断放弃原方向，回到前端工程与 Figma 代码还原的老本行，展开了漫长痛苦的探索。 在接下来的九个月里，他们连续经历了多次转型（pivot）。他们曾尝试打造组件库编辑器（component library editor），做过“增强版 Storybook”（Storybook on steroids），还开发过一款 Chrome 插件，允许开发者将本地 localhost 页面一键发布到公网上用于收集反馈——这个功能后来也成为了 Magic Patterns 的核心能力之一。在这段频繁受挫的迷茫期，Alex 深刻领悟了 Paul Graham 的经典创业信条：找到 10 个真正深爱你的用户。在此前所有的尝试中，他们从未拥有过 10 个愿意持续付费且高频使用的“真爱粉”。然而，当 Magic Patterns 最终成型上线后，这批忠实用户迅速聚集了过来。 > Alex Danilowicz 回忆那段转型过程时强调：“None of those pivots, we didn't have any 10 users that really loved us. Where love is defined as they're paying you and they're using you.” ```mermaid flowchart TD accTitle: Magic Patterns 转型历程 accDescr: 展示创始人从最初短信分析工具到最终确立 Magic Patterns 产品的演进流程 subgraph G1["YC 入营阶段"] A["短信分析工具<br/>(Text Message Analyzer)"] A -->|"YC 合伙人建议<br/>做极度熟悉的方向"| B["聚焦前端工程与<br/>Figma 代码转化"] end subgraph G2["9 个月的摸索与试错"] B --> C["组件库编辑器<br/>(Component Library Editor)"] C --> D["增强版 Storybook"] D --> E["Localhost 一键公网发布<br/>Chrome 插件"] end subgraph G3["破局爆发"] E -->|"整合核心反馈机制"| F["Magic Patterns<br/>(Prompt to Code)"] F -->|"达成真爱标准"| G["迅速获得 10+ 付费且高频使用的忠实用户"] end ``` ### `05:59` 拥抱 MCP：将 Cursor、Claude Code 与画布无缝连接 面对设计工具每隔半年就迭代升级一次的激烈竞争环境，Alex 认为唯一保持领先的方式就是贴近用户与快速适应新工作流。他将客户奉为“宗教”，坚持每天与用户深度交流，并根据工程师日常工作习惯的变迁果断重塑产品形态。约一年前，他们在内部黑客松里顺手做了一套模型上下文协议（Model Context Protocol，即 MCP）支持。起初团队并未对此抱太大期望，但随后 MCP 的调用量呈爆炸式增长，一跃成为用户与 Magic Patterns 产生交互的最主流途径之一。 在现场 Demo 环节，Alex 重点展示了他们内部疯狂“吃自家狗粮”（dogfooding）的真实场景。为了给 Magic Patterns 设计全新的加载指示器（loading indicator），团队正在画布上探索各种方向，包括电影《机器人总动员》（WALL-E）中的 EVE 形象、经典游戏《传送门》（Portal）的风格等。画布支持全局对话（global chat），用户可以多选不同的设计稿，直接输入指令，比如“融合 Claude Code 图标与 Grok 机器人的灵感生成全新风格的加载指示器”。 不仅如此，Alex 直接切屏到 Cursor 演示了 MCP 的打通效果。用户在 Cursor 中键入 prompt（如“添加一个我当前智能体的 ASCII 艺术版本”），后台的 MCP 就会实时在 Magic Patterns 的画布上同步生成对应的视觉资产。当前许多企业用户在 Cursor 或 Claude Code 中积累了大量的 PRD 文档、会议纪要等上下文，MCP 允许他们将这些已有的代码环境与上下文无缝投射到视觉画布上，彻底解决了“AI 敲出了 localhost 原型却无法分享给团队看”的尴尬痛点。 > Alex Danilowicz 在阐述团队文化与敏捷性时直言：“I've said this before on a video, like customers are our religion, talking to them every single day, and then also adapting to new workflows.” - **内部强行狗粮测试**：团队强制要求自身产品必须好用到自己会主动选用，若成员不愿用就会立刻反思产品缺陷。 - **多智能体与多人协同**：Cursor 派发的设计任务会作为一个独立的 Cursor Agent 形象实时出现在 Magic Patterns 画布上，并与真人同事并肩协同编辑。 ### `08:21` 开发末端压缩：进入全方位头脑风暴的 MagicOS 通过 Cursor 触发的指令直接在 Magic Patterns 画布上完整生成了一个专属页面，条理清晰地穷尽了所有探索方向。画布上不仅给出了 Claude Code 风格的 ASCII 界面，还系统化展示了不同配色方案、不同屏幕尺寸适配、甚至是“更像头盔还是更像枕头”的外观细节探索。Aaron 指出，在创意灵感初期，最难的就是把杂乱无章的发散点子组织好；而 Magic Patterns 能够自动枚举出所有的体态、颜色和智能体状态，收拢在一个统一的视图里，极大加快了决策与推进速度。 Alex 深刻剖析了当今软件工程的变化：过去一年里，软件开发的“末端阶段”（the end stage）已经被 AI 彻底压缩。编写代码和生成 PR 的速度快如闪电，甚至快到了人工来不及 Review 的程度。正因为末端被极限压缩，团队反而拥有了更多时间退回到前端去思考：到底该做什么？不该做什么？以及在不同边界条件下的交互是什么？例如在 MagicOS 画布上，团队不仅可以探讨像 LED 风格的界面设计，还能清晰审阅加载状态、错误状态以及多智能体同时操作一个文件时的视觉逻辑。 整个 MagicOS 就如同一块无边界的艺术画板（art board），用户可以随意拖入设计图、需求文档（PRD）或者系统说明。最关键的是，与市面上需要等待单一对话框生成完毕的 AI 设计工具不同，MagicOS 彻底打破了“单线程阻塞”的限制。用户可以在画布上开启无数个并发线程，同时触发多种不同的设计变更与 Agent 运算，极大解放了设计与工程团队在创意探索初期的生产力。 > Alex Danilowicz 总结了开发范式的转移：“Totally, because I think what's changed about software development in the last year especially is the end stage is so compressed now. It's just moving at the speed of light. There's too many PRs to review. And so as a result, we can spend more time actually brainstorming, thinking about what to build and what not to build...” ### `10:00` 从单聊天流到 MagicOS 画布与明信片生成 Demo Alex Danilowicz 介绍了 Magic Patterns 的演进历程，提到他们使用画布（Canvas）模式已有大约两年时间。当前展示的版本是所谓的“Canvas 2.0”。团队目前正在招募一名设计师，核心难点在于新手引导体验的打磨，即如何通过“渐进式呈现（progressive disclosure）”让用户在合适的时间点意识到自己既可以使用单一的对话流，也可以利用灵活的画布。Alex Danilowicz 强调：“One of the initial learnings that we had is like a canvas is not necessarily for everyone.”（我们最初学到的教训之一就是，画布并不一定适合所有人。）为了摆脱传统像 Figma 那样堆满工具栏的画布刻板印象，他们特意将新版本命名为“OS 平台（OS platform）”，旨在将其打造为容纳所有上下文的工作系统。 在实际功能演示中，Alex Danilowicz 展示了如何利用上下文生成系列明信片。Magic Patterns 在全球各地举办社区聚会（Magic Patterns Meetups），例如他在哥伦比亚麦德林（Medellin）举办活动时，发现当地有高频用户，甚至有大学在课程中教授 Magic Patterns。为了给参与者制作专属明信片，他将麦德林、新加坡（Singapore）、纽约自由女神像（New York）以及多伦多（Toronto）的活动照片和文字说明直接丢进画布。随后他输入提示词“rubber stamp travel notes field poster”（橡皮图章旅行手记野外海报），让 AI Agent 抓取画布上的上下文，一次性并行生成了这四座城市的定制明信片。 ```mermaid flowchart TD accTitle: MagicOS 画布生成明信片流程 accDescr: 展示将图片、文本和提示词输入画布后，AI Agent 如何一次性生成多城明信片并支持批量更新 subgraph ContextInput ["上下文输入（画布）"] A["多城现场照片<br>(麦德林 / 新加坡 / 纽约 / 多伦多)"] B["活动笔记与说明<br>(如 5月17日 新加坡聚会)"] C["风格提示词<br>(橡皮图章旅行手记海报)"] end subgraph AgentAction ["Agent 处理"] D["Magic Patterns AI Agent<br>解析画布上下文与文件系统"] end subgraph OutputAndIterate ["生成与迭代"] E["一次性生成 4 款明信片设计"] F["针对单一城市微调<br>(如增加感谢致辞)"] G["一键将修改批量同步至所有城市"] end A --> D B --> D C --> D D --> E E --> F F --> G ``` 随后，Alex Danilowicz 选中新加坡的活动说明（记录了 5 月 17 日的聚会细节），要求 AI 生成包含感谢用户参会文案的设计。当针对新加坡版本的样式迭代满意后，可以将改动直接一键同步至其他所有城市，完全省去了重复制作的麻烦。 - 团队内部跨职能使用：在 Magic Patterns 内部，运营团队和销售团队均在使用该工具，例如其 GTM（Go-to-market）人员正是用它来制作明信片；以往不擅长使用 Figma 的人员通常只能把这类视觉需求外包。 - 开放性与多模型兼容：系统支持直接导出至 Figma 进行高精细度调整，或导出到各类代码 Agent 中。Alex Danilowicz 指出，相比竞争对手（如仅绑定 Anthropic 模型和 Cloud Code 导出、无法对接 Figma 的 Claude Design），Magic Patterns 坚持模型无关与功能无关，支持灵活集成。 --- ### `15:00` 上下文工程建议与《过山车大亨》3D 巧克力主题公园 在探讨如何写出更优质的提示词时，Alex Danilowicz 指出当前大公司纷纷设立“AI 赋能团队（AI enablement teams）”，核心手段是利用技能（skills）和 `agents.md` 等上下文文件引入企业特有的业务与设计规范。他强烈建议所有使用者在设计初期做好准备：“And that's what I always recommend first is like spend the 10 minutes to bring in your existing context. It'll save you hours in the long run.”（我首先总是推荐这一点：花 10 分钟引入你现有的上下文，从长远来看能为你省下数小时。） 为了说明代码作为输入与输出载体的上限，Alex Danilowicz 展示了一个基于《过山车大亨》（RollerCoaster Tycoon）风格生成的 3D 巧克力主题公园。在项目早期，模型甚至连一个输入表单都无法正确生成，往往只返回一个下拉菜单；而如今，借助浏览器端 WebGL 渲染，用户可以直接一键生成具备完整交互的 3D 虚拟场景，甚至能拉近镜头观察微型行人在园区走动。该场景的底层是名为“3D theme park”的设计系统组件库，轨道、巧克力扭扭乐游乐设施（chocolate bar twister ride）和人行道均作为代码组件被封装。更新场景只需输入类似“去掉树木，全部换成棒棒糖，并增加更多巧克力河流”的提示词即可。 - 设计流程维度的跃迁：传统 UI 设计长期局限于二维平面，跨团队沟通微交互（interaction）成本极高；而当下通过组件与代码直出交互式场景，标志着高保真全交互设计的新趋势。 - Y Combinator 申请提醒：节目穿插提到 YC 新批次正在开放申请，强调创业者无论处于多早期阶段都应尽早尝试。 --- ### `18:17` 网站评审 Site 1：Ego 落地页转化与“氛围编码”问题剖析 Aaron Epstein 与 Alex Danilowicz 开启了对各类“氛围编码（vibe-coded）”网站的实战评审环节，第一家受审网站是名为 Ego 的公司。该网站的标语写着“Agents are machines. We make them people.”（智能体是机器，我们让它们成为人），并自我定义为打造与真人无异的个人智能体的应用 AI 研究实验室。 在审视首屏时，Alex Danilowicz 立即指出许多团队在设计落地页时容易陷入误区：“Here's the thing that I think people miss about landing pages in general. The real metric to track is does it convert?”（我认为大家在设计落地页时普遍忽视了一点：真正需要追踪的指标是它是否能转化。）两人发现首屏严重缺乏无障碍设计考量，不仅行动号召（CTA，写着 Ronin）极其隐晦，访客在第一眼完全不知道该往哪里点击，下意识的反应只能是盲目向下滑动。Alex Danilowicz 分享了自身经验：过去很多“氛围编码”工具的落地页都会在首屏放一个提示词输入框引导用户立即上手，Magic Patterns 曾为了追求所谓的视觉创意把输入框拿掉，结果产品转化率彻底暴跌，这让他们深刻体会到行业惯例背后的实用价值。 随着页面滚至中途，Aaron Epstein 吐槽自己看了一半依然弄不明白“这到底是什么产品、究竟是给谁用的”。直到页面很深的位置才出现关键描述——“带有性格、记忆与自主意识的语音智能体（voice agent）”，并附带加入等待名单（waitlist）的按钮。两人一致认为这部分内容才应该是网站的真正起点。此外，页面中的主 CTA 甚至被设计了冗余复杂的交互手势才能触发，Alex Danilowicz 调侃这正是典型 AI 生成代码的通病：智能体总是偏爱给各种不必要的地方堆砌花哨的交互动效。 ### `20:00` 网站 1：Ego 与过度动效的“AI 编码味” Aaron Epstein 与 Alex Danilowicz 继续深入分析初创公司 Ego 的网页设计。Aaron Epstein 结合自己在 Creative Market 的实战经验指出，很多团队喜欢通过多层弹窗或过度动效来藏匿输入框，但数据证明这种做法会损害转化：“我们在我之前的公司 Creative Market 做过测试：当输入表单直接在页面上展开且清晰可见时，其转化率远高于要求用户点击后才弹出窗口或跳转到表单页面的做法。”他强烈建议只要条件允许，就应该默认把输入框敞开，让用户能够直接输入。 Alex Danilowicz 赞同这一观点，并直言 AI 编程智能体在设计前端时经常会“画蛇添足”，过度堆砌动效和花哨的位移，但它们忽略了现实中用户的行为习惯：“AI 智能体常常会因做出有趣的动效和过度动画而获得奖励，但人类用户根本不会在你的网站上停留太久，他们都在赶时间。”在 Ego 的页面上，布满了闪烁的光斑，甚至还有类似音乐推子（fader）的组件在跳动，让整个界面异常混乱。虽然这种暗黑加红色的调性营造出类似 80 年代复古电子游戏的氛围，但实际的可读性极差。 ```mermaid flowchart TD accTitle: 表单设计对转化率的影响路径 accDescr: 对比传统直接展示表单与过度动画弹窗两种模式下的用户体验与转化差异 subgraph Bad["常见 AI 编码误区：过度交互与弹窗"] B1["闪烁动效 / 假组件"] --> B2["需要点击才弹出的复杂表单"] B2 --> B3["用户分心 / 挫败感倍增"] B3 --> B4["极低转化率与高跳出率"] end subgraph Good["推荐方案：直截了当的输入体验"] G1["默认展开的原生静态输入框"] --> G2["即时输入邮箱 / 核心信息"] G2 --> G3["聚焦核心 CTA (加入候补)"] G3 --> G4["转化率大幅提升"] end ``` ### `21:39` 无法输入的假组件与“Scroll”提示的破绽 浏览过程中，两人发现右侧有一个看似输入框的组件，但用鼠标交互时却根本无法键入任何字符。Alex Danilowicz 当场指出这是极其典型的“AI 编码味（Vibe-coded smell）”——鼠标指针显示为可交互状态，但代码底层却是死的，这会给用户带来巨大的困惑与挫败。Aaron Epstein 分析称，现在 AI 智能体确实有能力直接在页面里嵌入真实、可直接试玩的产品交互原型，这本应是非常惊艳的展示手段，可一旦做成“似真似假的假 UI”，就会演变成对用户的误导。 Alex Danilowicz 进一步强调了消除这种破绽的商业意义：“我觉得探讨‘为什么网站上有 AI 编码味会影响转化’非常重要。正是因为用户全被这个无法打字的输入框分散了注意力，从而彻底忽略了页面最重要的核心转化行动（CTA），也就是这里的‘加入候补名单（Join the waitlist）’。” 此外，页面底部甚至还专门写了一行“Scroll（向下滚动）”。Alex Danilowicz 吐槽这纯属多此一举：“我个人想不到人类在什么情况下会觉得有必要在这里写上‘Scroll’，因为向下滚动本就是用户的下意识行为；相反，我经常看到 AI 智能体总喜欢生硬地去‘催促’用户做操作。”两人总结，Ego 页面虽然顶部的眼球动画和复古人像极具视觉张力与冲击力，但右上角的按钮仅写着“Ronin”，既没交代产品到底是什么、Ronin 是模型还是功能，也没交代核心 CTA，导致用户看到半路依然一头雾水。 - **伪交互的代价**：无法键入内容的假输入框严重干扰注意力，稀释了“加入候补”这一核心转化动作。 - **生硬的提示**：页面标注“Scroll”字样被指出是 AI 智能体生搬硬套用户引导的典型坏味道。 - **信息不透明**：顶栏 CTA 仅展示神秘的“Ronin”字样，产品定位不清导致访客认知脱节。 --- ### `23:59` 网站 2：Sentient OS 与令人抓狂的“滚轮劫持” 接着他们切换到第二个评审案例——Sentient OS。该网站宣称提供“让你的 Mac 拥有自我意识的端侧大模型（On-device LLM）”，能够理解用户的所有生活轨迹，并通过计算机控制技术（Computer use）主动帮用户完成工作。页面正中央展示了一台打开的 MacBook 笔记本电脑模型，周围有各种信息流汇入。然而，当 Alex Danilowicz 尝试向下滚动时，页面触发了强烈的“滚轮劫持（Scroll-jacking）”动效——电脑屏幕随着滚轮缩放、盖上，中间的动画由于灵敏度不匹配而极难精准把控。 Alex Danilowicz 对此表达了强烈的反对，他直言头部企业绝不会采用这种设计：“我从没见过任何一家百亿美元的独角兽公司（Decacorn）会去搞滚轮劫持。为什么不做？因为这不仅无法提高转化率，反而会让用户感到极度沮丧。” Aaron Epstein 同样呼吁所有前端开发者立即抛弃这一做法。他解释道，用户在日常操作中已经对鼠标滚轮或触控板的滑动阻尼形成了极强的肌肉记忆与精度预期，一旦页面劫持了滚动行为（比如手停了页面还在飘、或者强制锁帧），就会严重打破操作的自然感。尽管如此，Aaron Epstein 也肯定了这个动效背后的叙事理念：电脑盖子合上代表“你在睡觉”，随后电脑在夜间自动完成全部工作，待用户醒来盖子重新打开，呈现已处理好的任务列表。他评价道：“动画最理想的境界绝不是为了动效而动效，而是动画本身能切实强化你试图传达的核心观点，以一种静态图文无法企及的方式完成信息传递。” - **滚轮劫持（Scroll-jacking）的弊端**：打破原生触控板操作精度，增加操作挫败感，降低访客转化率。 - **叙事型动画的正确打开方式**：通过合盖（夜间休眠）、开盖（任务完成）的隐喻精准表达产品“夜间后台全自动工作”的核心价值。 --- ### `27:57` 淹没的 CTA 与端侧 AI 的“隐私与信任”壁垒 当视线转移到该页面的转化目标时，Alex Danilowicz 发现主推的“Download for macOS”按钮带有非常夸张的荧光渐变与巨大投影。他提醒道，虽然这成功抓住了眼球，但“过度的渐变色加上超大弥散阴影”同样是当前 AI 智能体生成落地页时的标志性套路。更致命的问题在于页面下方的安装指令与次级入口（如 Homebrew 安装命令与 GitHub 链接）字号极其微小，在倾斜的模型展示角度下几乎无法辨识。 谈及文字排版，Alex Danilowicz 特别点名了“免费（Free）”这一最具吸引力的词汇：“‘Free’这个词在定价页面上被做成巨大字号是有原因的。如果有什么重要信息需要传达给用户，它就不应该受制于用户的观看角度，而应该做到显眼得不能再显眼。” 除了视觉层面的瑕疵，Aaron Epstein 提出了针对端侧 AI 产品的核心商业洞见：像 Sentient OS 这种声称在本地掌控用户全生命周期数据的软件，隐私与信任构成了其能否立足的最大门槛。虽然页面底部放置了 FAQ 解答数据用途，但在 LLM 时代这还远远不够。Aaron Epstein 旗帜鲜明地预言：“我认为，只有那些真正全力以赴、在建立用户信任与隐私安全上做到极致的产品——主动讲清楚会访问什么数据、如何使用、保留策略是什么、是否足够安全——才能在获取用户下载、试用以及口碑传播上赢得最终的胜利。” Alex Danilowicz 深表赞同。他透露自己当初申请 Y Combinator 时的创业项目正是一个开源的本地短信分析工具，同样需要读取用户的 iMessage。他分享了当时的获客秘诀：“我们学到的一点是，人们真正关心的只有一件事：在官网主视觉区域（Hero section）打上‘开源’与‘完全运行在端侧’，向用户传达互联网根本不会触碰到你的数据分毫。”相比之下，Sentient OS 仅仅在一长串介绍中用粗体标出几个断开的词汇，并没有真正把端侧隐私带来的安全感做成核心抓手。 ### `30:00` AI 生成痕迹：字体、破折号与“复古厨房”陷阱 在审视 Sentient OS 网站的过程中，两人聚焦于那些出卖了“AI 编写”或“AI 设计”的细微特征。Aaron Epstein 指出，AI 写作的经典特征之一就是会莫名其妙地把句子中的某些词加粗；而在排版上，字体更是直接暴露出生成痕迹。他们查看了网页代码，发现这款网站使用了当前极度泛滥的字体组合。Aaron 调侃道：“Space Grotesque 总是那款……哦，Instrument Serif 是另一个。Claude Code 特别喜欢 Instrument Serif，这太搞笑了。”这种现象让他联想到写作里的破折号（em dash）——破折号本身并没有错，任何人都可以用，但一旦人们在文本中看到它，就会条件反射地怀疑：“哦，他用了 AI。” ```mermaid flowchart TD accTitle: AI Design Defaults Trap accDescr: 展现从依赖 AI 默认模版到产出过时设计的恶性循环，以及建立设计系统的正确路径 subgraph Trap["AI 默认陷阱"] A["依赖 AI Agent 默认输出"] --> B["千篇一律的元素: Instrument Serif / Space Grotesque / 随机粗体"] B --> C["即刻流行，迅速过时: 像 80 年代厨房"] end subgraph Solution["正确设计路径"] D["早期建立 Brand Book"] --> E["定制独特的 Design System"] E --> F["经久不衰的 Timeless 设计"] end ``` Alex Danilowicz 顺着这个话题打了个生动的比方：流行趋势往往在当下很难被身处其中的人察觉，这就好比“你看到一间 80 年代设计的厨房，会觉得它过时难看，但在 80 年代当时，它大概看起来现代极了”。AI 自动生成的这些设计元素也是同理，当前虽然随处可见，但很快就会显得陈旧。Aaron 强烈建议创业者们：“我会鼓励大家，尽量克制住直接使用智能体设计时吐出的默认配置或默认字体的冲动，去使用一些对你来说更独特、能传达你想表达内容的东西，而不是直接照搬所有人都在用的玩意儿。我认为这是打造更具持久生命力（timeless）设计的途径。”Alex 对此深表赞同，并坦言这也是他创立 Magic Patterns 早期感到后悔的地方——没有尽早沉淀一套品牌手册（Brand Book），把品牌调性、专用字体和设计系统明确下来。 - AI 写作与设计的高频默认特征：随机单词加粗、频繁使用破折号（em dash）、标配使用 Space Grotesque 与 Instrument Serif 字体。 - 建议：尽早制定设计系统（Design System）与品牌规范，避开主流 AI 工具的开箱即用审美。 --- ### `32:01` 案例三：CeraNovus——满屏行话却不知所云的“投资人 PPT” 切换到第三个网站 CeraNovus 时，两人立刻被满屏晦涩的商业黑话困扰住了。首页的标语写着“机构智能与决策基础设施”（Institutional intelligence and decision infrastructure），紧接着又自称是“你的 AI 运营合伙人（AI operating partner）”，宣称能读取公司产生的所有记录，找出无人追踪的运营低效，并在问题尚处萌芽期时发出预警。Alex 读完一头雾水，直言文案不仅过于泛化，还充满了令人困惑的定义：“我不知道这算不算我需要的东西……它既是决策基础设施，又能做我公司想要的一切，这到底是什么意思？”整个首屏（above the fold）留白巨大，视线内几乎全是一片空白，而在极度靠上的位置则排列着一行动辄全大写的微缩字体（small all caps），这正是典型的“氛围编程（vibe coding）”气味。 更让人抓狂的是网站呈现内容的方式。页面上写着“无需安装，无访谈环节”，Alex 忍不住吐槽：“我本来也没预设这玩意儿需要安装啊！什么叫哪里都无需安装？难道我是在买硬件吗？”往下滚动，网站让访客选择自己的身份：是大型企业（Enterprise）、中端市场（Middle Market），还是私募股权（Private Equity）甚至是“接续基金”（Continuation Vehicles）。Alex 指出，这种设计完全是站在公司自身立场自说自话，而不是站在用户视角解决问题：“用户根本不在乎你的目标客户是谁，用户在乎的是自己有一个亟待解决的问题，以及 CeraNovus 能否帮我解决。你这是在逼我思考自己属于哪一类，这太累人了。” ```mermaid flowchart LR accTitle: CeraNovus Audience Mismatch accDescr: 对比 CeraNovus 网站当前的投资人路演视角与真实用户所需的实际内容 subgraph WrongFocus["错误：路演 PPT 视角"] A["抽象定义: 决策基础设施"] B["自嗨分类: 我们的目标客群分类"] C["空洞承诺: 4 项保证但无产品截图"] end subgraph RightFocus["正确：真实用户视角"] D["明确具体功能与使用场景"] E["痛点与解决方案直接对应"] F["可信的同类用户证言 Social Proof"] end ``` Aaron 指出，这种现象在 YC 的创业申请和氛围编码生成的网站中极为普遍：“这几乎就像是给公司做了一份向投资人推介的幻灯片（pitch deck）一样……或者说模型潜意识里觉得初创公司的目标受众就该是投资人。”但真实的用户来到网站，需要看到的是具体的产品形态、为什么有价值、能帮自己解决什么痛点，以及同行使用该产品的社交认同（Social Proof），而不是看一份罗列“四大保证”的商业计划书。 不过，Aaron 也注意到了该网站的一个反常细节：其顶部导航栏竟然放了一个名为“信任与安全（Trust and Security）”的直达链接，并在内部详细解答了数据收集范围、数据存储位置等合规与隐私 FAQ。Aaron 评价道，在传统的网站主导航中很少见到把安全合规放得这么高，但在用户极度担忧数据泄露的 AI 时代，这很可能会演变成一种全新的行业标准设计模式。最后，Alex 建议所有创始人：“在早期一定要去找你的真实用户，问他们：‘你觉得这个网站怎么样？’尽量不要暴露这是你自己的网站，因为他们往往会因为客气而不说真话。” --- ### `36:59` 案例四：Slashy——别指望用户会主动点击你的轮播标签页 随后，两人打开了第四个网站 Slashy。其产品定位非常明确——“你的智能收件箱”（Your intelligent inbox），能够模仿用户语气起草邮件回复、安排会议并自动跟进。但首屏的 Logo 却让 Alex 略感困惑，其图形看起来像“S / Ashy”，如果不是因为顶级域名叫 slashy.com，很容易被误读。尽管如此，Alex 赞扬该网站相比上一个案例有巨大进步，至少用户在扫视的一瞬间就能看懂：“我知道这是一款类似于 Superhuman 的产品，是一个 Gmail 的替代品。” 然而，网站在具体展示上却踩了交互设计的坑。首屏放了一个面积巨大的实际产品录屏 Demo，但画面里塞满了密密麻麻的文字细节，各种数据指标、右下角的 AI Agent 弹窗和快速打字不断切换，节奏快到人根本无法看清它具体在干什么。Alex 建议，创始人与其放一段让人眼花缭乱的屏幕录屏，不如找专业机构制作一段聚焦于核心交互界面的动态示意动画，视觉效果会好得多。 ```mermaid flowchart TD accTitle: Interactive Tabs Fallback Risk accDescr: 解释自动计时器在多标签切换展示时导致的信息丢失风险 A["用户页面向下滚动"] --> B{"页面进入视口瞬间"} B -->|"触发隐藏计时器"| C["Tab 自动向前切至后续标签"] B -->|"用户匆忙扫过"| D["只看当前展示标签，绝不主动点击其他 Tab"] C --> E["用户误以为该次要功能是核心卖点"] D --> F["隐藏在其他 Tab 下的核心功能完全被忽略"] ``` 紧接着，他们发现了更致命的交互问题：下方功能区采用了带有底部进度条的自动轮播标签页（Tabs），展示诸如“几秒内起草回复”、“语音草稿”等卖点。Aaron 毫不留情地指出了多 Tab 设计的通病：用户从来不会主动去逐个点击这些标签。更糟糕的是，如果轮播计时器在用户还没滚动到该区域前就在后台悄悄启动，当用户刚好看过来时，画面可能已经跳到了第 3 个甚至第 4 个次要功能上。Aaron 总结道：“只要你用了标签页，你就必须做好心理准备：用户根本看不到隐藏在其他标签后面的任何内容。”由于页面截图缺乏清晰的视觉层级与解释引导，初次到访的用户根本没有耐心在复杂的屏幕截图中寻找线索，自动切换的组件反而进一步割裂了信息传达。 - Slashy 的核心定位十分明确，能让用户瞬间建立“类似 Superhuman 的邮件客户端”的心理认知。 - 复杂界面直接放实屏视频容易导致信息过载，换成抽象核心交互的动画往往表达效果更清晰。 - 自动轮播与 Tab 组件设计缺陷：永远不要预设用户会主动点击切换标签；若后台计时器在视口之外提前触发，会导致用户彻底错过排在最前面的核心产品功能。 ### `40:00` 网站评价：Slashy 的社交证明与信息层级权衡 在审视第四个创业项目 Slashy 的落地页时，Aaron Epstein 指出，产品界面在页面上展现得虽然详尽，但普通用户很少会花极高的专注度去深挖复杂的界面细节，或许用更聚焦、更简化的方式传达核心价值会更有效。两人随后滑到了页面的社交证明（Social Proof）模块——标语写着“深受最忙碌人士的喜爱”（loved by the busiest people），展示了包括 Redpoint 投资人及内容创作者的背书。Aaron 强调，获取邮箱访问权限是极其敏感的操作，因此页面顶部的安全链接与扎实的社交证明至关重要，这是建立信任让用户愿意下载的前提。 Alex Danilowicz 赞同社交证明的必要性，但他敏锐地指出背书群体的选择偏差。Alex 直言：“就像这里，我看到投资人和创始人，我就会想，好吧，这是给投资人和创始人的……但我脑子里立刻就冒出一个问号：等等，这难道只是个专门给 VC 用的收件箱吗？”他提醒创业者必须仔细考量背书人传达出的定位信号。如果满屏都是投资人和创业者，普通用户就会怀疑它是否属于通用型工具（如 Superhuman）。不过，当看到页面演示“模拟你的文风进行修改”（writes in your style）的动效交互时，Alex 大加赞赏，认为这种动画直观生动地传达了功能价值，正是 Magic Patterns 擅长生成的原型效果。 在看到“通过 iMessage 处理收件箱”以及多收件箱聚合的功能时，两人都产生了强烈的共鸣。Alex 认为用户往往深陷短信、WhatsApp、Gmail 和 Slack 等多渠道轰炸中，这种解决碎片化痛点的功能其实最具吸引力，甚至应该直接提到页面最上方。此外，Alex 还分享了一个来自 PostHog 团队的落地页设计“暗门道”：PostHog 刻意做了一个巨大的页脚来彰显大公司的沉稳感。落地页本身的长度与体量，在潜意识里会向访客传递出这家公司已经深耕已久、成熟可信的“元信息”（Meta communication）。 - 敏感权限产品的核心在于信任建立，必须把安全机制与高质量背书置于显眼位置。 - 社交证明的人选会直接锚定产品的受众心智，如果背书全为 VC，可能会误伤大众市场定位。 - 落地页的物理长度和空间排版往往承载着隐性信任背书，页脚与长版布局能传递出公司的成熟度与正规感。 --- ### `43:08` 前端工程师如何提升设计审美与用户直觉 针对“前端工程师出身的创始人如何提升设计品味”这一话题，Alex Danilowicz 分享了自己的经验。他平时会主动去美术馆（如旧金山的马蒂斯 Matisse 特展）吸收经典视觉，或者阅读《设计心理学》（The Design of Everyday Things）这类打磨底层认知的书籍。Alex 尖锐地指出了硅谷工程师圈子的典型认知偏差：“硅谷存在一个巨大的误区，以为设计就是追求像素级的完美圆角，但其实不是，设计是对用户体验的推敲。” ```mermaid flowchart TD accTitle: 工程师全员客服与设计反馈闭环 accDescr: 展示全员轮值客服如何让工程师直面痛点并倒逼高标准产品修复的流程 subgraph SupportLoop["日常反馈与发现"] A["全员轮值客服 (支持收件箱)"] --> B["直面痛点 (例如同色按钮导致找不到分享)"] end subgraph DevAction["工程师驱动落地"] B --> C["工程师产生同理心并立即修复"] C --> D["死磕最后 20% 的体验打磨"] end subgraph Outcome["产品价值"] D --> E["超越粗糙的 Vibe Coded 产物"] end ``` 谈到在 Magic Patterns 日常运营中如何贯彻以用户为中心，Alex 透露了一项全员执行的机制：全公司所有人都要轮值做客户支持。每个人每天都要泡在客服收件箱里直面用户的挫败感——比如发现用户找不到分享按钮，原因居然是界面上放了两个颜色完全相同的主操作按钮（Primary Button）。正因为工程师在一线亲身体会到了这种折磨，他们会立刻动手修复。Alex 强调团队必须维持极高的审美门槛，多花时间去死磕那最后的 20%，绝不能止步于那种粗糙拼凑、浮于表面的“氛围编码”（vibe coded）半成品。 - 审美提升不仅来自 UI 临摹，更来自于观赏艺术展览与研读《设计心理学》等经典理论。 - 团队全员必须亲历客服一线，工程师只有直击用户被同色按钮困扰的惨状，才会自发对体验缺陷进行彻底根治。 - 拒绝浅尝辄止的 AI 生成界面，团队需要为那“多出来的 20%”打磨投入精力，才能跨越平庸。 --- ### `45:00` 交付速度与精细设计的取舍，以及 Magic Patterns 的未来 面对 Aaron 提出的“追求精细设计是否会拖慢发布速度”的经典权衡难题，Alex 坚决认为这种投入是值得的。如果不花心思做好设计，成群涌入网站的用户会因看不懂或流程受阻而流失。更关键的是，随着现代 AI 编程辅助工具的普及，代码编写速度被极度压缩，以往“速度 vs 设计质量”的不可调和矛盾在今天已经不复存在。用 Alex 的话说：“很多人喜欢讲‘如果这东西设计精美，那交付肯定特别慢’，但实际操作中并不是这样。你依然可以非常迅速，尤其是考虑到如今编写代码的速度被极大地提升了。” 随后 Alex 谈到了 Magic Patterns 刚发布的重磅产品——MagicOS 画布系统。他形象地将其比喻为“Pinterest 和 Figma 生下的孩子”：团队不仅能通过自然语言对话生成 UI，还可以直接拖入 PRD 文档、设计参考图与上下文背景，进行全方位的视觉探索。对于设计的终局，Alex 坦言 AI 演进瞬息万变，谁宣称自己百分百确知未来都属于信口开河，但有一件事毋庸置疑：代码作为设计的终极载体地位不会动摇。各大前沿模型实验室都在倾力打造极致的代码 Agent，而代码正是触达生产环境与真实用户的唯一核心介质。Aaron 对此表示赞同，指出工具的爆发正在赋予开发者打破既往边界的超能力，并为本期 Design Review 画上了句号。 - 代码生成工具抹平了速度与质量的鸿沟，追求卓越设计不再以牺牲迭代效率为代价。 - MagicOS 将多模态画布与代码生成深度融合，支持将 PRD、参考灵感与对话式提示词整合在同一工作流。 - 代码始终是产品设计的最终端载体，围绕代码构建的 Agent 和开发范式是当下及未来不可逆的趋势。 ## Notable quotes > `43:08` 硅谷存在一个巨大的误区，以为设计就是追求像素级的完美圆角，但其实不是，设计是对用户体验的推敲。 — Alex Danilowicz > `36:59` 只要你用了标签页，你就必须做好心理准备：用户根本看不到隐藏在其他标签后面的任何内容。 — Aaron Epstein > `23:59` 我从没见过任何一家百亿美元的独角兽公司（Decacorn）会去搞滚轮劫持。为什么不做？因为这不仅无法提高转化率，反而会让用户感到极度沮丧。 — Alex Danilowicz > `45:00` 很多人喜欢讲‘如果这东西设计精美，那交付肯定特别慢’，但实际操作中并不是这样。你依然可以非常迅速，尤其是考虑到如今编写代码的速度被极大地提升了。 — Alex Danilowicz > `20:00` 当输入表单直接在页面上展开且清晰可见时，其转化率远高于要求用户点击后才弹出窗口或跳转到表单页面的做法。 — Aaron Epstein > `27:57` 如果有什么重要信息需要传达给用户，它就不应该受制于用户的观看角度，而应该做到显眼得不能再显眼。 — Alex Danilowicz ## Mentioned Magic Patterns, MagicOS, Alex Danilowicz, Aaron Epstein, Y Combinator, Figma, v0, Storybook, Paul Graham, Cursor, Claude Code, Anthropic, Model Context Protocol (MCP), Grok, EVE, Portal, WebGL, RollerCoaster Tycoon, Ego, Creative Market, Sentient OS, Space Grotesque, Instrument Serif, CeraNovus, Slashy, Superhuman, Gmail, Redpoint, PostHog, Henri Matisse, The Design of Everyday Things, Pinterest ## Video description <p>Magic Patterns (YC W23) is one of the fastest-growing design tools in AI, helping product teams turn ideas into interactive, code-backed prototypes in minutes. Alex Danilowicz and his co-founder, both front-end engineers, built Magic Patterns to solve a problem they had themselves: finding a better way to turn ideas into something visual. They were among the first teams building prompt-to-design tools back in 2023.In this episode of Design Review, Alex joins YC’s Aaron Epstein to demo Magic Patterns and its new MagicOS canvas, where teams can bring together prompts, images, PRDs, and other context to explore ideas visually. Then they review a handful of startup websites to break down what makes a site feel “vibe coded,” where founders go wrong, and how to make AI-generated design feel more intentional.Chapters:00:00 - What Magic Patterns is03:01 - Nine months of pivots05:59 - Using the MCP from Cursor08:21 - The end stage is compressed now11:23 - Demo: postcards for every meetup city15:35 - The RollerCoaster Tycoon chocolate theme park18:17 - Site 1: Ego21:39 - Inputs you can't type into23:59 - Site 2: Sentient OS27:57 - "Free" should be giant30:20 - Instrument Serif and the em dash32:01 - Site 3: CeraNovus36:59 - Site 4: Slashy38:36 - Nobody clicks your tabs43:08 - Getting better at design as an engineer46:07 - What's next: Magic OSApply to Y Combinator: https://www.ycombinator.com/applyWork at a startup: https://www.ycombinator.com/jobs</p> [Source](https://anchor.fm/s/8c1524bc/podcast/play/127872338/https%3A%2F%2Fd3ctxlq1ktw2nl.cloudfront.net%2Fstaging%2F2026-9-22%2F434710491-44100-2-23b7fe365c416.mp3)

[43:08] Alex Danilowicz: 硅谷存在一个巨大的误区，以为设计就是追求像素级的完美圆角，但其实不是，设计是对用户体验的推敲。 [36:59] Aaron Epstein: 只要你用了标签页，你就必须做好心理准备：用户根本看不到隐藏在其他标签后面的任何内容。 [23:59] Alex Danilowicz: 我从没见过任何一家百亿美元的独角兽公司（Decacorn）会去搞滚轮劫持。为什么不做？因为这不仅无法提高转化率，反而会让用户感到极度沮丧。 [45:00] Alex Danilowicz: 很多人喜欢讲‘如果这东西设计精美，那交付肯定特别慢’，但实际操作中并不是这样。你依然可以非常迅速，尤其是考虑到如今编写代码的速度被极大地提升了。 [20:00] Aaron Epstein: 当输入表单直接在页面上展开且清晰可见时，其转化率远高于要求用户点击后才弹出窗口或跳转到表单页面的做法。 [27:57] Alex Danilowicz: 如果有什么重要信息需要传达给用户，它就不应该受制于用户的观看角度，而应该做到显眼得不能再显眼。

[43:08] Alex Danilowicz: I think there's this big misconception in Silicon Valley that design is pixel perfect border radius. And it's not, it's thinking through the user experience. [36:59] Aaron Epstein: the problem with anytime you have tabs is you have to expect that people will not see anything that is behind the other tabs. [46:07] Alex Danilowicz: code as a medium is here to stay because clearly the frontier labs and everyone is working on making coding agents very, very good. And that is the ultimate medium for production and for your users. [18:17] Alex Danilowicz: Here's the thing that I think people miss about landing pages in general. The real metric to track is does it convert?

[0:00] Today, I'm joined by Alex Danilovich, co-founder and CEO of Magic Patterns, an AI design tool that takes you from an idea to a real interactive codeback prototype in minutes. We'll look under the hood to see how Magic Patterns works, hear his origin story as a non-designer, and then review some startup websites to help make them look a little bit less vibe-coded. Alex, thank you for joining. Thanks, Aaron. Thanks for having me. I've been watching the show for a long time. Oh, it's awesome to have you on. Maybe to start, tell us more. What is Magic Patterns and what were your goals in building it? Yeah, so Magic Patterns is an AI design tool. Product managers, founders, professional designers all use us to visually communicate their ideas, whether it's through a prototype, interactive mock-up, or a code-ready export for production. the inspiration for building this. Yeah, it does. We are unique in that we are non-designers, my co-founder and I. We are, by trade, front-end engineers. And actually, when we got into the YC batch, our YC partner told us, do something that you're really good at. What do you know really well? And for us, that was translating Figma mock-ups. into code. And that's how Magic Patterns was born. It was the product that we always wanted ourselves. There was something always there where I was never really good at Figma. And we just felt like, well, wait a second, I'm doing lots of front end engineering. As a founder, I have to do lots of design. What is a tool that is more intuitive and easier for non-designers like myself? And this was the early days of a lot of prompt to design tools or prompt to prototype tools coming out, right? You guys were actually one of the first that was doing that. We were certainly one of the first. When we launched in October 2023, the only other tool on the market similar to us was VZero. look back, that was before even chat was a thing. The models were so bad that there was no... chat there was no back and forth conversation it was literally just prompt you get a design prompt you get a design no actual interaction with the agent. You applied to YC and you had a different idea. And so maybe talk about some of the origin story of how you met your co-founder, your time during YC, and then ultimately what led you to building this. Yeah, so my co-founder and I, we actually apply to YC with a text message analyzer. Your top group chat, your top word... what's the funniest thing you sent in 2026 across all your group chats? And we had revenue, which I think is why we got into YC. But we get in and our YC partner tells us, hey, this is... This is your company. It's an okay idea, but I highly recommend you do something that you know really, really well. And for us, again, that was front-end engineering and implementing Figma mock-ups by code. And then so then... During all of our pivots, that's pretty much what we focused on. How long did it take you to get to the idea? that ultimately became Magic Patterns? It took us about nine months. We were always circulating around it. So again, we were doing a component library editor. We were doing kind of storybook on steroids. We'd had a Chrome extension that allowed you to bring local host... um and instantly publish it on the internet as kind of like a feedback tool that later became a feature of of magic patterns and throughout all of that the main thing that i learned was That classic PG advice, find 10 users who really love you. None of those pivots, we didn't have any 10 users that really loved us. Where love is defined as they're paying you and they're using you. And then once we launched what became Magic Patterns, those 10 users came very quickly. How do you stay differentiated in a world where it feels like the design tools keep leveling up significantly every six months? And you guys were one of the original prompt to design products that are out there. And so how do you find your audience in that and keep staying ahead of the game, models continue to improve as well. I've said this before on a video, like customers are our religion, talking to them every single day, and then also adapting to new workflows. As an example, we released an MCP platform about a year ago as part of a hackathon project internally. We didn't think it would go anywhere. And now MCP usage has completely exploded. It's one of the main ways that people interact with magic patterns. And so you always have to be almost rebirthing your company to adjust to new workflows, especially in the AI world. I'd love to see a demo. Can you show us a little bit about how it works? Yeah, let's do it. I think one thing that would be good to start is I'll show you how we use it internally. And you're always dogfooding your product, right? We are obsessed with dogfooding, force the dog fooding because then it's you're not getting actual right it has to be good enough that you actually want that and you choose that to be your tool right exactly and then noting when you don't choose it and so we've been dog fooding creating our loading indicator for our own product. So, you know, we have, [5:00] WALL-E, Eve from WALL-E, or some of the... If you ever played Portal, the video game, we were thinking through that kind of... what that might look like as a loading indicator. What's neat here is everything here is a global chat. So we can make any updates and make several updates at once, right? Like as an example. I could select the two of these. Saying give me a new style. of loading indicator that merges the inspiration of the cloud code icon and the grok bot. And what's really neat too is, of course, you can use the MCP. So let's go ahead and do that just to kind of show it. I'm going to go into Cursor here. And through using our MCP, I can just... go ahead and prompt right add an ASCII version of my agent. What's really neat is we're seeing lots of enterprises use this where they have so much context, like in cursor or cloud code, whether it's PRDs and meeting notes, so they can leverage all the skills that they already have, but then instantly kind of put it on this visual canvas to better communicate. Yeah, it's interesting. So you've got this powerful canvas in Magic Patterns, where when that's the best tool for the job, you can be working directly in there. And when you want to be working in code or in Cursor or another app, you can just pull directly from that through the MCP. Yeah, exactly. And what's cool, too, is we have so many customers that come up to us and say, I'm using Cursor and Cloud Code, but... It gave me localhost. I can't share. I can't share my prototype with anybody. Oh, well, we have a solution for you. Right. Yeah. So what's cool here is actually we can see my colleague on here as well as the cursor agent from that cursor prompt that we fired off. Right. And so they're working simultaneously and we can go ahead and just open this up here. We can see this is like that ASCII version of Cloud Code, right? And kind of playing around, oh, what would it look like with different colors? Now, obviously, this is very Cloud Code-esque. We're just kind of getting inspiration here to make our own loading indicator. And it generated this entire page showing off the work that it had done. Yeah, exactly. So like one thing that we encourage users to do and we've seen users do ourselves is explaining kind of the choices and the different states. So as another example here, if you kind of look at this one, we were thinking through, well, what does it look like at different screen sizes? What does it, again, look like if it's Claude Code? Kind of playing around with, should it look more like a helmet or like a pillow, right? Again, just brainstorming and exploration, that's where we see users get the most value in a tool like ours. Yeah, I mean, that's, I think, one of the most valuable things at the idea and inspiration stage is just being able to fire off a bunch of different variations. it's hard to manage those and they're all in different tabs and stuff. And it seems like you Magic Patterns is able to just give you a bunch of nice tabs and options and kind of enumerates everything. It's like, here's a bunch of color options. Here's body options. Here's different agent options. And it's really cool to do that in a very centralized, uniform way to actually make the tweaks and explore, find what you like, and then be able to move on faster to the next step in the flow. Totally, because I think what's changed about software development in the last year especially is the end stage is so compressed now. just moving at the speed of light. There's too many PRs to review. And so as a result, we can spend more time actually brainstorming, thinking about what to build and what not to build, and using something like Magic OS to really visualize and think through the different ideas and concepts, error states, loading states, what happens when it's multiple agents working on a file. Here's actually, I think this one is really cool. where we were thinking through, well, okay, Lots of folks use the MCP to use our product and they might be using it through cursor or cloud code or codex and thinking through what that might look like. And through Magic OS, we actually brainstorm kind of this like LED style design. And so is this whole page a canvas? Yeah, so this is all a canvas. And what's cool is we also think of it as almost like an art board, right? Where you can bring in any of your context, whether that's images or PRDs or documentation. And again, what's neat is we're not blocked here by a single thread, right? So historically, when you use lots of these design tools and prototyping tools, you kind of have to wait for the AI agent to finish, right? But on any of these, we have many, many threads here. back to kind of what we first did to when we first created our first design here on this canvas. - I know you've kind of gone back and forth on canvases in general as an interface, and just talk about your thinking and what you've discovered kind of being at the frontier of that for when it makes sense and when it doesn't. [10:00] So I'll actually show that where we've had a canvas for a long time. What you just kind of saw is Canvas 2.0. But we've had a canvas... for roughly two years now. And what we learned and actually We're hiring, by the way, we're hiring a designer. One of the reasons that we're hiring a designer is one of our issues that we've had is thinking through that initial onboarding experience. And almost like this progressive disclosure of, OK, when does it make sense for users to know that they can use a canvas versus just kind of a single chat thread? One of the initial learnings that we had is like a canvas is not necessarily for everyone. And actually, this new product that we've released, we're intentionally calling it an OS platform. because it's an operating system for all of your context. So of course, like the interface is a canvas, right? We see here are images and you can bring in documents and then make designs, but it's not a canvas in the traditional sense where you're, something like figma and having a bunch of tools on one side yeah so it's it's more like you've you've got canvas like artboards that you can get in there and you can customize. You also talked about front end and being able to see what it's like to actually experience the design that you're making and not just have these static files. Maybe can you show us something around that cool so yeah let's do another example here one thing that is really really fun for us is we do what we call magic patterns meetups all over the world and i've been thinking about i want to send our users postcards from these meetups. So let's take this from the top. So let's go ahead and add some context. So I have basically these pictures that I've pulled, and all of these descriptions from our events that we hosted. So as an example, I was just in Colombia, actually hosting what I called Magic Patterns Medellin. And we met some power users there, I learned that Magic Patterns was taught at a university, which is super cool. And I also have this prompt, right, where if we open this up here, This is a prompt that I just kind of came up with, like a rubber stamp travel notes field poster. and so what's cool is i can go ahead and just tell our agent reference my prompt... on the canvas and then make postcards. for every single city and image. Cool. So you've got images for Medellin, Singapore, you've got the Statue of Liberty, so New York, and then Toronto. Exactly, right? And notice how the agent has all of the context that is on the canvas already, right? It automatically knows what is really in the file system, what's on this artboard here, and it can go ahead and then make... make its updates. So what's cool here is we see it generated all four postcards at once. We can go ahead and just see a bigger version of this here. My prompt was basically telling it to make kind of like a stamp of the image that it had. And now because we're on a canvas, I can go ahead and just grab kind of my description of our Singapore event. Right here, I have kind of just some random notes from when our meetup was. It was on May 17th. and I can go ahead and select these two. Say now make a design. of a postcard. That references the description thanking users for attending. And when this is done, of course, we can iterate on just the Singapore one specifically and then apply all of those changes to all the cities at once. Right. Without having to redo it. And who are the people? within your team that are actually using this and creating these postcards? Because it seems like it doesn't necessarily need to be designers, right? Yes. So we have everyone from our ops team to our sales team using Magic Patterns. So as an example, our go-to-market person is creating these postcards in Magic Patterns to send out to users. And historically, this was someone that didn't know how to use stigma, would have to outsource this type of work. And so that's what's really, I think, special about our tool is how much we have been kind of democratizing design. You can export to Figma as well. So you play nicely with the other tools. One thing that's very different about our tool is that we're model agnostic and in a way feature agnostic, right? Where we... encourage folks to export to Figma if they want to and get high fidelity precision or export to the coding agent of their choice, right? Some of our other competitors, like Cloud Design, as an example, it's only the Anthropic models. You're only exporting to Cloud Code. There's no integration with Figma versus a tool like ours. You know, we have integrations with anything you can think of. So prompting is obviously very important here. What's your advice for how people should improve their prompts and get better results from them? Yeah, I think it's leveraging that tools offer. I mean, it's really interesting. I've seen is there's more and more AI enablement teams popping up, especially large [15:00] companies and what are they doing? They're leveraging things like skills, agents, MD, right, and bringing in your unique context. That's relevant to your company. So, of course, we have, you know, skills feature and magic patterns where you can go ahead and and add your skills or as we were talking about, add your design system and bring in your components. And that's what I always recommend first is like spend the 10 minutes to bring in your existing context. It'll save you hours in the long run. Mm hmm. What's one of the coolest things that you've seen created with Magic Patterns? Yeah, one of the most fun is this Rollercoaster Tycoon theme park. It's like a chocolate park, which is crazy because when we first started this, you know, you would prompt like a form and it would give you back like a drop down. Like the models were so bad. And now suddenly, you know, we're seeing folks literally bring in. like building entire video game experiences. Again, this is not a very common use case, but it's kind of sharing what's possible when the input and output is code. And what was this created for? This is really just creative for fun, you know, experimenting with what is possible like in the browser and actually thinking through. how components can help you design in a tool like this, right? So actually, when you think about a chocolate factory, theme park in Roller Coaster Tycoon. The track is a component. The chocolate bar twister ride is a component. The paths that guests walk on are components. And so when you give the AI those guardrails, how can it output like a theme park in one shot or two shots bringing in that context Very cool. And you can even get right in there, see all the little people walking around. Yeah. And again, it's amazing. We're like, this is literally just, you know, WebGL rendering in the browser, right? And we can see that we, again, the way that we did this is we use a design system that we call the 3D theme park, right? So I can go ahead and update that to bring in my latest components. And updating is really as simple as prompting something like, no trees, just lollipops and more chocolate rivers, right? What does this tell you now about what might be possible with Magic Patterns? It seems like this is far beyond just making a postcard or website design or something. historically been 2D, right? And it's been really hard if you worked on a software team four years ago, going back and forth with the designer and the engineer and the PM, what should the exact interaction be? Then you see something like this where people are, you know, one-shotting 3D theme parks. I think it's a taste of the future where people can really design full-on interactions that are high fidelity, you know, and using their components. Yeah, it's going to be a wild future for sure. Definitely. YC's next batch is now taking applications. Got a startup in you? Apply at ycombinator.com slash apply. It's never too early and filling out the app Talked about how you've seen thousands of vibe-coded designs. You're probably a world expert on this. Should we review some websites? Let's review some websites. This will be a lot of fun. Okay, great. All right. First looks like we got Ego. Agents are machines. We make them people. Vigo is an applied AI research lab building personal agents indistinguishable from humans. Okay. What do we think? So first off, I mean, it's cool. Here's the thing that I think people miss about landing pages in general. The real metric to track is does it convert? And... I obviously don't know what... if this is converting or not but my sense is like I don't know. It's not accessible. I don't know where the CTA is. The CTA Ronin. Yeah. What do you think they want us to do here? I mean, my initial reaction is like, I should just keep scrolling. Yeah. Right. Um... One interesting thing that we've learned about our own landing page is, you know, everyone that has a vibe coded tool has that input to prompt to get started. And for a little while, we removed it to try and be more creative. And our conversion rate totally tanked. We learned why people do that. Right. And so I always encourage folks to think about, like, what are you ultimately trying to do here? Okay, so then there's like an app in there. Yeah, I guess I'm halfway down the page and I'm still unclear what is this and who is it for. I guess there's a wait list, so maybe it's not live yet. Yeah, let's see. And now they're getting into more of the description. It's a voice agent with a personality, a memory and a mind of its own. That feels like the kind of thing that should have been all the way at the top. Right. Like the site should start here. Right. with this because this is the call to action, which is join the waitlist. But we had to scroll down pretty far in order to even get to this point. Totally. And I'm kind of laughing here that like this main CTA, I had to do, there was an interaction there. That's another, almost an example of something that maybe was potentially vibe coded. AI agents, they love... [20:00] of adding animations and things like that, right? Overly animating. And so Why not just start it with that? Right. Yeah, that's actually interesting. we ran some tests at my company, Creative Market. And when you had the input form visible and expanded directly on the page, conversion rate was much higher than requiring somebody to click through to then put in an email address or pop up a window or get to the form or something like that. So I would recommend whenever possible, yeah, just start with the text box open and people can just type right in it. people entering information there. Yeah, and that's what I encourage. Like, think about the human being. I think AI agents, there again, they're rewarded of doing fun things like motion and overly animating, right? But the human is not going to spend a lot of time on your site. They're in a rush. Yeah, we see a lot of... There's blinking dots everywhere and... I don't know if music is playing, but it looks like there's some type of music faders or something going there. And so, yeah, it's kind of hard to tell what's going on. I like the overall vibe. It's got this kind of dark mode red. It feels very like 80s video game, kind of, which I think is interesting. But it's also hard to read some of the things. It actually looks like maybe there's an input box or something over on the right-hand side. because it's not clear to me that it exists. Yeah, this is another kind of vibe-coded smell that I commonly see. As you can see, my mouse here is... letting me interact with this, but I can't actually type anything. Right. And so, you know, and then I'm like, well, what's going on? Yeah. Yeah. There's a pattern that I've seen where sometimes you have actual UI elements embedded in the page, but they're actually real and interactive. Right. And that's cool to be able to do that. That's something that I think agents make a lot simpler now that was much harder to do before. And so it can feel very interactive and like you can actually try out the product live on the page. And that's super cool. But yeah, the flip side is when it looks like something like that and it becomes misleading and you think that you can interact with something, but you're actually not able to. Yeah. And I think it's important to talk about, like, why does this matter? Why does it matter if there's a vibe coded smell on the website? Right. And I think it matters because you can notice how distracted we are by this input trying to type. And we're distracted from the core thing, which is whatever the CTA is supposed to be, I guess, in this case. Right. It's join the join the waitlist. Yeah, it's cool. If you scroll down, you see the pictures of the people. They match that vibe, that kind of 80s video game throwback vibe, which I think is cool. you know, they had that eyeball up at the top. which is like very provocative. Um, It creeps me out a little bit. There's like an eyeball looking directly at me. But it's interesting and it becomes memorable if that's the vibe that you're going for. But yeah, it just wasn't obvious to me what this is until we got halfway down the page. And so I think just a little more about what it is and what's the action that you want people to take. Even that call to action podcast. In the top right, that button, it just says Ronin. Right. I don't know what Ronin is. The company's called Ego. I guess it says here, Ronin launching September. Is Ronin a product? Is it a model? Is it, it's not clear to me what this is. And so I think ultimately I'm just left very confused. This is another vibe coded smell, by the way. It says scroll right here. I'm naturally going to scroll. Personally, I don't know many instances where a human would feel the need to put scroll there because naturally you're going to do that versus I commonly see agents trying to always nudge the user to do something. Should we take a look at another one? Yeah. Okay, we got Sentient OS, your Mac, Sentient. An on-device LLM understands your entire life, then proactively offers to get your work done through computer use. Okay, that's interesting. And then I guess we have an image here of a laptop that's open. Whoa. Okay. Okay. And it closes when you scroll. Go back for a second. Oh, so... All right, so there's a bunch of stuff going into the middle. And then when you scroll down a little, And it says, while you sleep, your Mac understands your entire life. Okay. And I think notice something here. I'm really struggling to like perfectly match the scroll. One thing I, I never see a, you know, deck of corn company ever do any kind of scroll jacking. Yes. why don't they do any kind of scroll tracking well because it does not convert and it's frustrating um another thing that i see ai agents doing doing a lot right i mean just notice like okay if i I missed it. Right? Again, go to like the top... [25:00] Fortune 500 company sites that have millions and millions of page views, they are not scroll jacking. Yeah. What's frustrating about it is you're used to the precision of how you move through a site when you're scrolling. And when you hit a site and it's different precision, you know, it keeps scrolling after you've stopped touching the mouse or the trackpad. It messes things up and it feels unnatural. And so please, everybody, please stop scroll jacking. Keep the normal scroll. Because there's some cool stuff that's happening here, right? Like, okay, we started out with a laptop screen open. A bunch of things are going into it. Right. The lid closes... And I think it's trying to tell you, like, all this stuff happens while you sleep. The lid is closed. And then you wake up to your finished work. And so it wakes up and here's all the things that it's done. And then it takes you through that. So the visual and the experience, what I like about this one, is it's actually reinforcing the concepts that it's trying to tell you about. When it talks about when you sleep, the lid closes. The computer is asleep. And then it's like, oh, it wakes up. It does all the work while you sleep. So when you wake up and then, boom, the laptop comes back out. We have all the work is done. it to us. That's, I think, the best version of an animation is not animation for animation's sake, but animation that actually reinforces the point that you're trying to make and communicate something in a way that just being static would not have been able to do. Totally. I mean, it's definitely helping me understand what this product does. But I would also, I always think when you're trying to be too creative or something, that's great on like a product page or a video page. Not your landing page. Your landing page, the number one thing you want to try and get me to do is click this button, download for Mac OS. Also, just speaking about that button for a second, this kind of glow... Another bit of a vibe coating smell again. Hey, it's definitely getting my attention. But one thing that I've noticed is... AI agents, they love to overdo it on this kind of gradient on this massive drop shadow. And again, look, it got my attention, but it's just one thing to be wary of if that's something that you're trying to not do. Yeah. And then what do we have further down the page here? Let's see. Recipes. I think what's interesting here is, again, this is that main CTA, right? I scroll through the whole thing and I'm just... You really want me to click this button or perhaps even do this homebrew installation, but it's so small. Like I'm at like 100% and I can barely see it. Right. And like this has this kind of hover effect. I guess this brings me to the GitHub. I can barely read that. Yeah. It's really tough to read those. Right. Like free. Free. There's a reason that free is giant on pricing pages. Yeah, download for free. Yeah, exactly. Right. Right. And I swear it's, you know, Perhaps it's because of the angle, but it doesn't really matter. I cannot see the word free right now. If you have something important to communicate, it shouldn't matter the angle that the user is looking at it. It should be painfully obvious. Yes, exactly. All right. I mean, I guess maybe, you know, one of the other pieces of feedback for a product like this that runs locally on your machine, privacy and trust is something that's very important. What do they do with the data? I guess they have an FAQ here to try to answer some of this. But this is actually an interesting problem in the new world of AI apps and LLMs is they need so much data and so much context to be really valuable. And especially a product like this that's going to run locally on your machine and have access, presumably, to everything that's on your computer. And so there's a new bar that needs to be established for trust and privacy and security for all of these types of products. My take is that I actually think the products that really lean into that and go above and beyond to make users feel super comfortable around what is the data we're going to have access to. How are we going to use it? What are our retention policies? Is this secure or not? All these things and being very proactive about that are the ones that I think are going to have more success of getting users to download and try it and spread the word and tell their friends. Totally agree. As someone who applied to YC with a text message analyzer that was open source and read your iMessages, All locally on the computer. I completely agree. And so what were the things when you were working on that product that you thought about that you felt like you had to do in order to get people to trust your product and give it access to all of their text messages? hero on the landing page was open source, completely on device right communicating that the internet doesn't touch in any single way and that's what we learned that people really really cared about right yeah and they do it here you know in on device llm yeah but it's funny like like is it the word and really even necessary like it's it's interesting to me they're like bolding these words [30:00] Another sign of AI writing actually is, you can look this up on Wikipedia, is when random words are bolded, right? Like, but just communicating those kind of things. that most important thing, which is that it's... on device. Another thing that kind of makes me laugh is this font. Let's see what the font is. Space Grotesque is always the font that is... Oh, Instrument Serif is another one. Instrument Serif. Claude Code loves Instrument Serif. Which is funny. This kind of reminds me of the M-Dash, right? It's like, you can still use the M-Dash in your writing. But unfortunately, people are going to look at it and go, Oh, he used... AI, right? Instruments, serifs, space grotesque. It's interesting how these things are trends that sometimes are hard to spot in the moment. I feel like we're on it and we can spot it in the moment here, but it's like you see a kitchen that was designed in the 80s or something like that. And you're like, man, this looks like an outdated kitchen. But in the 80s, it probably looks like a modern kitchen. And that's what some of this feels like. It's something that feels like of the moment now. outdated at that point. And so I don't know, I would encourage people just resist the urge to do the default that the agents are spitting out when they're designing or the default fonts or use something that is more unique to you and communicates what you want to communicate rather than just using the thing that everybody else is using. And that's the way to create more timeless design, I think. Yeah. And establishing that brand book early on. That's one thing that I regret that we didn't do earlier for our own company was establishing a brand book, deciding on what is the brand, what is your font, really your design system. Companies should do that. earlier for sure all right well thank you sentient os let's do another one all right sarah novice institutional intelligence and decision infrastructure I don't really know what that means, but Sarah Novus is your AI operating partner. It reads every record your company produces, finds the operational inefficiencies nobody's tracking and warns you while problems are still small. OK, I don't know. This is. I think the copy could be improved here. It's very generalized. It's very vague. I'm kind of like, is this something I need? I'm not really sure. It does everything that my company wants and finds inefficiencies. It's a decision infrastructure. I don't know what that means. So I think something that would be helpful is just getting to more specifics or more specific language around who should use this and why. Because right now I think it's it's too unclear. It's interesting. I mean, like there's so much padding, right? Like there's just a lot of white space for this is this is what they call above the fold. Right. Before I scroll, it's such an important section, the hero section of the landing page. And yet immediately my eyes. I'm like looking at white space right now. Right. Unfortunately, this is also kind of like a classic vibe coding smell. This small all caps. Exactly. Yeah. And again, it's like, OK, is there anything inherently wrong with small all caps? Not necessarily, but. When I read it, every claim cited years of history alive from day one. Nothing installed, no interviews. But I still don't even know what the product does. Yeah, exactly. I didn't even know it was going to be something that was installed. That was not my assumption to begin with. So yeah, yeah, yeah, exactly. Like nothing installed where? Like, am I dealing with hardware? Um... oversight over the operations it finds the inefficiencies foresight with receipts yeah i just need specific examples like as we're scrolling do they give specific examples start with the problem on your desk enterprise middle market, private equity, Yeah, it's this is like who they go after. Hmm. And which is, this is not helpful because it's about them. It's not about the user, right? The user doesn't care who they go after. The user cares about they have a problem that they want solved. And can Sarah Novus help solve this problem for me? Right. It's almost like right now I have to think through, am I enterprise, middle market? Like, who am I? Yeah. Let's pretend I'm secondary or I'm, continuation vehicles. I have to look at this. But I had to click to decide who I am. You're making me think, you know. Too much work. And again, to your point, what I really want to see are the solutions. Yeah, you know, this is a trend that I see with vibe coded sites. And especially we see this a lot in YC applications. One of the things that we see is it's almost like it makes a slide deck for the company that's kind of pitching the company almost to investors a lot of times. Or like the models think that is the intended audience for a startup. or a startup website. And sometimes it is, like investors will look at the thing, but that's not who you should be speaking to and who you should be targeting. You should be talking about your product, [35:00] should use it, why, why it's valuable, what problem it solves for them, social proof of, you know, other people that use this that are like those users and how much it's helped them. These are the things that I think real users want to find. Rather than a pitch deck about who they target. And yeah, here's the four guarantees. And it's like, I don't even know. I still can't even figure out what you do. One thing that's interesting I noticed because we just talked about this. There's a link at the top that says trust and security. And that's not something that you normally see in a main navigation. of a site. And, you know, coming off the discussion we just had around maybe companies should put more emphasis on this. It's actually interesting to see them doing that and putting it up there and having an FAQ. What data do we collect? Where does the data live? I would not be surprised to see this become a more common pattern that we're going to see across AI sites trying to talk about the product and get people to entrust them with lots of sensitive information. Totally. Well, overall, The style is very clean. It's very fresh. It's very modern. So from a visual perspective, I think it looks very nice from a copy and, you know, overall description. And are you communicating what the product does into your users? I'm still very confused on what it actually does and who should use it and why. And so I think there's a lot of room for improvement on that. Totally. And what I would encourage... all kind of founders to do something that we did in the early days is you should go to your users and ask them, what do you think of this website? Try not to make it clear that it's your website, because they're going to be too nice to you and not tell you the truth. But, you know, you need users to tell you if it's resonating with them. That's the ultimate test. That is absolutely the ultimate test. We're just two people that are here behind some cameras, you know, talk to your users. All right. Let's do another one here. Slashy, your intelligent inbox. So first of all, their logo kind of confused me a little bit. It looks like S slash Ashy. Is what it makes me think of. So I get that it's clever and it's got a slash in the slashy. But if I had just seen that without the context of like slashy.com, I think I would have thought this was a slash. Okay, your intelligent inbox slashy drafts replies in your voice schedules meetings and handles follow up so you spend less time managing email. Okay, cool. So it's like a new... email product. And they've got a demo here that's pretty big. It's cool to show a demo, but there's so much going on. There's so much text in the demo. It's hard for me to mentally orient around what's happening and what it wants me to take away from this. So I see Pied Piper metrics before Thursday. I see something happening in an agent in the bottom right that it keeps flipping over to, but it's not slow enough where I can get my head around what it's actually typing, what's happening and what the product is doing here. That's fair. I will say what they're doing well is I know immediately what it is. I know that, okay, this is kind of like superhuman. This is a Gmail replacement, right? I actually have this problem myself. My email is overloaded. But yeah, it's like maybe this would be better as just showing kind of the chat inbox, almost like an animation versus a screen recorded video. I would encourage this founder to get an agency to do a really cool animation that might go here and might actually work better than kind of this full screen video right here. Yep. Replies drafted in seconds. okay um and i guess it's going through these tabs here on the side and the problem with these is if you scroll through it's you will miss right the other ones um and these are just seem to be on a timer yeah you can see the line going across at the bottom there um which is cool but the problem with anytime you have tabs is you have to expect that people will not see anything that is behind the other tabs totally you have to assume that i am just going to see well what's interesting wait this is always a good thing to pay attention to. Let's pretend we spent time on Intelligent Inbox. Mm-hmm. Is the timer going? Yeah, like it doesn't look like it. It looks like it's probably actually just starting right when I actually, when I scroll, which is great. But what's interesting, sometimes I notice on sites that the timer might start going before the user is seeing it. And so you don't even realize this, but everyone is actually seeing snippets, even though you might consider it the fourth most important thing. Yeah, I think when we got down here the first time, voice drafts was the thing that was highlighted. And maybe because we were just kind of scrolling back and forth. And so we started the timer without actually reading them. Maybe the other thing that I'll mention here is I can't tell again, what's happening in the screenshots. And I think if I was like really, okay, AI drafts and what's happening. And I tried to really orient myself and pay attention. I could try to figure it out, but most users are not actually looking at something for the first time and [40:00] spending that level of depth and scrutiny on what's happening. And so it's cool they're showing the product. I wonder if there's a more focused, dumbed down way to actually communicate what is happening with each of these rather than showing all the granularity and level of detail of the actual interface. Totally. Okay. So we've got some social proof here, loved by the busiest people. We've got an investor at Redpoint. We've got a content creator who I don't know. Um... So, all right. So some people use this. And again... They've got a security link up at the top. They've got social proof here on, here's people that are actually using this because again, you're asking them to entrust you with your inbox. And that is one of the most sensitive areas to give anybody access to. So it's an interesting challenge for how can you build that trust and get people to download and start using it. Yeah, social proof is so important, right? That's always why typically you see logos above the fold. I think founders should always consider though, who they're using as social proof. Like just as an example, I see investors and founders and I think, OK, this is for investors and founders, which, you know, kind of makes sense. Like they are busy people which have lots of emails. But immediately I just like even with both investors on this side, on the left hand side, I think, oh, wait a second. Is this just an inbox for VCs? Yeah, maybe it is that they're targeting founders and VCs. I'm not sure. Or is it for general superhuman kind of thing then writes in your style okay this is cool because you know it's showing that it's going through and um and making edits uh that actually match the style like that view right there that's awesome this is really this is like kind of the animation that i was talking about something you could design in magic patterns by the way but this is really really neat where i i totally get what it's doing here And handle your inbox from iMessage. Again, we got more of these tabs. It started at the third one down there, so... There was a review and approve. Um, But yeah, same... Same as above. That's cool, too. It's interesting to me. Like, this is kind of what's resonating with me, right? Like, oh, my, you know, there's so many problems with you have so many inboxes, whether it's text messages, WhatsApp, your Gmail, your Slack, and it's kind of consolidating that like this is really resonating and. Yeah, it would be cool if that was maybe that should be pushed to the top if users are... appreciating that yeah and that's a problem i have too many inboxes and so that would have resonated with me to the extent that i am both a founder and a investor that would be interested in this one more thing that i think is great is actually just how long this landing page is. I learned this from the post hog guys, actually. So the post hog folks had a massive footer to communicate that they were, you know, a big company, right? And so I always encourage folks to think about like, what is kind of the meta thing that's being communicated? And just by the sheer fact that it's a really long landing page, I think, oh, this company's been around a while. Yeah, it does a good job of spacing down the page, calling out the main And it looks very nicely professionally designed, which helps build that trust as well, which is really important. So overall, I think this this is really well done. Great. Thank you, Slashy. As someone who comes from a front end engineering background, how did you get better at design and improving your design taste? So one thing I try to just look at beautiful things, like as an example, there's a Matisse exhibit here in San Francisco or just kind of consuming. things that you enjoy aesthetically a great book to read is like the design of everyday things And again, always considering the human and the user. I think there's this big misconception in Silicon Valley that design is... pixel perfect border radius. And it's not, it's thinking through the user experience. And of course, having high fidelity UI, that's beautiful, right? Yeah. And how do you do that? What are some things that you do maybe in your day to day as you're building magic patterns and leading the company as well that you do to try to put the user front and center and always keep that voice of the user in your head? You know, like a couple of things that we do is everyone in our company does customer support. So every single person is in the... support inbox talking to users every single day seeing their frustrations when they can't find the share button because we have two ctas that are the exact same color two primary buttons right and the next thing you know because the engineers there they're going ahead and and fixing it because they experienced the user problem firsthand and also just having a very high bar right where if something looks off and it just feels off We encourage all of our team to go ahead and tackle that. Spend time on the extra 20%. Don't just have the vibe coded Output. and not take it to the next level. [45:00] And how do you, balance that? Because obviously doing that sounds great. The trade-offs are now it's going to take longer to ship something. How do you balance the speed of shipping quickly with actually, you know, going above and beyond and making something that that is actually excellent rather than the thing that was just okay. Yeah, well, it's all about trade-offs, right? And if you don't do that... You might have tons of users that are on your site and then they're leaving. They're not understanding it. Their their workflow is blocked. Right. And so you have to have faith. that it is worth it. And for us, we have tremendous faith that it is worth it, that it is important to think through and to take your time doing something. And I think it's also like people love saying, if it's well designed, it must have taken so long to ship and they're so slow. I can practice not... Not really. You can still be really fast, especially considering how much everything is sped up when it comes to writing code. Yeah, it's actually really interesting. Those tradeoffs don't have to exist anymore. historically they had to exist. What's next for Magic Patterns? What's next on the roadmap for you? And where do you think design is going from here? Yeah, so this week we released Magic OS, which again is our new version of our canvas. It's like Pinterest and Figma had a baby. And you can... chat with it, prompt with it to make designs, bring in your PRDs and your context. I think what's next for the future of design, well, one thing's for sure, it's moving very, very fast. And anyone who thinks that they know for sure, you know, probably is just making it up. Right. But I think one thing that's certainly true is code as a medium is here to stay because clearly the frontier labs and everyone is working on making coding agents very, very good. And that is the ultimate problem. medium for production and for your users yeah it's interesting um Code is just another medium, like you said. And there's lots of different mediums by which products are created and users experience products. And this is just a new one that has now new tools to be able to build things that weren't possible before. And it's really exciting to see everything get taken to a new level and new things being possible that almost seemed like they never would be. And so it's awesome to have you on and see how you guys are enabling that with Magic Patterns. And really appreciate you joining. Yeah, thanks so much. Well, that does it for this episode of Design Review, and we'll see you on the next one.