Shopify Design Chief Swaps Static Figma Layouts for AI Prototypes

Shopify设计主管以AI原型取代静态Figma布局 尽管人工智能消除了编写代码的技术瓶颈，但随着设计师转型为战略编审者，人类品味和审美判断仍是终极差异化优势。 Marvin Schwaibold概述了AI编程智能体如何将设计师提升为全栈编审者，促使Figma从最终交付工具转变为早期草稿本，同时交互原型则直接通过Codex和自定义参数调优工具包进行构建。他强调，随着代码生成日益普及，人类品味、渐进式呈现和可中断的微交互将成为数字工艺的核心差异化所在。在后半部分，Schwaibold与Epstein对提交的落地页（包括nStack、SkillSync、InstaPlay、Mintlify、Nolefy和Instinct）进行了点评，指出了滚动劫持、程序化视觉噪点、混乱的排版和支离破碎的叙事层级等常见误区。 设计师正在转型为编审者和提示词架构师，他们仅将Figma作为草稿本，随后直接通过Codex和Claude Code等工具生成功能性代码和WebGL原型。 (0:00) AI显著降低了构建自定义内部开发工具的成本（例如通过DialKit嵌入参数滑块），从而能够进行快速的触觉化调优，避免繁琐且反复的聊天提示交互。 (24:32) 多智能体工作流可大幅提升视觉保真度，例如将着色器截图传递给ChatGPT进行分析性点评并生成高度图，以在WebGL中正确渲染217,000根草叶。 (21:50) 产品网站必须保持编审层面的克制，避免程序化AI杂乱元素、平滑滚动劫持以及强制登录门槛，转而支持清晰的视觉主导与渐进式呈现。 (30:52)

Shopify product design studio lead Marvin Schwaibold argues that artificial intelligence enables designers to become 'full-stack' by shifting from static Figma mockups to functioning, interactive code. He contends that high-volume automated output elevates the designer's primary duty into rigorous curation, taste, and kinetic craft. AI-Driven Prototyping and the Designer as Editor (0:00) Rather than spending full cycles producing pixel-perfect layouts in Figma, Schwaibold treats the tool as an early ideation scratchpad to map complex spatial logic and interruptible motion states. Designers then feed these visual representations and decomposed subtasks into terminal tools like Codex and Claude Code to build interactive desktop and mobile demos. Because generating functional code is now trivial, Schwaibold asserts that output volume is no longer the bottleneck; human judgment must decide what looks right and what should advance to production. Fine-Tuning Interactive Physics and Multi-Agent Collaboration To build advanced visual interactions, designers must decompose concepts rather than rely on plain text prompts. When prototyping a realistic grass shader, Schwaibold used ChatGPT to critique initial flawed Codex outputs, leading to discrete layers of lighting, shadow mechanics, and topographical elevation maps. Kinetic physics—such as a 91-iteration physics-driven carousel inspired by Mike Matas—cannot be tuned conversationally. Instead, embedding lightweight runtime panels like DialKit allows designers to manipulate dynamic sliders and test physical parameters directly in real time. Modernizing Enterprise Interfaces at Shopify (3:44) Shopify integrates this high-craft ethos across core enterprise surfaces: modernizing the primary web admin interface and dashboards while scaling Sidekick, its conversational AI infrastructure layer. Rather than writing extensive PRDs or maintaining isolated skunkworks labs, small design teams build functional demos inside an internal admin playground. This environment allows merchants to act on contextual Sidekick suggestions that directly mutate store data and surface relevant interface components in place, bypassing deep menu navigation. Editorial Restraint and Landing Page Hierarchy (30:52) In evaluations of startup websites such as nStack, SkillSync, InstaPlay, and Mintlify, Schwaibold and host Aaron Epstein advocate for strict visual hierarchy and progressive disclosure. Common pitfalls include premature sign-in walls, dense text layouts with four or five competing font sizes, and arbitrary AI-generated filler animations that add visual noise rather than clarity. Schwaibold recommends reducing landing pages to a clear primary headline and three core thematic pillars that serve as executive summaries for the rest of the site. Interruptible Motion and Respecting Native Controls (55:41) Schwaibold and Epstein caution strongly against scroll-jacking and artificial smooth scrolling, noting that digital interfaces must enter 'politely and quietly' without hindering user muscle memory. Grounded in Apple interface design principles, interactions must remain fully interruptible so users are never trapped waiting out scripted motion ramps or modal animations. To solve recurrent navigation and touch issues across the web, Schwaibold points to open-source solutions like Blossom Carousel that preserve native swipe and drag physics. The hosts conclude that while modern AI tools provide an infinitely patient partner for building advanced software, they cannot supply aesthetic taste, strategic reduction, or respect for native user interactions. The responsibility rests on founders and designers to rigorously curate automated output, test functional prototypes early, and ensure every interface element serves a deliberate narrative purpose.

Shopify产品设计工作室负责人Marvin Schwaibold在Y Combinator节目中指出，AI正将设计师转变为需要主导审美决策与代码落地的“全栈编辑者”；他强调在原型构建与界面叙事中，团队必须依靠极度的减法、可打断的原生交互与真实代码验证来维持高水准体验。 从Figma草稿到可运行代码的原型重塑 (0:00) Marvin Schwaibold表示，AI工具的普及深刻重塑了设计工作流。Figma不再是耗费整个设计周期的静态画布，而退化为记录早期构思、拆解复杂交互状态或向AI解释布局模式的“草稿本”。通过Codex、Claude Code及终端工作流，设计师能够迅速将概念转化为可在手机和桌面直接测试的交互原型。他认为，AI虽然大幅提升了执行复杂技术和代码的能力上限，但其本身缺乏审美判断，无法自行区分设计的好坏；设计师的核心角色由此从繁重的像素绘制转向把控方向、拆解子任务以及筛选优质产出的“策展人”与“编辑者”。 多智能体协同与微交互参数的物理调优 (21:50) 在探索高拟真Web着色器等复杂动效时，单凭给代码模型的提示词往往难以得到理想效果。Schwaibold分享了构建实时草地着色器的经历：他先利用Codex生成初版WebGL代码，再将渲染截图与真实素材送入ChatGPT作为批评智能体，排查出光照与地形深度缺失的问题，并通过生成地形高度图纠正基础几何结构。在调整动态物理交互时，针对如Mike Matas风格的联动物理轮播，他经历了多达91次提示词迭代，发现单纯与大语言模型对话无法微调细微的动力学手感。团队通过npm引入DialKit等即时调试面板，利用滑块直接操控风力、下拉加速度等运行参数，证明了自定义调试工具门槛已大幅降低，设计师必须通过真实的触觉反馈来调优微交互。 Shopify管理后台与对话式界面的双轨推进 (3:44) 在Shopify推进现代化的背景下，设计工作室承担着互为补充的双重任务：一方面通过高保真视觉探索对核心Web管理面板及仪表盘进行现代化重塑；另一方面为对话式AI层Sidekick搭建基础设施，探索情境感知的“Sidekick建议”。商户无需穿梭于层层嵌套的后台菜单，在主页选定修改建议即可通过侧边对话框直接变更店铺数据与界面。设计团队在内部的Admin Playground中直接编写并运行交互演示，多位设计师共享同一环境进行验证。Schwaibold与Aaron Epstein均强调，在企业级软件中，可交互的实时原型在推动跨部门共识和高管决策上的效用远胜于冗长的产品需求文档（PRD）。 首页叙事减法、层级收敛与降低转化阻力 (30:52) 在评审nStack、SkillSync、InstaPlay等初创公司网站时，Schwaibold指出初创企业普遍存在功能堆砌和层级失衡的通病。例如nStack缺乏统领视觉的支配性号召（缺失“Diktat”），SkillSync滥用缺乏明确意义的AI装饰微动效并过度依赖侧边栏标签，而InstaPlay则在用户尚未体验自创游戏前就设置强制登录墙，破坏了用户获取流程。他主张主页设计必须遵循严格的减法原则与渐进式呈现，将其视为各子页面的第一章导读；对于展现AI生成能力的平台，必须前置核心生成器并吸收前期的算力成本，通过即时可玩的体验打消摩擦，而不是过早拦截用户。 坚守原生交互节奏与杜绝滚动劫持 (55:41) 针对部分网站采用的平滑滚动与动态拦截，Schwaibold提出严厉批评，认为网站上的“滚动劫持”（scroll jacking）严重破坏了用户在长期使用中建立的肌肉记忆，造成操作迟滞和生理层面的不适。他引用Dieter Rams“安静礼貌地进入房间”的设计哲学，强调软件必须具备“可打断性”（interruptible interface），瞬时响应用户的注意力转移，而非强制用户等待预设动画播放完毕。此外，在Instinct等网站的审查中，他建议精简冲突的字体层级，避免冗长缓慢的悬浮触发动画，直接循环播放核心高潮动作，并推荐利用如Blossom Carousel等开源手势套件来保障基础交互的丝滑稳定。 本期对谈展现了AI工具如何打破设计与工程的传统边界，赋予个体构建全栈原型的能力；但讨论也明确指出，工具链的自动化加剧了信息过载与模板化风险，如何以克制的叙事架构剔除无用动效、维持符合人体工学的原生交互体验，仍是依赖人类设计师审美与批判性裁决的核心难题。

## Background 本期节目由 Y Combinator 于 2026 年 10 月 28 日在其播客频道《Design Review》发布。节目特邀 Shopify 产品设计工作室负责人、前 Molly 工作室联合创始人 Marvin Schwaibold 与 YC 的 Aaron Epstein 展开对话，重点探讨 AI 工具如何重塑现代设计流程，使设计师演变为具备全栈能力的“编辑者”，并现场评审了多款初创团队提交的实际网站。 ## TL;DR Marvin Schwaibold 分享了他如何将 Figma 从繁重的交付工具转变为构想“草稿纸”，并利用 Codex、Claude Code 和 DialKit 等工具直接构建高保真可交互原型的现代全栈工作流。他强调在 AI 极大降低工程实现门槛的时代，设计师的核心竞争力已转向审美把控、任务拆解与“编辑筛选”能力。随后，两位主持人逐一深度评审了 nStack、SkillSync、InstaPlay、Mintlify、Nullify 和 Instinct 六个初创企业网站，系统拆解了渐进式披露、手势可打断性、抵制滚轮劫持、三维吸睛组件及排版克制等关键交互与视觉设计法则。 ## Atmosphere & style 整场对话洋溢着硅谷硬核工程技术与顶级设计工艺交织的极客氛围，既务实又极具启发性。Aaron 与 Marvin 的配合默契自然，从底层着色器调试到宏观信息架构娓娓道来，语言犀利坦诚且充满建设性。面对参评网站中滥用动效、滚轮劫持等设计通病时，嘉宾的点评一针见血却不失幽默，让听众在浓厚的工匠精神与探索欲中，真切感受到 AI 时代全栈设计师突破技能边界的兴奋与掌控感。 ## Bulletin - `00:00` Shopify 产品设计负责人 Marvin Schwaibold 指出，AI 工具链（Codex、Claude Code 等）正将设计师的角色从纯视觉制图转变为“编辑者”，设计与前端工程的传统壁垒正在被快速瓦解。 - `12:45` 高保真可交互原型在组织沟通中展现出绝对优势，其实际推进效率与共识达成能力远胜传统的静态 Figma 稿件与繁琐的 PRD 文档。 - `24:50` 通过引入 DialKit 等可视化参数调节面板与多智能体（如 ChatGPT 与 Codex）元提示协作，设计师能够突破底层数学与物理模拟瓶颈，大幅提升复杂动效与 Shader 的调优效率。 - `55:40` 在针对多款初创产品网站的评审中，嘉宾强调了克制设计、渐进式信息披露、保持原生可打断滚动（抵制平滑滚轮劫持）以及将核心业务章节直接铺陈于首页的关键原则。 ## Key takeaways - `00:00` 设计工作流发生根本性迁移：Figma 逐步退化为记录灵感与解释视觉概念的“草稿纸”，而 Codex、Claude Code 与终端环境则成为快速生成真实可运行 Demo 的核心主战场。 - `02:00` 在 AI 能轻易放大产出数量的时代，设计师的核心竞争力从基础排版操作全面转向了“审美判断力、品质把控与精准筛选（curation）”。 - `05:00` Shopify 采用“双轨设计战略”：一条管线深耕精细化的 Web 端新后台 UI，另一条专注于利用 Sidekick AI 基础设施实现对话驱动的界面自动化操作。 - `08:00` “渐进式披露”（Progressive Disclosure）是优秀信息架构的核心：永远让深入内容的层级只差一层，避免一次性用海量未经提炼的杂乱信息淹没用户。 - `12:45` 可交互原型的传播效力与决策说服力远超任何 PRD 文档，AI 赋予的工程能力催生了能独立完成过去庞大团队工作量的“单兵作战（one-off armies）”。 - `15:00` 后台界面的革新方向是“主动将 UI 融入当前上下文”，通过 AI 建议让用户免于在繁琐深奥的多层级菜单间迷失与反复跳转。 - `20:00` 针对 AI 难以理解的非语言交互逻辑（如手势可打断机制），利用 Figma 快速绘制状态色块草图作为视觉提示词，能极高效率地纠正代码生成偏差。 - `22:20` 复杂图形与着色器复刻依赖多智能体反思协同：借助 ChatGPT 拆解光影方向与高程微地形图，才能让平面代码渲染出具有真实体积与自阴影的草地效果。 - `24:50` 轻量级可视化调参工具（如 DialKit）抹平了微观参数调试与底层数据偏差排查的高昂沟通成本，使设计师能实时捕捉细腻的物理动效临界点。 - `27:15` AI 扮演着“具备无限耐心的全天候导师与合作者”，允许设计师在数十次乃至上百轮提示迭代中大胆实验、逆向工程并精进技术认知。 - `31:18` 首屏必须具备清晰的视觉焦点与主行动点（CTA），过早直接展示复杂产品操作台或混淆次级按钮样式会导致用户陷入认知混乱。 - `38:00` 警惕将核心价值藏在横向浅层标签（Tabs）后或堆砌无意义的 AI 微动效；真正高效的抽象视觉应当如 Google Gemini 的双螺旋光带般精准传达底层能力。 - `40:50` 以生成为核心的产品必须前置“Aha 体验时刻”，在强制弹出登录注册墙阻断流程前，务必提供足够额度让用户直观看到自己的生成成果。 - `45:25` Mintlify 展现了极致克制与信息提炼的价值，通过严密的排版节奏、环境肌理与标杆客户背书建立起高信任度的开发者基础设施形象。 - `55:40` 严格遵从从上至下的滚动信息层级，坚决抵制任何破坏肌肉记忆与原生手感的“滚轮劫持（Scroll jacking）”，始终践行苹果与迪特·拉姆斯倡导的礼貌与可打断原则。 - `01:02:00` 践行“首页板块即为子页面第一章”的叙事策略，将技术、公司等核心支柱以章节与内联抽屉形式在首页平铺，避免依赖转化率低下的独立跳转链接。 - `01:03:00` 排版系统需保持高度克制：衬线字体适合作为点睛的大标题风格元素，正文排版必须回归清晰易读的无衬线字体，并确保多端交互组件的原生顺畅支持。 ## Detailed walkthrough ### `00:00` 从 Figma 到 AI 工具链：设计流程与角色的转变 在节目开场中，Aaron Epstein 介绍了嘉宾 Marvin Schwaibold。Marvin 目前在 Shopify 领导产品设计工作室，负责在 AI 时代重新审视并重塑公司最核心的产品体验。在进入具体产品细节前，两人深入探讨了当下的设计工作流程以及 AI 工具如何改变设计师的工作方式。Marvin 解释道，从宏观层面上看，设计本身的底层流程并没有根本性改变，依然是高度迭代、循序渐进的，包含大量的变体探索；然而，使用的工具链（tooling）却发生了巨大的转变。过去设计师主要在 Figma 中死磕静态美学排版，而如今 Figma 更多被当作记录灵感的“草稿纸”（scratch pad）。 现在的日常工作迅速演变为以 AI 为核心的工作流：在 Figma 里勾勒好初步概念后，会立刻使用 Codex、Claude Code 以及终端（terminal）等工具，快速生成能够在手机或电脑上实际交互、测试的真实 Demo。只有当需要做版面布局或向 AI 直观解释某个视觉细节时，他才会偶尔返回 Figma。Aaron 随即追问，在这个新流程中究竟是 AI 在主导，还是人类在主导？Marvin 强调人类始终处于驾驶座上，设计师的职责在于将复杂的大任务拆解为细小的子任务逐步喂给 AI，并做出高质量的决策与筛选。 “We’re more the editors now than ever before which is, I think, fun.”（Marvin Schwaibold 说道，“比起以往任何时候，我们现在更像是编辑，我认为这很有趣。”） - **工具链迁移**：从“以 Figma 为核心的静态画布排版”全面转向“Figma 草稿 + Codex / Claude Code / 终端命令行”的代码与交互 Demo 快速生成。 - **设计师的新角色**：产出物（output）的数量与速度已不再是瓶颈，核心竞争力转向了“品味、品质把控与精准筛选（curation）”。 - **AI 的边界与局限**：AI 具备极强的技术复杂度承载与代码编写能力，能够突破设计师手写代码的技能上限，但它本质上不是手工艺者（crafter），无法感知美丑，必须依赖设计师给予方向与审美纠偏。 ```mermaid flowchart TD accTitle: AI-Driven Design Workflow accDescr: The modern AI-driven design workflow moving from ideation in Figma to execution in terminal and iterative editing. subgraph Ideation ["1. 灵感与构想"] A["Figma (草稿纸/快速布局)"] end subgraph Generation ["2. AI 赋能实现"] B["任务拆解 (细分子任务)"] C["AI 工具链 (Codex / Claude Code / Terminal)"] end subgraph Verification ["3. 体验与审查"] D["可交互 Demo (手机/电脑端测试)"] E["人工编辑与品质把控 (品味/审美筛选)"] end A --> B B --> C C --> D D --> E E -->|"需补充视觉说明"| A E -->|"微调指令与迭代"| C ``` --- ### `05:00` Shopify 的双轨设计战略与 Molly 工作室的交互美学 Shopify 至今已有 20 年历史。Aaron 提到，如今不仅是用现代设计美学翻新系统的契机，更是用 AI 重构核心体验的关口。Marvin 透露，他在过去一年里带领团队推进了一项全公司级别的大规模设计重塑计划，覆盖了名为“绿色应用”（green app）的移动端 App、核心后台 Admin 仪表盘，以及公司底层的 AI 基础设施 Sidekick。当前 Shopify 的设计组织形成了既对立又互补的“双轨结构”：一方致力于从 Figma 出发，打磨精致的 Web 端新后台 UI；另一方（Sidekick 团队）则专注于通过对话流和 AI 基础设施来操纵并自动化后台界面，让商家通过聊天即可管理业务。这两种模式相互交织，让移动端体验变得极其对话化，减少了在层层菜单中手动配置的操作负担。 随后，话题转向 Marvin 在加入 Shopify 之前与合伙人 J-Tel 在布鲁克林共同创立的知名设计工作室 Molly。在运营该工作室的两年间，他们服务了包括 Collins、Apple、Google 在内的众多巨头及精品客户。Marvin 展示了 Molly 的作品集视频，Aaron 称赞其细节极为动人——例如视频播放时，其背后的渐变与阴影会根据画面主色调实时动态流转，营造出类似电视墙面环境背光（ambient lighting）的有机呼吸感，在用户未滚动前就像雷雨云般微弱震颤，引诱用户向下探索。 Marvin 详细拆解了 Molly 的核心设计理念系统——“Primal”。该系统旨在面对客户堆砌的海量信息时，将其规整为循序渐进、逐层揭示（progressive disclosure）的探索结构，使用户在浏览网页时感觉像是在自发探索，而非被网站强行霸占注意力。在展示与设计机构 Collins 合作长达一年的官网改版时，首页被构造成不同的探索“章节”，其中最为惊艳的“书架”（bookshelf）模块以独特而富有弹性的物理动效呈现案例研究。Marvin 回顾道，在 AI 时代之前，这类细腻的动效完全依赖设计师与工程师（如协作者 Jesper）之间的密切手工协作——由设计师在 Figma 中精细计算间距、尺寸与行列，再由工程师通过代码精确计算书本层叠与碰撞回弹效果。 “To us it always felt like the way we would build websites and you would flow through the website felt more like you were exploring the website than the website was demanding your attention.”（Marvin Schwaibold 说道，“在我们看来，我们构建网站的方式以及你在网站中的流动体验，更像是你在主动探索网站，而不是网站在强行索取你的注意力。”） - **Shopify 的双轨设计组织**： - *Admin 重构线*：深耕 Figma 精细化排版，打磨高质量新版 Web 界面。 - *Sidekick AI 基础设施线*：利用对话交互驱动后台任务自动化，让商家摆脱传统 UI 点按繁复操作。 - **Molly 工作室的运作原则**：保持极小团队规模，单次仅承接 2 至 3 个客户，保持每周高频沟通，展开短周期、高密度的专注合作。 - **渐进式披露设计哲学（Progressive Disclosure）**：所有内容深度永远只差一层（just one layer away），拒绝一次性用海量信息淹没用户，赋予用户掌控感与探索乐趣。 ### `10:00` 极致细节的价值：从设计彩蛋到加入 Shopify 谈到为品牌工作室设计网站时的交互细节，Marvin 详细剖析了书本落下的动态效果：当最后一本书叠上去时，书架会再次微微下沉，这种弹跳感必须做得极其自然有机，才能传达出“书架是鲜活的”微妙感觉。Aaron 提出疑问，为什么在一个标签页（Tab）切换交互上，值得专门安排一位顶级设计师花费大量时间死磕，毕竟任何人花五秒钟随便套个现成组件也能用。Marvin 解释道，因为那是设计工作室自己的门面，来访的潜在客户恰恰在寻找这种“设计彩蛋（Easter eggs）”。客户希望看到的是：如果这家工作室对自己网站的细节如此吹毛求疵，那未来合作时，他们必然也会在客户的项目中倾注同等的匠心，比如精心推演出一套科学的色彩系统，而不是凭感觉随手挑五个好看的颜色。 随后，对话转向了 Marvin 卖掉自己的独立设计工作室 Molly 并加入 Shopify 的决定。谈及这一重大转变，Marvin 回忆起 Shopify 创始人兼 CEO Tobi Lütke 在前一年的表态：Tobi 直言我们正在迈入一个全新纪元，而这个未来必须被设计出来，因此他需要顶尖设计师来帮忙勾勒出蓝图，一旦蓝图清晰，公司就能沿着这个方向全力以赴。Shopify 是一家自我认知极强、由工程师和创始人驱动的坦诚组织，设计正在其面向商家的工具与软件中扮演前所未有的核心角色。Marvin 表示，在 Molly 时为 Collins 或插画师 Spencer 设计网站固然很有趣，但他们更渴望产生更大规模的影响力，检验自己的界面交互范式在数百万真实用户面前是否依然成立，而不是仅仅服务于在小众网站上浏览的少数人。 - “Because if that feels bouncy and organic, then it alludes at the idea of, oh, it's a book, it's a bookshelf, that's alive.” —— Marvin 强调有机交互细节能赋予界面生命力。 - “Toby, at the beginning, at some point last year, basically said, we're entering a new era and that future needs to be designed.” —— Marvin 引用 Tobi Lütke 关于未来需要被设计的核心论点。 - “We also wanted to have a larger impact and see if our strategy would hold up on interface paradigms with millions of users versus the few users, I guess, that would scroll around the Spencer website.” —— Marvin 解释加入大厂是为了验证产品设计在规模化用户场景下的有效性。 --- ### `12:45` AI 赋能下的产品演进：一人顶一军与可交互原型 进入 Shopify 后，Marvin 的产品设计工作室目前专注于 Sidekick（Shopify 的 AI 基础设施层）。与过去在某些公司遭遇的边缘化孤岛状态不同，该团队如今深度契合公司的当前工作流、时间节点与产品路线图。由于团队拥有顶尖设计师，他们先在 Figma 中重构界面，然后借助 AI 技术，以极快的速度将设计方案转化为可感知的交互原型。Marvin 指出，可交互的原型比任何一份 PRD 文档都要有效一百万倍；这些原型能像野火一样在公司内部病毒式传播，一旦 Tobi 看到中意的原型，团队就能立刻立项将其落地为实际产品。 这种由 AI 驱动的工作流彻底重塑了团队规模与协作模式。过去在 Molly 时，所有的交互样式必须纯手工设计，动效全靠研发一行行手写，Marvin 提出艺术构思后，还需要跨越成百上千个环节的协同推进。而如今，AI 工具的赋能使得“单兵作战（one-off armies）”或两人微型团队能够轻松搞定以往庞大团队才能完成的工作量。这不仅极大地解放了生产力，更大幅降低了推动内部共识（buy-in）的沟通成本，因为一个拿在手里就能操作的交互原型，其说服力远胜于费尽口舌召集跨职能部门为某个虚无缥缈的概念开会。 ```mermaid flowchart TD accTitle: 原型驱动与传统PRD流程对比 accDescr: 对比传统通过撰写PRD文档推动跨团队沟通的繁琐流程，与如今通过AI生成可交互原型快速获得高层认可的高效流程。 subgraph OLD["传统协作路径"] A1["概念/艺术构思"] --> B1["漫长手工设计 & PRD文档"] B1 --> C1["跨职能团队反复开会推进"] C1 --> D1["高昂沟通成本 / 难以达成共识"] end subgraph NEW["AI 赋能的敏捷路径"] A2["概念想法"] --> B2["Figma 初稿 + AI 工具转译"] B2 --> C2["高保真可交互原型"] C2 --> D2["内部病毒式传播 / Tobi等高层直接确认"] end ``` - “And as we all know, prototypes are a million times more useful than any PRD document you can write.” —— Marvin 评价交互原型相较于传统 PRD 文档的压倒性优势。 - “Right now, I'm seeing one-off armies or teams of two going off and doing the work of many because the tooling is just allowing us to do that.” —— Marvin 感叹现代 AI 工具赋予了极少数人成倍放大产出的能量。 - “Because I can show up with a prototype and get people's attention faster than I can if I have an idea and I have to get a whole team rallied around an idea.” —— Marvin 谈及用原型争取资源与获得关注的高效性。 --- ### `15:00` 重构后台与上下文 UI：Sidekick 如何改变操作范式 Marvin 展示了团队目前为 Shopify 商户打造的后台（Admin）体验改版，包括全新的首页 Feed 设计以及对整个产品的视觉和功能翻新。其中最核心的探索在于“Sidekick 建议（Sidekick Suggestions）”机制：系统会自动捕捉商户在自身业务宇宙中的潜在机会与收益点，并在首页将这些建议直接呈现给用户。例如，系统可能会提醒商户“建议重写某款产品的商品描述”，商户点击建议后便直接触发与 Sidekick 的对话；商户在对话框中确认方案后，甚至无需跳转到商品详情页，Sidekick 就会在后台完成批量修改并实时发布生效。这一范式的转变核心在于“将 UI 主动带入当前上下文，而非让用户在复杂层级间迷失”。 在这个开发流程中，设计师们直接在带有开发者 UI 面板的 Admin Playground（沙盒环境）里构建演示 Demo 和代码片段。整个设计团队都在该环境内持续调试、添加新模块，并将所有人探索的版本聚拢在同一个链接下。Aaron 敏锐地指出，大部分团队的设计师只停留在画稿阶段，而 Marvin 的团队却做到了“既设计又构建”，从而能在真实数据流与真实交互下闭环验证。Marvin 解释称，这个 Playground 并不是直接跑在主代码库上的生产代码，它是一个安全的试验场，但 AI 已经彻底赋能了设计师，让他们拥有了将脑海中任意想法快速可视化的硬实力。 - “The concept is more, can we bring UI to the user and into context versus having the user click through the interface?” —— Marvin 阐述将 UI 融入场景以减少用户点击层级的核心产品理念。 - “And then we all come back together, and it actually lives all inside the same demo and the same link. And it's just a beautiful way to share ideas and context.” —— Marvin 介绍全员在同一个交互 Demo 链接中协同迭代的高效体验。 --- ### `18:00` 从 Figma 操练场到 AI 代码桥接：设计与工程边界的演化 为了说明这种全栈设计能力的蜕变，Marvin 回顾了之前在 Molly 为设计机构 Collins 制作网站时的传统模式。当时他和 Michael Speichert、Jay Tall 共同在一个庞大而极其详尽的 Figma 画布中作业，里面塞满了桌面端和移动端的各个状态与演进分支。Marvin 坦言，在那个时代，直接在代码中试验设计的代价过于昂贵且笨重，因为设计师自己写不出来，必须打扰研发团队抽出专属工程师来配合搭建测试，所以他们只能把 Figma 当作唯一的操练场，在画布上把所有极值情况全面压测完毕后，才敢找工程师交付。 如今情况发生了翻天覆地的转变。虽然 Figma 依然被 Marvin 用来捕捉构思和快速草绘，但在 AI 工具的协同下，设计师跳过繁冗等待、独立跨越设计与代码鸿沟的能力已被彻底释放。Marvin 提到自己甚至能在短短一个周末内独自借助 AI 跑出极度完整的原型进度，设计验证的周期被急剧压缩，设计与前端工程之间曾经高不可攀的协作壁垒正在被先进的 AI 工具彻底瓦解。 - “These are too heavy and too expensive to test in code we don't want to test this in code right now because it would require an engineer to take a look at it and build it for us.” —— Marvin 回忆过去在没有 AI 辅助时直接写代码测试概念的高昂成本。 - “And all of this had to be stress tested out in Figma first for a very long time before we would go and bug the engineering team.” —— Marvin 解释以前为何必须在 Figma 中进行漫长而彻底的压力测试才能找工程师协作。 ### `20:00` 用 Figma 作为草稿纸：让 AI 理解“可打断”的交互动态 Marvin 介绍了他制作的一个原型：界面上是一个 2×3 的草地动态视频网格。用户可以点击打开其中任意一段视频，并通过下拉手势将其关闭，这套操作在模拟器中同样生效。然而，当他最初在 Codex 中通过语言描述这一需求并生成代码后，发现交互存在一个致命硬伤——手势无法被打断（non-interruptible）。每次用户下拉关闭一个素材时，必须眼睁睁看着它完全回落到位、完全“坐定”之后，才能点击下一个图像。Marvin 直言，这种体验糟糕透顶，“否则用户很快就会对这个界面感到极其烦躁”。 为了解决无法用语言精准表达的动态细节，Marvin 回到 Figma，把它当作“草稿纸”（scratchpad）来梳理逻辑。他在 Figma 中画了几个极其粗糙的基础色块：点击方块弹出红色视图，下拉即可滑走；而在滑走红色的同时，如果手指点击蓝色，蓝色会立刻升起，红色的回退被中途截断；同样的操作也可以无缝衔接绿色。Marvin 将这套视觉草图直接喂给 Codex，AI 迅速理解了他的意图。Marvin 指出，无论是对自己拆解思路，还是对模型解析动作，这种视觉化的草稿纸模式都高效得多；当文字或语音难以描绘某种动态逻辑时，画出来是最好的办法。 ```mermaid flowchart LR accTitle: 手势可打断交互逻辑流程 accDescr: 展示用户在下拉退出当前视图时中途点击新视图的动态流转 subgraph GestureFlow ["手势打断流程"] A["点击展开红框视图"] --> B["下拉红框开始退出动画"] B -->|"中途点击蓝框 (打断退出)"| C["蓝框立即展开"] C -->|"下拉蓝框中途点击绿框"| D["绿框接管展开"] end ``` Marvin 强调，当前的工具生态展示了 AI 时代的两个核心特征：第一是能力极强，第二是对设计者的要求变高。 > “Codex and all the current AI software and the models are extremely capable at creating anything. You can use these tools to make anything that you want, but you have to know what you're doing.”（Marvin Schwaibold 强调） - 核心交互痛点：初始生成的动效缺少中断机制（interruptibility），用户无法在动画未完成前进行下一次操作。 - Figma 的新定位：从交付静态设计稿转变为向 AI 解释复杂空间与时间概念的“草稿纸”。 - 认知拆解能力：面对复杂概念（如着色器或复杂物理动效），设计者必须能够将其拆解成基本组件，理解每个部分，然后再拼合起来。 --- ### `22:20` 从真实视频到草地着色器：解构光影、微地形与多智能体协作 Aaron 追问 Marvin 是如何将真实的草地照片和实拍视频一步步转化为可在网页中实时运行、且外观完全一致的 Shader（着色器）的。Marvin 展示了最初的开发截图：他把实拍视频传给 Codex，下达了极其严苛的 Prompt，要求模型尽可能做到像素级精准、提取实拍中的每一个 Hex 颜色代码、分析图像各组成部分，并用 Shader 在 Web 端复现。Codex 欣然答应并给出了第一版，但画面看起来非常粗糙扁平，完全没有真实感。 面对不及预期的结果，Marvin 采取了“多智能体互问”的策略。他把 Codex 生成的效果图和原始视频截图一起扔给 ChatGPT，向它诉苦并请教：“为什么另一个智能体（Codex）理解不了我想实现的效果？”ChatGPT 充当了设计顾问的角色，帮助 Marvin 理清了底层逻辑：AI 无法凭空构建真实感，你必须明确告知它光源的角度、阴影的投射方式，并建议他将画面横向或纵向拆分为大约 6 个局部，让 AI 逐块构建后再拼装。 更关键的突破在于地底结构的建立。Marvin 发现 AI 把草地默认理解在了一块纯平的地板上，而现实中草坪是依托于起伏的小土坡生长的。于是他让 ChatGPT 渲染了一份地形图（Topographical Height Map），描绘出底层结构的深度与高度起伏，再将这张高程图重新喂回模型。有了高程信息后，AI 绘制的草叶（Grass Blades）开始呈现出簇绒状的体积感（Bushels），光影与遮挡关系立刻变得逼真自然。 - 多智能体元提示（Meta-prompting）：利用 ChatGPT 反思并拆解 Codex 无法解决的设计盲点。 - 物理属性补全：草地不是贴图，必须拆解为光源方向、受光与自阴影、地面高程地形图等多层物理模型。 - 地形起伏的重要性：引入高低起伏的微地形地图后，生成的草丛才真正摆脱了单薄的平面贴图质感。 --- ### `24:50` DialKit 与可视化调参：全栈设计师的参数化调试利器 在草地 Shader 逐渐成型后，Marvin 在一次午餐中与朋友 Josh 碰面。Josh 看了效果觉得不错，但也指出参数需要精细校准，并建议在 Demo 中安装开源工具 DialKit。Marvin 询问 Codex 当前代码中一共有多少种草叶形态变体，Codex 回复称有多达 21.7 万种草叶变异，但它们之间的参数差异微乎其微（仅仅相差 0.6、0.7、0.8 这样的微小数值）。为了不再无休止地通过文字与 AI 来回拉扯，他们为原型接入了 DialKit 控制面板，直接在画面上生成可视化滑块与开关。 有了这套微型控制工具后，许多之前未被察觉的问题立刻暴露出来。Marvin 发现，原来早在 5 轮提示词之前，AI 对地形图的实现就已经发生了严重偏斜，导致后续怎么调都达不到预期效果。DialKit 不仅让底层数据错误无所遁形，还让他能够实时调整草叶长度、开关草地渲染，甚至尽情测试极端的风力摆动效果。 Aaron 和 Marvin 总结道，这种工作流正在重塑行业：在过去，花时间为原型专门写一套用于调整变量的 UI 控件极其奢侈，设计师或工程师往往只能在代码里手动改数值再刷新；而如今，AI 让随手搭建一个专属的参数调节工具（如 DialKit）变得毫不费力。 > “And these are things that I think before AI, I couldn't do. I just, I might have had these ideas, but I wasn't allowed or able to execute on them. And I think that's just in general, what's changing with a lot of the design role right now. Anyway, like it's, designers are becoming more full stack. As are engineers and PMs. It goes in every which way. There's no limitations now, right?”（Marvin Schwaibold 指出） - DialKit 的集成方式：通过简单的 `npm run` 脚本即可将参数调节面板快速挂载至当前项目。 - 调试效率飞跃：直观暴露出多轮 Prompt 迭代过程中累积的底层数据偏差，替代低效的文字反复描述。 - 角色泛化（Full-Stack）：AI 抹平了从概念到工具构建的门槛，设计师、工程师和产品经理都在全面演进为全栈角色。 --- ### `27:15` 复刻 Mike Matas 轮播动效：AI 是一位“拥有无限耐心的合作者” Marvin 展示了另一个借助 DialKit 调优的物理动效案例：一个灵感源自 LoveFrom 设计负责人 Mike Matas 个人作品集的轮播组件（Carousel）。该交互有着极其微妙的物理手感：当用户下拉其中一个卡片并松手时，释放的动能会像涟漪一样向四周扩散，并与左右两侧相邻的卡片触发碰撞反馈。为了还原这种高级感，Marvin 在 Codex 中经历了整整 91 轮 Prompt 提示才拼凑出满意的原型。 在这个案例中，物理模拟的临界参数调节至关重要。例如“Pull Boost”（下拉加速系数），它决定了手指下拉的速度越快、反弹冲力就越强。如果数值过大，整个交互会显得具有侵略性或失控；如果过小，物理回弹的质感就会消失。Marvin 解释道，这类纯粹由直觉决定的微调，根本无法靠语言交流达成，只有通过滑块实时手操才能捕捉到那个精准的临界点。 最后，Aaron 询问非设计背景的创业者或传统 Figma 设计师该如何适应这种新范式。Marvin 认为，AI 本质上是一个“拥有无限耐心的绝佳合作者与队友”： > “Codex won't get mad at me if I need 91 approaches at getting the animation correct. If I had done that with my engineer, they would probably flip out.”（Marvin Schwaibold 调侃道） Marvin 给所有创作者的建议是保持探索与折腾（Tinker）。面对 AI 生成的不完美结果，绝对不要轻言放弃，而是要像与同伴沟通一样，向它指出偏差所在，给它喂入喜欢的网页动效、Cosmos 或 Savee 上的优秀设计截图，或者直接给它指定一套调色板，保持高频的来回迭代与对话。 - Mike Matas 动效核心：手势拖拽触发动能释放，并在相邻元素间产生连锁涟漪碰撞反应。 - 91 次提示迭代：极具质感的交互往往需要数十上百次调优，AI 提供了无摩擦、无怨言的试验场。 - 实操建议：善用高质量审美参照物（如 Cosmos、Savee 截图）引导模型，将直觉转化为参数。 ### `30:00` 用 AI 拆解与复刻：设计师的“无限耐心导师”与网站评审开启 Marvin Schwaibold 阐述了设计师应当如何与 AI 协作：“I think that's really important. And for designers specifically, my trick or what I always learn was just like, just try to copy.” 他分享了自己近期的探索：他正在尝试模仿一段已经存在很久的轮播图（carousel）动画。如今有了 AI，他就像拥有了一位无限耐心且随时待命的良师益友，可以与它一起构建代码并深入底层的实现细节。Marvin 强调，这种实验是他自己在周末用个人时间完成的，完全不需要去打扰工程团队里的同事。通过这种方式逆向拆解并理解组件的底层构成，不仅让他个人获得成长，更教会了他“如何成为一个更好的管理者、更出色的合作者以及更优秀的团队成员”。 随后，节目插入了一则 Y Combinator 的招生口播（提醒有创业想法的人前往 ycombinator.com/apply 申请新批次），接着 Aaron Epstein 与 Marvin Schwaibold 正式进入观众提交网站的设计评审（Design Review）环节。 --- ### `31:18` 评审 nStack：直接进入产品、视觉过载与缺乏主导视觉焦点 评审的第一个网站是 **nStack**，其定位是“你唯一需要的 AI 工作空间”（One powerful agent, one intuitive desktop workspace, and every tool you need to handle any task）。Aaron 和 Marvin 观察到，该网站的亮点在于它直接模拟了一个真实的桌面操作系统环境，用户一打开页面仿佛就已经置身于产品内部，可以直接探索交互，避免了繁琐的注册转化链条。 然而，两人紧接着指出了严重的层级与体验问题： 1. **定位过于宽泛**：宣传语声称能用一个 Agent 和一个桌面处理“任何任务”（any task），导致访客完全无法判断该拿它来做什么； 2. **视觉极度过载**：侧边栏塞满了内容，旁边还有可滚动的聊天记录，主界面的文案与界面控件混杂在一起，用户根本不知道视线该落在哪里； 3. **缺乏视觉主导（Dictatish）**：Marvin 引用了他在德国学习排版时平面设计导师的口头禅——这幅海报“doesn't dictate”（德语风格的词 *dictatish*），意思是画面中没有任何元素在主动指挥、引导访客的视线，让人感到茫然，不知道该点图标、看 Slack 式的界面还是去聊天框打字。 Marvin 建议折叠掉界面中大量制造噪音的杂物，将视觉重点重新聚焦到核心导语与标题上，让用户明白该读什么，并通过极简的路径提供一个快速上手 Demo。 ```mermaid flowchart TD accTitle: nStack 页面改版逻辑对比 accDescr: 对比 nStack 当前杂乱分散的界面设计与改进后的渐进披露设计。 subgraph Current["当前问题状态（视觉过载）"] A1["宽泛宣传语<br/>'处理任何任务'"] ~~~ A2["侧边栏大量杂乱内容"] A3["可滚动的聊天历史"] ~~~ A4["多处样式相同的按钮<br/>General / Marketing / Get Started"] end subgraph Recommended["建议优化方案（渐进披露）"] B1["单一核心主张<br/>明确第一使用场景"] --> B2["主次分明的唯一核心 CTA"] B2 --> B3["轻量化折叠杂项<br/>提供直观快速 Demo"] end ``` --- ### `33:30` 核心行动点迷失：相同样式的按钮与“渐进披露”的缺失 针对页面操作引导，Aaron 提出每个网站都应该有一个最核心的主目标或关键指标（Primary KPI/CTA）。然而在 nStack 上，“Get Started”（开始使用）按钮的视觉样式竟然与中间的“General”、“Engineering”、“Marketing”等标签按钮完全一模一样，色彩与权重全无区分，让用户分不清主办方到底希望大家先点哪一个。 Marvin 指出，许多团队在做网站时试图一次性把所有东西全推给用户，这与“渐进披露”（progressive disclosure）的信息架构原则完全相悖：“It's the opposite of progressively disclosing information.” 他回顾以往在设计网站时的经验表示，即便团队有很多酷炫的视觉作品，也必须挑选一个最引以为傲的核心（例如书本堆叠的视觉锚点）作为叙事主线，让访客围绕这一个点深入探索，而不是试图在同一时刻做完所有事情。若要让直奔产品的“Aha 时刻”真正奏效，必须补充足够的上下文，先给用户一个明确的第一步动作。 - **核心矛盾**：过早把完整产品形态扔给用户，却缺乏清晰的使用指引和单一入口。 - **按钮混淆**：功能过滤按钮与核心转化按钮（Get Started）采用同色同形态，稀释了主行动点的权重。 --- ### `35:00` 评审 SkillSync：扁平标签陷阱与被折叠的核心价值 第二款评审的产品是 **SkillSync**，一款被称为“本地优先的免费 Mac 应用，可在所有 Agent 和队友之间同步记忆与技能”的工具（Free local-first Mac app that carries your memory and skills across every agent and teammate）。 Marvin 与 Aaron 首先肯定了其定位比上一家清晰得多，但随即指出了排版和布局上的硬伤： - **字体排印失衡**：网站处于深色模式（Dark mode），文字字号极其微小，SkillSync Logo 与正文之间的行高和字阶比例很不协调； - **侧边栏标签（Tabs）陷阱**：网站将大量详尽的功能特性藏在一个个侧边栏 Tab 后面。Aaron 强调，大多数用户根本没有耐心逐一点击每一个 Tab，设计者必须默认“藏在 Tab 后面的东西绝大多数人永远看不到”； - **缺乏页面纵深（宽而浅）**：整张网页高度极短，但用户其实完全习惯长页面滚动。把本该展开的信息强行收敛进侧边 Tab，反而让信息架构变成了“一英里宽，却只有一英寸深”（a mile wide but like only an inch deep）。 Marvin 提出了一个“三栏组件”（Three-up component）的重构方案：“I would take all of these features, I would compress this information down and try to understand what are the top three things that SkillSync can do for you.” 他建议团队必须做减法，提炼出产品最核心的三大支柱（X、Y、Z），通过卡片或弹窗引导深入，宁可把页面做长让用户自然向下滚动，也不要把信息锁死在横向扁平的 Tab 里。 --- ### `38:00` 警惕 AI 生成的低效动效：专业信息图与 Gemini 视觉案例 讨论深入到了 AI 工具普及后引发的新设计误区。Aaron 观察到，现在借助 AI 工具生成精致的微动效或小插画变得极其容易，SkillSync 每个 Tab 里都塞入了带着微小文字和小圆点移动的复杂动画：看似高大上，但实际上“没有任何一个人类设计师会专门花大把时间为了一个小角落去逐行编写这种无意义的小圆点位移动效”，而且这些动效对用户理解产品核心价值毫无帮助。 Marvin 借此呼吁，AI 虽能迅速搭建出一个功能完备的静态网站，但在抽象业务逻辑与核心特征时，寻找具备专业信息可视化（Information Graphics）经验的插画师依然无可替代。 作为正面典范，Marvin 回忆起几年前为 Google Gemini 制作视觉资产的经历：当时团队设计了一段高度抽象的动态模型演示，数条代表不同数据流与能力的线条相互缠绕、汇聚编织成一道如同 DNA 双螺旋（helix）般的辫状光带，最终收拢为一条极细的线条并引出“Gemini”的字样。那段动效由一群顶尖艺术家历时许久打磨而成，仅凭几秒钟的直观视觉，就完美传达了多模态大模型的底层能力与融合感，成为了 Gemini 品牌形象中最具标志性的一环。这也反衬出当前许多产品盲目堆砌 AI 动效却言之无物的通病。 ### `40:00` 抽象动效的表达力与 SkillSync 的总结 在回顾 SkillSync 的设计时，讨论提到了工程师如何将复杂的模型逻辑转化为网站上流畅的可滚动动画。那段动态视觉效果不仅直接促成了用户的转化与买单，而且让人在进入产品实际使用后，依然能对该模型的具体运作机理记忆犹新。 有时采用更具艺术感和抽象意味的表现手法，反而能产生极其深远的影响。对于 SkillSync 这类产品，市面上存在成千上万种视觉模式和范例，设计师完全可以在网页排版与图形表现力上展现出更高的工艺水平（craftful）与艺术水准。 > “Sometimes being a little more artistic and abstract actually goes a really long way.” —— Marvin Schwaibold --- ### `40:50` InstaPlay：首屏认知混乱与注册门槛的前置问题 接下来的评审对象是 InstaPlay。访问首页后，映入眼帘的是大量类似电影封面或游戏截图的网格，例如一款名为“Bird sort”的鸟类分类游戏。页面没有提供明确的玩法引导，点击进去后虽然出现了声音，但交互非常令人困惑：用户在与恶狼战斗的游戏画面前不知所措，直到找到“Start”按钮才勉强开始操作。 更核心的体验缺陷在于信息架构的失焦。页面标题“InstaPlay”下方没有任何补充副标题或文案，导致访客必须自己去摸索页面逻辑。虽然页面中设有一个“Describe your game idea”（描述你的游戏想法）的提示词输入框，但由于周围布满了花哨的游戏截图，用户的第一直觉往往是去点击现成游戏，完全忽略了平台的核心价值——“即时由用户自己生成游戏”。当用户在输入框中填写 Prompt 并点击提交后，系统没有直接展示生成结果，而是立刻弹出了注册登录界面。 ```mermaid flowchart TD accTitle: InstaPlay 用户旅程对比 accDescr: 对比 InstaPlay 当前的高流失注册流程与理想的“先体验后留存”流程 subgraph Current ["当前存在问题的流程"] A1["访客进入首页"] --> A2["被静态截图误导，直接试玩现有游戏"] A2 --> A3["发现 Prompt 框并输入创意"] A3 -->|"未见生成结果即强行阻断"| A4["弹出 Sign Up / 登录墙（极易流失）"] end subgraph Ideal ["推荐的优化流程"] B1["明确副标题与突出的 Prompt 框"] --> B2["用户输入 Prompt 生成可试玩原型"] B2 --> B3["获得即时成就感并体验价值"] B3 -->|"需要保存、继续编辑或分享给好友时"| B4["引导注册账号（转化率大幅提升）"] end ``` 这种直接卡死在注册环节的做法严重伤害了获客转化率。如果用户还没看到自己创造的游戏雏形，根本不会愿意注册： > “Creating our own games actually leads you to a sign up page, which no one's going to do if they haven't seen their created game, right? So you have to cough up enough credits to try to onboard people into the product. That's the cost of acquisition of one user, by the way.” —— Marvin Schwaibold 对于此类 AI 生成平台，获客成本（CAC）必须由前置体验承担：系统必须把用户要求的内容完美呈现出来，并允许其免费尝试一到两次，用户体验到魔力后才会有付费或留存的意愿。 --- ### `42:47` 动态预览、导航逻辑与返回体验的断裂 针对 InstaPlay 的视觉呈现，评审提出了具体的改造建议：不要只放静态截图，可以制作极富互动感的游戏轮播组件（interactive carousel）。例如利用 Codex 等代码工具自动录制每款游戏的 10 秒实机试玩片段，并在鼠标悬停（hover）状态下自动播放，以展现不同游戏世界的生机与动态感。 此外，页面的全局导航体系混乱： - **无意义的层级标签**：导航栏里的“Create”（创建）、“My Games”（我的游戏）、“For You”（为你推荐）和“Explore”（探索）指向不明。 - **挫败感极强的死胡同**：未登录状态下点击“My Games”会直接跳转到登录页；点击“For You”只是回到了刚才玩过的游戏；而点击“Explore”后，页面内容与首页别无二致，唯一的区别居然是把核心的 Prompt 输入框移除了，导致用户无法再创建游戏。 - **迷失的返回按钮**：从游戏页面退回首页时缺乏清晰的“Home”入口，只有一个极易被误读为“快进”或“下一关”的双箭头图标，最终迫使测试者只能依赖浏览器的原生“后退”按钮。 > “The only thing you've done now on the Explorer page is taking the input field away from me, so now I can't create a game anymore. So there's a few things there in the hierarchy where I would really think about: someone who lands on this for the first time, who has no idea what it is that you're building or selling, how do they interact with the product?” —— Marvin Schwaibold 尽管交互与架构存在诸多不足，InstaPlay 的产品底层潜力依然受到高度评价：如果能让用户毫无门槛地通过 Prompt 创造出专属赛车游戏，并一键分享给好友，这种创造的成就感将带来极其强大的病毒式传播效应。 --- ### `45:25` Mintlify：专业度、克制感与信任感的建立 随后受审的网站是 Mintlify——“智能体构建的知识基础设施（The knowledge infrastructure agents build on）”，专注于为初创企业、成熟公司及 AI Agent 提供自动更新的文档平台。作为 YC 孵化并在开发者生态中迅速扩张的工具，Mintlify 获得了高度认可。 两位评审盛赞其官网在色彩、排版布局、间距与行高上所展现的专业感、直观性与信赖感。它之所以让人感到极其整洁专业，核心在于设计风格上的极致克制与提炼： > “I think because it's being reductive in exactly the correct ways, and it's showing only the things that are actually necessary to show.” —— Marvin Schwaibold - **首屏层次分明**：极简有力的 Headline 搭配精炼的副段落，主行动按钮（Get Started）醒目突出。 - **直观的产品意象**：首屏清晰地呈现出文档集中管理与自动更新的仪表盘形态。 - **环境氛围渲染**：背景中若隐若现的网络结构纹理恰到好处，非但没有喧宾夺主，反而传递出一种审慎、严密的底层“基础设施智能层”质感。 - **极具说服力的客户背书**：精心排布的 Logo 墙汇聚了 Microsoft、Anthropic、X、Coinbase 等一线科技企业。在同类工具层出不穷的市场环境下，Spotify 等行业巨头的背书能够迅速建立起强信任背书。 --- ### `48:06` 视觉与文案的平衡失调及首页叙事结构 在深入分析 Mintlify 的产品卡片时，评审也指出了局部设计的权衡失准。网站将 UI 和功能抽象为富有艺术指导感（art directed）的精致视觉，但在具体落地时出现了问题： 1. **标题层级过小**：卡片内的文案标题字号过小，加之背景色千篇一律，导致视线在扫过卡片时失去焦点。 2. **动效复用过度**：背景中独特的“编织状动画”（braided animation）被反复应用在多个模块，冲淡了原本的视觉惊艳感。 3. **视觉喧宾夺主**：例如“Build on top of your existing setup”（基于现有架构搭建）和“Control who has access”（权限控制）本是非常核心的卖点，但巨大的截图和花哨的动效占据了绝大部分画幅，导致至关重要的文本被深埋在卡片底部，难以辨识。 > “The screenshot takes up a lot more of the space. There's this animation that is drawing your attention away from this headline that is actually really important and buried at the bottom.” —— Aaron Epstein 在翻阅客户案例轮播图时，页面表现出了高水准的艺术细节：每个案例卡片的配色都与右侧摄影图的色调精准呼应——曼哈顿的天际线配蔚蓝天空，对应 Coinbase 的品牌蓝调元素。不过评审也提出，部分相邻卡片的蓝色调过分接近（例如与 AT&T 的色系雷同），建议换用灰色或其他对比度更清晰的摄影背景来做区隔。 最后，讨论谈到了 Marvin 在设计客户网站时常用的核心法则：**首页板块即为子页面的第一章**。如果产品的主导航包含 Product（产品）、Solutions（解决方案）、Resources（资源）和 Pricing（定价）这四大模块，那么整个首页从上至下的滚动叙事，就应当严格围绕这四个核心构件层层展开。 ### `50:00` 页面留白与信息取舍的艺术：以 Mentlify 为例 在回顾 Mentlify 的网页设计时，Marvin Schwaibold 和 Aaron Epstein 深入探讨了页面层级与滚动深度的关系。Marvin 指出，内容必须严格按照从最重要到最不重要的顺序呈现，因为用户在向下滚动时会不断流失（scroll drop-off），最核心的内容理应稳居页面首屏。对于涵盖多款工具的产品线，首页应当设置一个专门的板块作为入口，引导用户点击深入，甚至由于产品规模庞大，产品本身应该拥有一个独立的专属主页。 ```mermaid flowchart TD accTitle: 页面信息层级与用户流失漏斗 accDescr: 展示自上而下的页面滚动流失规律及设计应对策略 subgraph UserBehavior["用户滚动与流失"] Top["页面首屏：最高关注度"] --> Middle["中段区域：用户逐步流失"] Middle --> Bottom["页面底端：最低留存率"] end subgraph DesignStrategy["设计应对策略"] P1["核心价值主张与最关键功能"] P2["次级功能与多产品入口卡片"] P3["延展细节与独立产品主页外链"] end Top -.-> P1 Middle -.-> P2 Bottom -.-> P3 ``` Aaron 赞赏该网站相较于其他案例显得“更加透气”（much more breathable），页面上虽然承载了大量信息，但通过合理的空间排布让元素各得其所，让用户能够明确聚焦，而不是陷入争夺眼球的混乱中。针对这种克制感，Marvin 剖析了团队协作背后的痛点： > “Everyone wants their functionalities or their features to be on the page. And you have to curate and make a decision and reduce, which is the job of any designer. Like, reduce complexity and show one piece at a time and drive narrative that way. It's hard to do, but it pays off when done correctly.”（每个人都想把自己的功能和特性塞进页面里。你必须进行策划、做出决策并进行删减，而这正是任何设计师的本职工作——降低复杂性，一次只展示一个部分，并以此推动叙事。这很难做到，但只要做得正确，回报是巨大的。） - **信息层级原则**：首屏必须承担最关键的叙事，随着滚动深度增加，次要内容依次后移。 - **克制设计（Restraint）的成本**：在首页堆砌所有特性往往是因为团队内部沟通妥协，而精简与留白反而需要耗费大量沟通成本去剔除冗余。 --- ### `51:28` Nullify 评测：字号混乱与价值主张倒置 转向下一个项目 Nullify 时，Marvin 从字体的专业视角立即指出了排版失控的问题。在首屏视口中，短短几个文本块竟然混杂了四到五种不同的字号：大标题、段落文字、段落下方用不同字号呈现的较小注释，外加“预约演示”（Book a demo）与“免费开始”（Start free）两个按钮的文字，若再算上顶部的横幅与角标，视觉负荷严重超载。Marvin 强调，标准做法应该是确立一个清晰的大标题，并将核心信息精炼归纳至主段落中，绝不能不断追加关键词与不同字阶的小标题去强迫用户逐行阅读。 Aaron 则敏锐地发现了大标题中动态替换两个占位符的设计缺陷。这种双重变量轮播会彻底破坏用户的锚定感：“用户在变，文档/手册等名词也在变”，导致完全看不懂其核心产品到底是什么。Nullify 实际上是一款能将文档和想法自动转化为带解说的动画视频的工具，但其首屏却深陷在“用户不读你的文档”这种负向抱怨中。 > “Could they use their own studio to make a video of Nullify and put that on the website and we watch that first? It proved their point, right? People don't read all of this. We're not going to read any of this anyway, so just show us a video of what you do.”（他们能不能用自己的平台制作一段关于 Nullify 的视频直接放在网站上，让我们先看视频？这正好证明了他们的论点，不是吗？大家根本不会去读这些密密麻麻的文字，所以干脆直接展示一段说明产品功能的视频。） 两位嘉宾一致认为，与其在页面中段才姗姗来迟地解释“上传文档或想法，数分钟内生成动画视频，并可通过对话进行编辑”，不如直接把这段清晰的说明提到首屏顶部，并正面展示“能带来更高转化率的视频”。 --- ### `53:23` 交互卡顿与全屏陷阱：构建更流畅的案例体验 在测试 Nullify 的作品展示轮播（Carousel）时，交互体验暴露出严重阻碍。卡片本身竟然不可直接点击，用户必须极其精确地去点击左下角微小的播放图标才能触发视频。当点开一段关于“仓库工人安全培训”的动画时，虽然视频制作水准本身相当扎实精美，但播放机制却直接霸占了整个全屏视口，导致用户完全丧失上下文，甚至只能靠按键盘上的 `Esc` 键才能退出。 ```mermaid flowchart LR accTitle: 轮播卡片展开交互改造对比 accDescr: 对比 Nullify 现有的割裂式全屏播放与推荐的模态抽屉底板式交互 subgraph Current["现有体验（打断感强烈）"] A1["点击卡片内微小图标"] --> B1["强制霸占 100% 全屏"] B1 --> C1["仅能按 Esc 退出，失去上下文"] end subgraph Proposed["推荐设计（无缝沉浸）"] A2["整张卡片任意位置可点"] --> B2["以 90% 比例浮起抽屉面板"] B2 --> C2["背景层推后，底部呈现客户案例信息"] C2 --> D2["支持直接左右轻扫切换下一案例"] end ``` Marvin 建议改进这种生硬的“全屏接管”模式：卡片应当以大约 90% 的比例放大居中浮现，底层页面自然推后（Push back），形成富有层次感的底部抽屉（Sheet）效果。这样顶部展示动画，底部直接附带该客户的背景介绍与案例研究（Case study），例如说明该视频如何帮助 Adidas 或建筑工程公司提升安全健康培训效果。同时，用户能够丝滑地左右轻扫（Swipe）连续浏览多部作品，全方位领略平台的制作深度与风格多样性。 - **点击热区（Tap Targets）问题**：卡片本身无法点击，强迫用户寻找细小的播放按钮，严重违背直觉。 - **案例与转化的绑定**：将单一的视频播放器升华为完整的客户成功案例展示，才能真正打动潜在客户。 --- ### `55:40` 抵制滚轮劫持：可打断界面与迪特·拉姆斯的礼貌原则 随着页面向下滚动，两人立刻遭遇了极为恼人的“滚轮劫持”（Scroll jacking）和强制平滑滚动（Smooth scrolling）。滚轮的手感与浏览器的原生响应严重脱节，滚动加速极为滞后，甚至当用户想要停留在某处内容时，页面内部的动画还在继续强行运镜，逼迫用户在触控板上反向拉扯以抵消其动画位移。 Marvin 借此机会对网页设计圈内滥用平滑滚动的现象发出了极其严肃的批评。他指出，优秀界面必须是“可打断的”（Interruptible interfaces），正如苹果几十年来在软硬件中所践行的一样——人类的思维模式本就是随时会被打断的，用户可能在一秒钟内冒出新的念头并转向点击别处，绝不能将用户强行塞入预设节奏的动画牢笼里： > “Smooth scrolling on websites is a disaster in the industry. And I feel like you use the native scroll on websites and don't hinder the way in which a user wants to interact with the content of your website.”（网页上的平滑滚动简直是整个行业的一场灾难。我认为必须使用网页的原生滚动，绝不要去阻碍用户与网页内容进行交互的方式。） Marvin 进一步引述了传奇工业设计师迪特·拉姆斯（Dieter Rams）的至理名言：“当你走进一个房间时，应当礼貌而安静地进入。”Aaron 对此深表赞同并补充道，普通用户在手机和电脑上浏览过成千上万乃至数百万个网站，身体早已经形成了对原生滚动灵敏度与精度的肌肉记忆。一旦某个网站擅自篡改这种物理惯性，用户就不得不被迫分心重新适应，带来极其迟钝且不适的操作体验。 --- ### `58:24` Instinct 评测：三维“吸睛组件”的恰当运用 最后，两人打开了太空科技初创公司 Instinct 的网站。主屏映入眼帘的是一句宏大的标语“Building a lunar future today”（今日共筑月球未来），背景衬托着一轮月亮，以及一颗环绕漂浮的 3D 卫星模型。整个画面沉浸感十足，使得访客在第一秒钟就能毫不费力地确认这是一家专注于航空航天与太空技术的企业。 Marvin 赞许了其视觉冲击力，并结合当前 AI 与前沿 Web 开发趋势指出，现在借助大语言模型（LLM）写出 WebGL 代码来构建可交互的 3D 月球或航天器已经不再高不可攀。网页中应当存在一到两个能够彻底抓住全部视线、将用户深深卷入氛围的“吸睛组件”（Showstopper components）： > “When you have one or two components on the website that really take all of your attention and really draw you into what's going on, I feel like that's an awesome moment to show something like that off.”（当你在网站上放置了一到两个真正能夺取全部注意力、并将你彻底吸入当前情境的组件时，我认为那是绝佳的展示时刻。） Aaron 亦肯定道，团队没有偷懒使用一张死板的 2D 照片去贴图，而是通过高质量的三维动态模型展示核心制造物，这种质感让访客瞬间对他们正在研发的硬核技术产生确信与敬意。 ### `01:00:00` 网站字体与视觉层级的平衡 在审阅初创公司 Instinct（一家研发登月舱的商业航天公司）的网站时，Aaron Epstein 与 Marvin Schwaibold 首先肯定了其字形选择的胆识。在当前绝大多数科技公司网站都保守地采用无衬线字体（sans-serif）的大环境下，敢于在页面中运用衬线字体（serif）显得格外亮眼且具有高级感。然而，字体系统的搭配与品牌标识之间出现了冲突：Logo 本身的字体、大标题字体以及其他正文字体各不相同，彼此之间缺乏统一的协调感，正在“争抢”用户的视觉重心。 此外，页面底部资方与合作伙伴的 Logo 颜色过于繁杂（其中也包括 YC 的标志）。这些色彩斑斓的图标过度分散了用户的注意力，削弱了核心叙事。Marvin 指出，尽管当前的首屏文案非常精炼克制，但完全有足够的版面去增加一层元信息（meta content），向访客清晰阐明公司正在构建什么产品。 ```mermaid flowchart TD accTitle: 首页视觉层级优化方案 accDescr: 展示 Instinct 网站首屏与主页结构的优化前后对比 subgraph Current ["现状问题"] A["多款字体混杂 (Logo/标题/正文)"] B["底部彩色 Logo 抢戏"] C["三段长视频悬停加载迟缓"] end subgraph Proposed ["改进建议"] D["统一排版系统 (衬线标题 + 无衬线正文)"] E["收敛辅助元素色彩以强化核心文案"] F["0.5秒抓人：短视频自动并发循环"] G["主页章节化架构 (技术/公司/新闻/招聘)"] end Current --> Proposed ``` ### `01:01:00` 缩短反馈时间：交互动效与三段式视频的剪辑 页面随后具体展开了公司的核心使命：“Instinct is building the lunar lander for today's space industry”（Instinct 正在为当今的太空工业打造登月舱），并配合了“发射（Launch）”、“巡航（Cruise）”与“着陆（Land）”三个互动视频模块。尽管鼠标悬停（hover）触发播放的交互构想很酷，但实际体验中反馈存在明显的延迟。最初的发射画面甚至很难让用户看懂发生了什么，必须驻足等待很久才能看到关键动作。 Marvin 强调，数字时代用户的注意力停留时间极其短暂，必须在极短时间内呈现高潮片段。与其让用户挨个悬停触发，不如让这三个短视频同时自动循环播放。视频内容本身也亟待重新剪辑：以着陆模块为例，前半段漫长的月球远景让人摸不着头脑，真正震撼、能直击人心的画面，是登月舱在月球表面投影不断变大、最终平稳降落的那一瞬间。 - “The attention span in general is half a second like that's what was cool about the second.” —— Marvin Schwaibold 直言用户的注意力窗口通常只有半秒，交互必须以最快速度传递核心价值。 - “There's a world where you could have them all play at the same time because they're very concise moments.” —— Marvin 建议将 Launch、Cruise、Land 做成简短的并发循环视频，无需等待悬停。 - 视频剪辑应当去除所有冗余铺垫，发射直接展示顶盖弹开的一瞬，着陆直接保留影子放大的触地画面，三列式（three-up）卡片布局在移动端也能非常顺畅地自适应为轮播组件。 ### `01:02:00` 首页章节化策略与内容内联交互 Marvin 分享了他与 JTL 设计哲学中的核心策略：如果一家公司将“技术（Technology）”、“公司介绍（Company）”、“新闻动态（News）”、“招聘（Careers）”和“周边（Merch）”视作业务的核心支柱，就不应该逼迫用户去翻看顶部的导航菜单，而应直接将它们转化为首页由上至下的各个内容章节。 在深入查看独立的技术页面时，两人高度赞赏了画面的真实感——画面展示的是真实的研发视频与物理硬件，而非悬浮的 3D 渲染图，这向投资人和公众证明公司是在真刀真枪地造火箭。然而，技术页面的信息量本身并不庞大，强行拆分为二级页面反而降低了曝光率。 - “If these are the things that you deem as important for your business, those are the chapters on the homepage.” —— Marvin 强调核心业务模块应当作为章节直接铺在首页，避免多层跳转。 - “And you're relying on people to click on the technology page in order to see any of that.” —— Aaron 指出，独立页面的做法完全依赖于用户主动点击导航，容易导致精彩的实拍工程画面被大部分访客遗漏。 - 推荐的交互模式是：在首页放置“探索我们的技术”模块，用户点击时直接在当前视口展开一个交互式弹窗或抽屉（sheet），滑动浏览完毕后直接退出即可返回首页上下文，大幅提升阅读的连贯性与吞吐量。 ### `01:03:00` 品牌设计克制：排版规范与开源轮播组件 继续审阅 Instinct 的子页面时，两人指出了一些明显的细节硬伤：部分封面图片的质感杂乱，与全站高水准的艺术指导（Art Direction）脱节。更严重的错误出现在排版上——团队将本该作为品牌独特调味剂的衬线字体，滥用到了密集的正文段落中。Marvin 提醒，衬线字体应严格作为大标题和品牌展示的风格元素，所有的说明文字、正文段落（body copy）都必须使用清晰易读的无衬线字体（例如 Instrument Sans 或 Inter）。 在查看页面中的轮播组件时，他们发现卡片不仅不支持拖拽（drag），也无法在移动端滑动（swipe），交互非常生硬。Aaron 开玩笑说 Marvin 应该直接开源一个轮播组件库。Marvin 顺势介绍了他和团队正在维护的开源项目 Blossom Carousel：该组件原生支持触摸滑动、顺畅滚动以及多种自适应变体，在移动端可优雅折叠为堆叠卡片，代码完全开源托管于 GitHub，专门供各类创业团队免费集成。 ### `01:04:30` 节目总结与设计全栈工作流展望 评审结束后，Aaron Epstein 正式为本期《Design Review》做收尾致辞。Marvin Schwaibold 对受邀来到旧金山参加 YC 的录制表达了诚挚的感谢，称赞了 YC 办公室的氛围与硅谷无可比拟的创新活力，并表示非常享受能与大家坐在一起深入剖析优秀作品背后的底层逻辑，展示新一代设计师如何结合 AI 与前沿工程工具革新设计工作流。Aaron 也高度评价了 Marvin 对设计水准（bar）的极致追求，认为这不仅体现在惊艳的视觉构图上，更体现在对每一次微交互、动效节奏以及真实用户端到端体验的严苛打磨之中。 ## Notable quotes > `55:40` Smooth scrolling on websites is a disaster in the industry. And I feel like you use the native scroll on websites and don't hinder the way in which a user wants to interact with the content of your website. — Marvin Schwaibold > `12:45` And as we all know, prototypes are a million times more useful than any PRD document you can write. — Marvin Schwaibold > `00:00` We're more the editors now than ever before which is, I think, fun. — Marvin Schwaibold > `12:45` Because I can show up with a prototype and get people's attention faster than I can if I have an idea and I have to get a whole team rallied around an idea. — Marvin Schwaibold > `15:00` The concept is more, can we bring UI to the user and into context versus having the user click through the interface? — Marvin Schwaibold > `05:00` To us it always felt like the way we would build websites and you would flow through the website felt more like you were exploring the website than the website was demanding your attention. — Marvin Schwaibold > `40:00` Sometimes being a little more artistic and abstract actually goes a really long way. — Marvin Schwaibold > `20:00` Codex and all the current AI software and the models are extremely capable at creating anything. You can use these tools to make anything that you want, but you have to know what you're doing. — Marvin Schwaibold ## Mentioned Marvin Schwaibold, Aaron Epstein, Tobi Lütke, Mike Matas, Jesper, Josh, Michael Speichert, Jay Tall, Dieter Rams, Shopify, Molly, Y Combinator, Collins, Apple, Google, Figma, Codex, Claude Code, ChatGPT, Sidekick, DialKit, Blossom Carousel, Google Gemini, nStack, SkillSync, InstaPlay, Mintlify, Nullify, Instinct, Microsoft, Anthropic, X, Coinbase, Spotify, Adidas, Cosmos, Savee ## Video description <p>Marvin Schwaibold leads the product design studio at Shopify, where his team is rethinking some of the company’s most important products for the AI era. Before Shopify, he co-founded the design studio Molly, working with companies including Apple and Google and building a reputation for highly crafted, interactive design.In this episode of Design Review, Marvin joins YC’s Aaron Epstein to show how AI has changed his process, from using Figma as a scratchpad to building working prototypes directly with tools like Codex. He explains why designers are becoming more like editors, how AI is making them more full-stack, and why taste and judgment matter even more when the tools can build almost anything.Then they review viewer-submitted websites and break down how hierarchy, motion, typography, and restraint can make a product feel more intentional.</p> [Source](https://anchor.fm/s/8c1524bc/podcast/play/128302483/https%3A%2F%2Fd3ctxlq1ktw2nl.cloudfront.net%2Fstaging%2F2026-9-28%2F435266928-44100-2-785c9f28b4ac6.mp3)

[55:40] Marvin Schwaibold: Smooth scrolling on websites is a disaster in the industry. And I feel like you use the native scroll on websites and don't hinder the way in which a user wants to interact with the content of your website. [12:45] Marvin Schwaibold: And as we all know, prototypes are a million times more useful than any PRD document you can write. [0:00] Marvin Schwaibold: We're more the editors now than ever before which is, I think, fun. [12:45] Marvin Schwaibold: Because I can show up with a prototype and get people's attention faster than I can if I have an idea and I have to get a whole team rallied around an idea. [15:00] Marvin Schwaibold: The concept is more, can we bring UI to the user and into context versus having the user click through the interface? [5:00] Marvin Schwaibold: To us it always felt like the way we would build websites and you would flow through the website felt more like you were exploring the website than the website was demanding your attention. [40:00] Marvin Schwaibold: Sometimes being a little more artistic and abstract actually goes a really long way. [20:00] Marvin Schwaibold: Codex and all the current AI software and the models are extremely capable at creating anything. You can use these tools to make anything that you want, but you have to know what you're doing.

[26:29] Marvin Schwaibold: Codex won't get mad at me if I need 91 approaches at getting the animation correct. If I had done that with my engineer, they would probably flip out. [12:47] Marvin Schwaibold: And as we all know, prototypes are a million times more useful than any PRD document you can write. [55:41] Marvin Schwaibold: Smooth scrolling on websites is a disaster in the industry. [0:00] Marvin Schwaibold: We’re in the driving seat. And we’re actually more than ever now in a position where the output isn’t the issue anymore. It’s us being extremely selective about what we go forward with and what we work with. [0:00] Marvin Schwaibold: AI has definitely raised the ceiling for all of us, but it’s not a crafter.

[0:00] Today, I'm joined by Marvin Schweibold, who leads the product design studio at Shopify. He'll give us a behind-the-scenes look at his process, where we'll see how he's using the latest AI tools to bring his designs to life, then review some viewer-submitted websites. Welcome to another episode of Design Review. Marvin, thanks for joining us. Thank you for having me. Before we get into your work at Shopify, I'd love to hear more about your process and the tools that you're using today to design with AI. I feel like the process itself hasn't really changed. It's still extremely iterative and sequenced out. There's a lot of iterations and variations in the work in and of itself. But the tooling has definitely shifted a lot from tools like Figma and working with aesthetic layouts into more of an AI-driven workflow where I'll use Figma as a scratch pad for some of the ideas I have. But then very quickly that'll transcend into like real demos that I can use. And then I only piggyback back into Figma from time to time if I need to lay something out or explain something to AI. But it definitely more of a world now that includes tools like Codex and CloudCode and being in terminal a lot and just getting to an output that I can use and test on my phone or computer a lot faster And that becomes like a really fun, still very iterative cycle. But we've definitely moved away from the canvas more to like AI tools in general. And how much of that workflow is AI driving a lot of the process? And how much of it is you, the human? I think it's a lot of me, the human, driving AI to do a lot of the heavy lifting for me. But there's a lot of quality controls, decision making that are all up to the designers. We're in the driving seat. And we're actually more than ever now in a position where the output isn't the issue anymore. It's us being extremely selective about what we go forward with and what we work with. So it's a lot more curating what AI is creating. And that is a continuous like just back and forth with AI. I feel like AI is extremely capable of getting a lot of things done that we needed to do. As long as you understand the complexity of what it is that you're working on. And you able to break that down into a multitude of almost like subtasks that then you can feed to the agent bit by bit And then it a back and forth And it sounds like a lot of what you describing is that your role is actually to be the editor We more the editors now than ever before which is, I think, fun. That's great. I mean, that was always the role, but getting to the point of editing just took a lot of like handcrafted design that we would do in Figma. And just more and more of that can be now sped up and extrapolated with AI tooling. And so you, the human, are still responsible for the ultimate final output and making sure that it meets your bar. But you have all these tools now to be able to get there way faster. 100%. I mean, AI has definitely raised the ceiling for all of us, but it's not a crafter. It can execute complexity and technology that I couldn't handwrite code. It can write code, but it doesn't know what looks good and what looks bad. And that's for me to decide and to steer AI into the right direction. I've been a big fan of your work for a long time. So maybe first just start off and tell us about the product design studio at Shopify and what you guys do there. I work with a team of very talented designers. We've been there for the last year and between us, we basically run an initiative at the company to redesign and touch the most important surfaces we have So from anything related to Sidekick which is our AI infrastructure layers that basically manage our entire admin to the mobile app, which we call the green app and everything from admin and admin dashboards we look at and work with. Quite recently have been working with a lot of new AI infrastructure that the engineering teams have built for us. And yeah, it's just been a really exciting, exciting last year. Yeah, it's actually really interesting because Shopify is like two decades old or something at this point, right? 20 years old. 20 years old. And so we are, yeah, we're in a new era now where AI is changing a lot of things. And it sounds like a lot of the work that you're doing is actually to modernize and bring it into a modern era, which is through design, but also the experience itself, right? Like what is the design team and your product design studio actually work on there? Are you just in Figma and canvases and designs and passing them off to engineers? What is the design function like that you manage there? At least at the moment, there's almost like two parts of this big initiative that we're taking. Part of the organization of the design team has redesigned the entire admin experience. This redesign starts in Figma and with polishing interfaces and bringing that into the web. [5:00] Other part of the organization, the Sidekick team of Shopify is working on automating and manipulating a lot of the Shopify interfaces via the chat so that you can use chat, Sidekick or AI Infra to basically manage your store and automate a lot of what it means to be a merchant online. And that's like they're basically two almost controversial, paradoxic sectors of the company, but they work really well together. So you're building really beautiful new UI, but you're also using new UI to basically generate AI infra and AI workflows. And that's like incredible to see. And a lot of that actually translates very nicely back into the mobile app and is up leveling the mobile experience as well. It's a lot more conversational and a lot more talking to Sidekick about your business than having to manipulate your business via the interface. Yep. And previously before joining Shopify, you were building your own product studio with Molly and you have incredible motion and animations and interactions there that I always found to be really inspiring. And maybe you can show us some of that and talk through where that came from. Yeah Molly was a design studio in Brooklyn that I was running together with JTEL my studio partner We ran the studio for about two years before joining Shopify and integrating the studio into Shopify And you had some huge clients that you worked with during that time, right? Yeah, we worked a lot with Collins and Apple and Google and also a lot of smaller clients too. It was honestly a broad mix of web design and product design and a lot of content strategy and hierarchy for clients as well. when I came to their websites. And because we were a small studio, it also allowed us to have extremely close relationships with our clients. We would meet clients weekly for many weeks and use these projects at MOLLE as like very high-focused stints with these clients. So we never took on more than two or three clients at a time to stay really focused. Here's just a reel of some of the work we were doing while we were running our studio. It's so cool. There's little details here. the animations are very organic. And even as each screen changes, the gradient and the shadow behind it changes to match the color of the background that I think a lot of people maybe wouldn't pick up on. But it's something that you sort of intuitively feel that something is happening here, right? We got this idea basically just from the ambient lighting behind TVs that are mounted on walls And I think JTEL and this was pre basically duplicated the video and had it blurred out in the background so that it would match the rhythm of what going on on the screen And it works really nice. And I think before the sentence, it used to just say, Molly is a design studio in Brooklyn. And there was just the gradient at the bottom that was kind of like vibrating. Right, I can see it changing there. It feels like a thunder or something. Yeah. And it kind of, at least for us, it always felt like people were inclined to scroll into it. So we didn't even have to show them any of the work, but we kind of hinted at it. And then you scrolled into the reel and yeah, the rest are just very nice and simple carousels. But yeah, you can see here, this was some of the work we were doing with our studio. And I think some of the patterns you were referring to, we used to call the system, we call the system primal. It's a way to just basically understand content on a website, digest content on a website. And for us, it was a very structured way of digesting when clients came to us with a lot of information for their websites. We helped them build that into a system on the website that allowed users to explore. To us it always felt like the way we would build websites and you would flow through the website felt more like you were exploring the website than the website was demanding your attention Everything is just one layer away and everything is progressively disclosed So you never overwhelm the user with too much content in general What are some of the ways that you accomplish that? I mean, I can just go through some of the work. This was a project we did with the agency Collins. We worked with them for, I think, over a year on this website. And as you can see even as you're scrolling through the homepage here each section of the homepage is a chapter that as you as you as you interact with the website can lead you into further exploration so this is one of my favorite sections here this is the bookshelf these are basically all of the case studies from Collins even go back and hover over those elements again the way they bounce feels different than what you typically see yeah yeah talk about how you made that this was you You didn't use AI tooling to do this. You handcrafted these, right? Yes. Well, in this case, I will say this was very much design and engineering partnered together. I would lay something like this out in Figma and try to understand the spacing and the size and the colors and the rows and all of that. And then I would hand it off to someone like Jesper, who would then work on the bounce animation, for instance. All these books have to level up on top of each other and then basically... [10:00] land one more time as the last book kind of lands on top of it. And that has to feel very organic, because if that feels bouncy and organic, then it alludes at the idea of, oh, it's a book, it's a bookshelf, that's alive. And those things, I think while they are seemingly unimportant, are exactly the kind of little moments people pick up. um when they scroll through these kind of why does that matter like you have a person yeah who's supremely talented whose entire job on this project was to make the tab interaction yeah and it's very easy for anybody to go well just throw a tab tabs exist you can get that for free in five seconds and then move on to the next thing why did you feel like it was important enough to spend somebody's dedicated time before ai could do this certainly um and and have them focus just on that this studio because they work on design themselves like this is a branding studio i think the clients coming to the website are looking for those kind of Easter eggs. They want to know that if I hire this agency or this agency takes this much detail to produce a website of that quality, what kind of Easter eggs are they going to put into our projects when we work with them? And when they pick our color palette, maybe they're going to come up with a system behind it rather than just picking five colors that they like, because that's the level of. of dedication it takes to go really deep. It's a way to, in a way, almost also to show off and be, and show the level of craft and detail that you can bring to any piece of, or any part of the interface. We try to do the same level of care and craft at Shopify. Talk about the decision then, to sell your design studio to Shopify and to come join them and how that process has been different for you being at a large public company and, you know, leading a product studio internal there versus the work that you were doing here when you were independent. Toby, at the beginning, at some point last year, basically said, we're entering a new era and that future needs to be designed. And that was basically it. He's like, I want to design. I want to design for the future. And I need to hire good designers who can help me paint a picture. And when we see that picture, we'll know what it is. And we can and we can we can go down that route. And I think that was that that's the mandate at Shopify. Like design is very much more in the foreground. It's a very honest organization that's very self-aware. It's a founder led, engineering led organization. And design hasn't always played the role that it's playing now. towards the tooling and the software that we're building for our merchants. And that's beautiful to see. And that was one of the reasons we wanted to join, because we felt while we were having fun designing websites for other studios like Collins or Spencer the Illustrator, we also wanted to have a larger impact and see if our strategy would hold up on interface paradigms with millions of users versus the few users, I guess, that would scroll around the Spencer website. Right. And so it's a different set of challenges. The design studio work that you did was create a new site or something to display work or work on a product or something like that. Talk about how it's different now. Shopify has millions of users and there's a lot of money at stake with every design decision and interaction that you work on. And what is your process like now being this internal design studio and how do you interface that? with the rest of the organization? And how do you interface with users especially too? So I will say basically for now our studio exclusively operates within Sidekick, which is the AI infrastructure layer of Shopify. The whole team works extremely close with the rest of the design organization and it's a very beautiful interplay, which is I think in general how these studios work or how this works more successfully. I've been in positions in also previous careers where If you're more isolated, it's always more difficult to... ingest into the company and and have a large impact in the company i think at the moment we're very ingrained in the current workflows and ingrained in the timelines and uh in in in our roadmap um and it's and it just it requires a lot of a lot of experimentation honestly like up leveling the interface was easy for us because we have really talented designers who rebuild parts of the interface and figma and then using ai where we're able to port that over into very tangible prototypes extremely quickly. And as we all know, prototypes are a million times more useful than any PRD document you can write. Those spread around the company like wildfire and if Toby sees a prototype that he likes, then we can go off and build that. And I feel with some of the ai mutations work we've been looking at at shopify we can show some of that later it feels the same we have ideas in our head and it's extremely easy for us right now um using the current the current technology to just simulate it all generate prototypes where in the past um at molly a lot of the work we were doing was was by hand our sheets were designed by hand all the animations were done by our developers art direction might have been my idea but other than that there's like a thousand [15:00] parts that you have to interact with. Right now, I'm seeing one-off armies or teams of two going off and doing the work of many because the tooling is just allowing us to do that. And that's making it a lot easier to get buy-in. Because I can show up with a prototype and get people's attention faster than I can if I have an idea and I have to get a whole... team rallied around an idea. Could you show us some of the work that you guys have been building at Shopify? This is basically a redesign and facelift of our current admin experience with a new home design and an overall facelift of basically the entire product. which we've been working on at the moment. I think one of the more interesting things that we've been exploring right now is just how psychic and the merchant interact with each other. We have this concept of suggestions, psychic suggestions on the home feed. These suggestions are brought to the merchant by us. We've identified suggestions. opportunities and benefits that the merchant could do inside of their ecosystem, inside of their, of their, of their universe. And we can show those to the user. And then as the user interacts with these suggestions, we basically kick off a conversation with Sidekick, we can directly manipulate the admin dashboard for the user, and we can show show those changes to a user. So we're showing a user right here, we think you should rewrite or rewrite the description of, of your user. your product, here's the suggestion that we think you should do. You can publish these changes and through a conversation with Sidekick, you've directly manipulated your store. And the concept is more, can we bring UI to the user and into context versus having the user click through the interface? At the end of the day, there's a world where a merchant can spend a lot more time on the home surface and use Shopify as a dashboard to delegate and interact with Sidekick and have still a prototype environment this is there's a dev ui panel inside here and basically we're building all of these the design team is building all of these um changes and and demos and and and and ideas right into the interface here so we can just test and build on top of it and it's it's become this beautiful process where once a demo is at a point where we kind of all align everybody a version of something that they think that brings value. And then we all come back together, and it actually lives all inside the same demo and the same link. And it's just a beautiful way to share ideas and context. You said, designers are building this in here. A lot of times designers are designing and they're not building, but it's in Shopify and your team and you, you are building a lot of the stuff that you are designing so that you can test it, so you can prototype it, so you can see it on live. live data, live experiences. And that's a huge part of nailing it and building something useful and making sure that it's great. What was your evolution from designing in Figma to now you are not just designing, but you're actually creating it out into the world to be able to test it and doing that full loop yourself? In this specific case, admin has a playground that we build. Instead of that playground, we test. That's not production code. And that wouldn't be allowed repository. Having said that, though, AI has definitely gotten to the point now where, as designers, we are highly empowered and capable to visualize any idea that we want to get our idea across. In a previous world, that just wasn't possible. We looked at the Collins website earlier. A lot of that work In Figma. when we worked on it, still looks like this. You can zoom into any part here, and they're highly detailed Figma screens that we're designing through, and this is an ideation process. I think this is a mixture of... me um michael speichert and jay tall working on this project together and you can just see the evolution of like as we're going through the into like as we're going through ideas and like trying out new things these are these are too heavy and too expensive to test in code we don't want to test this um in code right now because it would require an engineer to take a look at it and build it for us. So we test it all in Figma. Figma is the playground and the world we were building everything in. We were building it on desktop and then we were translating it to mobile. And all of this had to be stress tested out in Figma first for a very long time before we would go and bug the engineering team. A lot of the way I'm talking to AI or I'm still using Figma at the moment is I can get really far on over the weekend which I can go into into detail a bit but one of the things I wanted to build out for this project [20:00] was a 2x3 overview of these grass studies and these videos I took. And the interaction here is you can open up any one of these videos and you can drag down to close them. and it works works the same in the in the simulator um I explained this. I described this to AI, and I was working in Codex, and Codex built this out for me. But the interaction wasn't interruptible. So every time I clicked on an asset and pulled it down, I had to wait until the asset was all the way back in its position and sat down before I was able to tap on another image. And that's just not how you want to use this pattern. This has to be very responsive very quickly. Otherwise, you'll get very annoyed with the interface very fast. big man kind of drew out very rudimentary simple boxes. Like when, when you click on the box, Red comes up. you can swipe it away. If as you're swiping away, you click on blue, blue now comes up and you can click that away and you do it with green. And I think that's just like a good example of how at least myself personally, I'm using Figma more. It's more a scratchpad to like map out ideas and I give those ideas to codex. And I use the scratchpad A because it's easier for me to decompile something, but also it's actually easy for codex to decompile it if it sees it visually. It interprets that image, I think similar to how I interpreted it. at least it understood what I was doing and how I was thinking about the motion. I couldn't articulate it via text or voice, but I could draw it out. There's two parts of this that I think are important to call out. I think number one, Codex and all the current AI software and the models are extremely capable at creating anything. You can use these tools to make anything that you want, but you have to know what you're doing. And you have to be able to take a concept or something more complicated like the shader and break it down into all its little components. understand those components and then you can put those components back together yeah just show us how you did that here because so to be clear you had a bunch of images and videos and videos of of actual grass yeah and then you wanted to create a shader yes that looked identical to that but you could control and function like a shader and so talk about how like the different elements and what you had to go through to actually get that to look lifelike i have a few screenshots here video into codex for the first time and just explained it, the project and the process that I wanted you to go through, take the video, turn this into a shader. I want the shader running in the web. And I want you to be as meticulous as you can, be very pixel perfect, grab all the colors, make sure that you're using the same hex codes, understand each part of the image, and then try to recreate that. And it went off and said, no problem, I got you. And it came up with this, process from here was i would screenshot this and my original my original video i would open up chat gpt and i gave it to another agent there i explained that agent exactly what i was doing as well said why is the other agent not understanding what i'm trying to get to and that ChatGPT then helped me kind of like understand my own process. Like, well, you have to explain to it where the light is coming from and what shadows you're using and maybe break the image actually down into like six parts and have it do each one of those individually and put that back together. And as I was kind of thinking about all of these different things, I was trying to come up with how could I become very clear with AI and explain to it exactly what it was actually looking at. So one of the tricks I used was I went into ChatGPT and I had to render basically a topographical map of the underlying structure. But AI, as I was going through this, it was kind of getting closer and you could see that, you know, it was painting more pixels into the grass plates. And these started to look like bushels a little bit, which felt more realistic. And then over here, I was like, okay, we're getting somewhere here now. This doesn't look... This doesn't look terrible anymore. But I kind of figured out it doesn't understand that it's not a flat layer underneath. These are little hills. Basically, I fed this back into AI and it understood, oh, okay, so there's an underlying structure in a map that has different depths and heights. And if I can re-render the grass on top of those... on top of that infrastructure or that structure in general it'll be much easier for um for me to to create the scene and that kind of worked really well and um you know in this in this prototype difference you can actually bind there's a binary toggle to turn the grass on or off and you can actually play with um the terrain quite a bit here as well right this was all unlocked via josh to me um at a lunch the other day where he kind of like we installed dial kit into this demo and because he looked at this and like this looks pretty good but you should look oh, okay, that's true. So I asked Codex, like, hey, how many grass blade variations do we have? And it said we have about 217,000 different grass blades, but they only differ by like 0.6, 0.7, 0.8. So we were like, okay, let's just build a toggle fort so that we can see it ourselves. I don't want to have to go back and forth with the interface and chat about it. [25:00] about this. expose the underlying structure exposing the underlying structure would also show me where i had made mistakes the original version of the terrain map that it had implemented was completely wrong and and skewed so i couldn't get to my outcome anyway because i had misinterpreted something five prompts ago that i didn't know about anyway dal could kind of unpack that for me but then in general you can just mess with a few of these values and they kind of help like bring bring some of this like they they help visualize what what i really wanted to see and if if you know the length here is longer and then you you You can introduce more when this was... something I wanted to test and see how how crazy I could get with the wind moon. You can see it gets a little wild. But I think this is just a small example of a little bit of like, a fun project just to try and like see how far can you get with the tools. And these are things that I think before AI, I couldn't do. I just, I might have had these ideas, but I wasn't allowed or able to execute on them. And I think that's just in general, what's changing with a lot of the design role right now. Anyway, like it's, designers are becoming more full stack. As are engineers and PMs. It goes in every which way. There's no limitations now, right? And actually, this is one of the common patterns that we've been seeing a lot. Creating prototypes and then creating little widgets that allow you to control different variables in them to be able to test it really easily and get it right. And previously, it wouldn't have been worth anybody's time to do that. You would just maybe play with variables in code or something until you got it, and then you'd call it good. of time doing it. Now it's so easy to create new little software tools to be able to control these variables and test things and dial it in perfectly, which I guess is where the name DialKit comes from. So maybe tell us more about DialKit here. So this is a product that makes it really easy to create and then tweak a lot of these variables in whatever project you're working on, right? Exactly. So yeah, that's basically exactly how it works. You can just run NPM run via his website. can just plug it into to whatever you're working on i have another project that i can quickly show this is just another version of dial kit um in the specific in this specific project where I was manipulating um a carousel um This is inspired by Mike Mattis. He's a design lead at Love From, and his portfolio carousel works in this way. And I wanted to see, like, there's so much nuance in the way that carousel works and the way you can drag down an artifact. And when you let go of that artifact, the way basically almost like energy ripples out from that specific artifact and triggers a collision effect with the other artifacts left and right. of the own Frankenstein that I created here with 91 prompts. And it just helps you dial in some of these, some of these different, some of these different parameters that are really important. Like pull, pull boost means the faster I drag this down, the stronger, the stronger the boost is. You want to play around with that toggle a little bit. It can't feel too intimidating or too, or too strong. Otherwise the, otherwise the whole system just feels off. And I know when it feels off, but the back and forth with chat just doesn't work. Yeah. And you need to be able to, to, those kind of values. It seems like a lot of all the projects that we've looked at here and a lot of what you're describing is just having setting an unreasonably high bar, um, And now we have the tools to actually be able to meet it much faster than it would have taken before. Yes. And so what is the role of the designer and maybe even non-designers? How should they be thinking about design? A lot of the audience that watches this are... maybe founders of early startups that maybe feel like they're engineers, but don't have a design bone in their body. Or designers that are maybe trying to figure out, like, could I start a company or could I actually build the product? I'm so used to, you know, designing a figment, passing it off to somebody maybe where you guys have been in the past. How should they think about themselves and being able to uplevel the way that they use AI to create higher quality design? A lot of the way... I keep thinking about AI in general. It's just, it's an infinitely different Patient. collaborator and teammate. Codex won't get mad at me if I need 91 approaches at getting the animation correct. If I had done that with my engineer, they would probably flip out. But so my advice to everybody is like, and it sounds kind of silly, but like tinker with the tooling, like you can go in and just describe what you wanted to do. And when you see a result, Like, don't give up. Just explain to them that this is not how you envision it. Send it a website where you really like the carousel animation or give it a screenshot from Save It or Cosmos of something that you think looks really beautiful. Show it a color palette that it should start to copy for you and just keep going back and forth. [30:00] back and forth and kind of shaping your narrative together with the tool. I think that's really important. And for designers specifically, my trick or what I always learn was just like, just try to copy. Like even now, I'm trying to imitate... this carousel animation that's been around for quite a while because now I have an infinitely patient teacher and friend that I can build it with. And so now I can look under the hood and that's I'm doing that in my own time on my own weekend without bugging any of the engineers because it's my experiment and I want to understand and decompile how this thing is put together. That teaches me how to be a better manager and how to be a better collaborator and be a better team member. And I think that's how we should be treating these tools. Yeah, that's great advice. YC's next batch is now taking applications. Got a startup in you? Apply at ycombinator.com slash apply. idea. Okay, back to the video. Should we review some websites? Yeah, I'd love to. Let's do it. All right, let's do it. For sure. First up, we've got nStack. So let's see. Okay, so this is nStack, the only AI workspace you'll need. One powerful agent, one intuitive desktop workspace, and every tool you need to handle any task. Okay. Okay. I mean, I think right off the bat, I would say one thing that's very nice about it is the fact that they're emulating, obviously, the desktop in general. So it feels like you're on a desktop, and I think you can probably... use these and explore these. Yeah, I mean, I think what's nice about this is like you're basically just in their product already and you're using their product. Yeah. I think I'm a little confused about what to use it for, though. It's like it's an AI, the only AI workspace you'll need. It's one desktop, every tool you need to handle any task. And it's hard when it's so broad to figure out what should I use this for? And maybe literally you can use it for anything. But I feel like sometimes it's helpful, like what do you want the user to do when they hit this? Yeah, I mean, to your point right now, like from a visual perspective, it's very overloading, right? You have a lot of content in the sidebar. You have this chat history here that you can kind of scroll through. Then it seems like you have some sort of an interface here, but also kind of the main messaging of NSTAC sits right over here. it's hard for me to figure out exactly what to focus on first my german graphic design professor would always say when we were making posters in school where i was studying typography and he would always say that this poster doesn't dictate it's not dictatish it means there's nothing in this poster right now that is drawing my attention like i i don't know what to do when i look at it yeah basically yeah i don't know what to look at first yeah yeah do i click these icons do i go in the slack like thing do i go in the chat am i texting the chat and talking to the I think feedback here, which would be nice, which probably would be like – Some of the clutter here, I would almost collapse and make it more around the introduction and the headline and what I want the user to read and take away. Yeah. And maybe a simple way into a very quick demo. of the tool or of the software offering would be really, would be really important, but at least it's, you know, there's a, it's, it's, it's very whimsical and feels kind of retro, which is nice. Yeah. There's always usually, or there should be one specific goal that is like the primary goal or the primary KPI or the main thing you want a user to do when they hit the site. I'm not sure what it is here. Maybe it's like, get started. Maybe it's talk to this agent, but whatever it is, there's so many other things that are pulling your attention and distracting you from whatever the user to do. And maybe the get started button is the primary CTA, but they have these other buttons over here that were more in the middle that looked exactly like those buttons. And so now there's multiple buttons that have the same color and are calling, yeah, it's like general engineering, marketing, get started. What is the one that they want us to focus on first? Someone once said this to me, it's like, oftentimes when we build websites, we focus on one thing on narrative around that one thing on Collins. It definitely felt more like the books, the book stack was something that we were proud of and wanted to show off. And that, and that is the heart of, of, of the website is, is a lot of the visual work. And I thought it was an easy way to navigate into that page. And then you can spend a lot of time there because it's easy to use as an stack. I would be, I was, I would be asking myself, what is the, what is the one thing I can rally around and get people to, to, to look at and do. And if they only take one thing away, it's better than trying to do everything at the same time. And that's kind of what's happening There's a lot of things screaming for attention. It's the opposite of progressively disclosing information. Yes. And maybe as a positive, one thing that I think is probably good that they do is they're trying to drop you right in the product. I assume this is actually how the product functions. Yeah. And they're not trying to... tell you about the product and then get you to click a bunch of things and sign up and stuff. They're like, if the aha moment is people just starting to use the product, let's just get people into the product as early as possible. But it still feels maybe like we need a little bit more context to figure out what exactly we should be doing here. Agree. NSEC, thank you. [35:00] All right, let's take a look at SkillSync. Free local first Mac app that carries your memory and skills across every agent and teammate. That's nice, yeah. I mean, at least it's clear, I think, what the company does. That's cool. Okay. Yeah. So it's got skills and they sync. Yeah. Yeah. I mean, it's in dark mode. The fonts are, I would say, are very small. The difference between Skillnet as basically the logo and the first paragraph below it, there's a lot of percentages in the typography height here that I think we could skew in a little bit. They feel a little off, in my opinion. And again, there's a lot of very dense information. and stack, it's actually, as soon as you start to abstract some of the functionalities and features, but still stay very detailed like they're doing here, it becomes very hard to understand exactly what it does. It'll require a lot of actual reading of all of these features to kind of understand what's going on. I'm curious to your take on this. So what they've got here is they've got basically a bunch of sidebar tabs that are trying to show off different features. And you, I feel like, have an interesting approach on tabs because all those sliders that you make, they're effectively like tabs, right? It's just you have the affordance of knowing that there are multiple of them and you can see multiple at a time. And I feel like the trap that a lot is users usually will not click on all of the tabs and explore them all. And so you have to assume that whatever is hidden behind all of them, nobody will ever see. How do you think about that? How can they encourage people to explore this more and get more information rather than burying everything behind tabs? There's this rule I always have, like you can't put more than... uh seven seven lines of text on a on a slide if you're presenting work like you have to come up with almost rules and constraints of how many features you want to show off like a good example i think i would use a three-up component here i would take all of these features i would compress this information down and try to understand what are the top three things that skill sync can do for you you can do x y and z those are the three things you show off all of those are tappable they lead you into potentially sheets or review transition into into more information you have more context behind. Since it's very flat and broad, you're kind of like... a mile wide but like only an inch deep you don't really know what you're what you're really looking at that's what that requires like um a deeper understanding of your feature set and and and then more condensing those down into principles and rules and main kind of like points and then you can rally or bring more information under each of those kind of pillars. And that'll help the users understand the flow of the website better and how to navigate it. And it's also better for the founders. I feel like if I was still running my studio and we were working with this company right now, there would be a whole exercise and like, well, what's the one thing you do? If it's syncing skills, let's only talk about that and make that really cool and show that off and then get people to use the product as quickly as possible. I mean, it's also interesting, like we just hit the bottom of the page. It's not very tall. And so I think users are comfortable scrolling. Yeah. And so if there is important information that is hidden behind a lot of these feature tabs here. Yeah. Yeah. Just break them out and like make the page longer. It's OK. People can scroll longer rather than compressing it and hiding everything. Exactly. And the other trap that I see a lot of people falling into with with the AI tools now is because it's so easy to, you know, create a different like image or animation. Like these are actually animations. Right. Yeah. For every single one of these. They spit out a bunch of these and they've all got the hallmarks of the very small text and this animation. No human would spend the time and go like, oh, we need a little dot that goes from these corners and program that and everything. But it doesn't mean it's actually adding value to what they're doing. And so this, I think, is when you're talking about you need to curate and set the bar and make sure it's communicating the right things. There's lots of things here, but they don't actually help my understanding of the point that it's trying to make. where you need to work and hire the right people with the right skill sets to help you do the job. Like AI definitely can help you probably put this whole website together. But when it comes to abstracting these features into illustrations, might not be the worst idea to work with an illustration designer who's done this before and who specializes in information graphics. And maybe that actually becomes, because it's well explained, just a core part of the skill sync brand identity. It's like, oh, this is one thing that... I remember working with Gemini a few years ago there was this animation like a braid like basically they were showing the model and all of these different things that Gemini had and they all came together and built like this helix and that animation was it basically just explained exactly the capabilities of the model and that turned into a very thin line and then it said Gemini and that was an animation that a lot of people worked on who are much more talented than me for a very long time and then later a lot of really good [40:00] engineers translated that into a scrollable animation for the website. And it just like that kind of sold it. And then you were in the product and you were using it, but that was, that was the memory of like that piece of motion was just ingrained in my memory and really explained exactly what the model was doing. Sometimes being a little, more artistic... and abstract actually goes a really long way. And I think, yeah, for skill sync, I could definitely see there's a million different patterns and a million visual examples of how to show that off. And you can be a lot more... like just craftful and graphical about how of how you just how you design that on on the website so yeah that would be my feedback to to to these guys cool thank you skillsync thank you very much okay next up we got instaplay so let's see So I'm seeing a bunch of featured... I can't tell if these are movies or games. So it says design something that... Bird sort. Bird sort. Okay, so these are games that we can play? We've got games. I think. Okay. How do we play? Got a bunch of birds. We got some sound that's playing now. Let's maybe go. Let's try something else. Start button. Thank you. Thank you. Thank you. We're fighting this wolf, I guess. That's enough. So we've got this call out here, which is interesting. You know, it says... create, describe your game idea, right? When you click into it. Um, what's interesting is there was no copy under the title InstaPlay. Um, And so we were up to ourselves to try to figure out how to orient around this page. And the first thing that we did is we saw all the visual games, all the screenshots of them. And so we jumped right to that. And so we missed the fact that actually the primary purpose here is for us to be able to just create our own games on the fly. And so I think a line of text could help with that or some type of call out that makes the prompt box more prominent. from earlier it's like what is the one thing we want the user to take away when they land on the page is it exploring the the multitudes of games that have already been created on this platform or is it the fact that we can create our own games creating our own games actually leads you to a sign up page which no one's going to do if they haven't seen their created game right so you have to come up you have to cough up enough credits to try to like onboard people into the product that's the cost of acquisition of one user by the way and that metrics is extremely that cost of acquisition can't continue with Google. It has to be whatever I just asked it to do. It has to spit it out perfectly, and I have to be able to try it one or two more times. And if that works, I might be inclined to actually use that piece. So you put in a prompt, you submit it, and it takes you to this screen asking you to sign in. And the problem is, we don't know if this is good. This is a great example, obviously, where I would also... You could build out a really cool interactive carousel here, and each game has almost like... 10 seconds of like a real plane rather than just seeing these static these static assets right now i don't know what's behind it so i don't know what i'm looking at this is a great example you could probably get codex to tap into each one of these screen recorded and replace that as the thumbnail at least maybe on hover states and it kind of will bring maybe more interactivity and dynamism into all of this into all of these different like universes i think what they're trying to show with these with these covers is just like look with instaplay you can do a lot If the call to action is to create our own game and be game designers ourselves. Right. And so if that is the primary call to action, that is not what we did first. And then you probably want to actually create the game for people so that they can play with it. And then if they want to save it or come back to it later, share it with anybody, then you got to sign up or then you got to create your account. And here also, look, so you have create my games for you. Explorer. No one knows what any of that means, by the way. But if you click on any of them, like my game, for instance, again, it leads you to a sign up. this page you shouldn't even see my games probably right like and have the ability to tap into something that then will lead you to sign in again um for you leads me back to the game i was just on which i don't know if that makes a lot of sense and explorer is basically the page we're already on you're already exploring on home i don't even think that needs to be a new button the only thing you've done now on the explorer page is taking the input field away from me so now i can't i can't create a game anymore so there's a few things there in the hierarchy where i would really think for the first time who has no idea what it is that you're building or selling. Yeah. How do they interact with the product? It was also interesting because you went into the game. And we were like, OK, we're done with this one. I want to get back. It wasn't obvious to me that you do the fast forward icon to get back to the home page. I thought it was going to take me to another game. Yeah, it can be misconstrued as an arrow really quickly. Right. And so it's interesting. [45:00] you actually click the back button to get back because there was no obvious home to go back to. Exactly. But this is super cool. You can imagine just getting people to put in a prompt and creating a game, just like the racing game you were just doing. People could play with this for hours. And you just got to get people to that value of creating the game and experiencing something. Once you've created that game and you're proud of what you created, being able to share that with your friends is probably a really nice growth effect for these guys. And I think there's a lot of value in this kind of work. So. Props to them. Yeah. Nice job, InstaPlay. Okay, next up we have Mintlify, the knowledge infrastructure agents build on. Self-updating documentation for startups, enterprises, and agents. Right. Cool. I'm obviously very familiar with Mintlify. It's an incredible company. It's been growing really quickly and is a product that tons of YC companies and other dev tools use. Yeah. Yeah, this... It's a beautiful website. Yeah, this looks very professional. It looks like something that is trustworthy. It's straightforward. It's very clean. Yeah. The very nice compositions with color and typography and spacing and line heights. Yeah, so let's drill down to like, why do we feel that way? What are the specific elements of this page that make us feel like this is very clean and professional and all those things that we say? I think because it's being reductive in exactly the correct ways and it's showing only the things that are actually necessary to show. got a very clean headline. a small paragraph underneath, the Get Started button is very prominent. It's showing off some kind of a dashboard. You can kind of understand, okay, this is probably where the documentation would live and where the documentation would get updated. The graphic in the background is actually adding to the vibe rather than taking away from it. It's subtle and in the background, it feels... Um, It feels like it's helping you think it's some kind of a network or something. It feels like they're very cautious and careful with what they're building and some kind of an infrastructure intelligence layer. I never know about logo walls, but at least this logo wall is very well put together. And they're very, it's a lot of really big, credible companies, which builds a lot of social proof, which seems to be something like, you know, we have this vibe of like professional, trustworthy. And part of that is communicated via seeing Microsoft and Anthropic and X and Coinbase are their users as well. With so many tools flooding the market, you need that kind of proof point to be like, OK, well, Spotify is using it. Maybe we should actually look at it. great example of like they're abstracting UI and feature capabilities into something very cohesive and something really nice and art directed that feels interesting to look at. I would say maybe the headlines here for these cards are a little bit too small. If I look at all of them right now with the background color being the same, I'm kind of looking at none of them. And they're reusing they're reusing that that kind of braided animation in the background and that's kind of losing its magic if you if you keep if you keep kind of reusing it all over the place so i would actually say less is more here and the headlines could be a little bit larger um yeah again here it's kind of like i'm not sure if you if you need that it's very hard to read both on top of your existing setup like yeah that actually seems like a very important point that you would want people to know yeah you can control who has access you can build on top of your existing setup because the screenshot takes up a lot more of the space. There's this animation that is drawing your attention away from this headline that is actually really important and buried at the bottom. Exactly. And then you have to just, and then you have to differentiate between like how much and like how much information is the visual that you added actually giving the user versus the copy that you could add to it. And that balance, I think is a little off here, but overall very beautiful. Um, yeah. These are just nice. Like these are, these are, this is a really simple to use carousel. I can swipe through it. The colors are, the colors are, are, are mapped to the, to the photography. I think that's something that people don't get credit for enough. Like this is, this is great and really well done. It's Manhattan. It's the blue sky. It's Coinbase. It's a blue, it's a blue artifact here. Like that feels really nice to kind of scroll through. And they're very branded. Yeah. Yeah. Although these colors are too close together, so they kind of... I would have used a different color for this one here. Yeah. But overall, it's really nice. Maybe like a gray or... I'd probably... This is maybe more the AT&T blue, but this image, I would maybe use a different image. That's probably correct, yeah. Yeah, but overall, I mean, very clean, very trustworthy. There's a lot of space between the sections too, which is... I know that is a technique that you use a lot on your designs and things that you build. Each section of the homepage is basically the first chapter of all the child pages. would do when we were designing for clients is like if you are talking about products solutions resources and pricing then those are the four the four main parts of your home page because apparently that's where we're deeming the most important parts the product features our solutions the resources and the pricing as you scroll through the through the website those four components [50:00] show up. in exactly that order, from most important to least important because of scroll depth, like people drop off as they scroll through the page. So important content has to sit obviously at the top. And then each one of these sections should lead me in to that. So if I click on So theoretically, I would have had a whole section for product. right here on the home page and then from there you could you could click into products um products by the way actually should probably have a have a have a home page itself because there are so many many products but yeah overall it's it's it's well designed and it's it's simple looks like they took time and care to make this website which is nice to see yeah it's interesting um it's a lot more breathable. Yeah. It feels like, there's less going on here versus some of the other ones that we look at. There's still a lot of content, but it's spaced out and distributed across. Everything has its own space, which helps the user know what to focus on at any one time, rather than feeling like there's lots of things that are trying to draw their attention. And it's interesting how you describe that as like, this actually took more time than the things that have lots of time or lots of competing elements, because it actually takes work and it's easy to throw everything. It's much harder to figure out what needs to be edited out. Because that conversation is just much harder to have with the team. Everyone's competing. Everyone wants their functionalities or their features to be on the page. And you have to cure it and make a decision and reduce, which is the job of any designer. Like, reduce complexity and show one piece at a time and drive narrative that way. It's hard to do, but it pays off when done correctly. Yeah, this is excellent. Great work, Mentlify. Okay, next up, we have Nullify. So your users don't read your docs. don't read your manuals your employees don't read your content nullify turns your docs and ideas into narrated animated videos make them yourself in minutes or have our studio team make them for you for teams who need more video than they have time to make okay i think right off the bat being a typography designer i would say there's a headline there's a paragraph and there's almost like a smaller version of the paragraph underneath in a different font size. And then there's the book a demo button and the start free button. There's one, two, three, four, potentially five font sizes right in the viewport here, disregarding all of the logos and the banner and the banner here in the corner. That it's just a lot going on from that perspective. You can have a headline and then you have the paragraph and you have to put all of the important information into that paragraph. You can't keep adding keywords. headlines to it and making the user read all of those different points. The first thing that jumped out at me is the two placeholder elements in the headline. And I find that to be disorienting. Yes. It's one thing if you have one and it's changing, because then you can anchor yourself on, we do this for this type of person and this type of person, this type of person. But with two elements changing, it's like the user is changing and the docs or manuals or whatever. And then it sounds like it's actually like a video thing, which I would not have gotten from the headline at all. And so I think what they're trying to say is like, hey, people don't read these documents and PDFs and stuff like that. So you need videos so that they pay attention to stuff. But I feel like they need to say they do videos that convert better, kind of like the positive of what they do. Could they use their own studio to make a video of Olify and put that on the website and we watch that first? Yeah. It proved their point, right? People don't read all of this. We're not going to read any of this anyway, so just show us a video of what you do. There's a carousel here that I think just basically shows off the product. So let's click on one of these. I assume these are examples of their animations. You can't click into one of them. You have to use the icon. That's not good. This card needs to be tappable, obviously. You look at this and you want to click into it. Let's see. Every year, thousands of warehouse workers get injured. OK, so it's like an instructional animation video. Most of those incidents are completely preventive and warning devices. The video looks well made. And the thing that we want to do here, though, which is interesting tying back to a lot of the carousels that you've created in those past projects that you showed is I'm exploring. a lot of their work. And when I click into the one, it comes full screen. And then I figure out like, okay, how do I minimize X this out? And what I really want to do is I want to have it zoom in so I can see it play. And then I want to be able to keep jumping to the other ones because I want to see the depth and variety of what they can create. Exactly. And it's kind of hard to do that right now. Yeah. None of these are tappable. I can't open them up full screen. It's like you have to like use all of the, you have to use all of the, the little buttons here. The vaccine is injected. You can skip through them. Yeah. Muscle. I would want it to zoom up, not the full width and take over everything, but like 90% or something. Just enough to show me what's going on. And then I can start swiping for all of them. And maybe right underneath, show me that actual company. And maybe these are all actually case studies. So as they open up, you could open these up in really nice sheets with a depth, so the rest of the page. [55:00] pushes back, sheet comes up, you can see the video at the top, maybe there's a description of what that video is for, what's the construction company, bit of a case study, that could also almost lead you into like customer stories or success stories. These are obviously the demos they're showing off of past clients that have worked with them. So there should be more focus on those videos, Less, I think, on the logo banner ad here, a conciser headline that doesn't jump around between two things happening at the same time. And now we get into the platform. Exactly. Now we're getting into the product. Now the description is like, oh, yeah. Oh, the platform. Here, go up just a little bit here. Oh, sorry. Another video. So you make the video, upload a doc, a blog post, or an idea and get a narrated animated video in minutes. Edit it just by chatting. I feel like that's what I need all the way up here at the top. To explain what it is that they're doing. Yeah, because right off the bat, I don't even have this for me. And so how many people do they lose that would be ideal customers but can't even figure out that this is for them? Show me what the product does. And if I'm into that, then show me the results. Yep. I also know it's scroll jacking here, which drives me crazy. I agree. Because it feels less responsive to the scroll that I'm trying to do. It takes a while to ramp up to the speed. I think I want to take the time here on this podcast to talk about scroll jacking in general and scroll manipulation on websites. Smooth scrolling on websites is a disaster in the industry. And I feel like you use the native scroll on websites and don't hinder. which a user wants to interact with the content of your website. That is exactly what we were talking about earlier with interruptible interfaces. Apple has pioneered this for decades and their software and their hardware is proof of that. You want interruptible software because all thought patterns are interruptible. You might think something and click on something else and you would never want to get a user into an environment where they have to smooth scroll or scroll jack through the content because that's the way you think they are going to perceive or digest this content. of going about it. I always feel like I want to be as unobstructive as possible and be as polite as I enter the room. Dieter Rams would always say, enter politely and quietly when you walk into a room. Well, also, as users... This is not the only website we've ever used. Exactly. We're used to scrolling on probably hundreds of thousands, maybe millions of other websites. Usually on our phones. Yeah, and on phones. And we get used to the sensitivity and the precision with which we scroll. And when something changes that, you have to reorient yourself to try to find what you're looking for. And it becomes a distraction. And it just becomes sluggish. Like I'm trying to... pause on this piece of content, but the animation is kind of still playing. So now I'm trying to use the trackback to counter that animation. And it's making me uncomfortable. I don't want to have to scroll like that. And then since the tap targets here are really difficult, you have to hit these tiny buttons. Yep. It's a bit complicated. At the end of the day, they just have multiple different carousels on this website, all with video players behind it that open up in a full screen video player that the only way to exit out is with the escape. with the escape button. Overall, the videos seem very, very well done. The videos seem great. Yeah, just getting people into those and being able to see more of them and experience them and understand the case studies behind them seems to be the thing that will convert people. Yeah, and I think if this is improving the health and safety of Adidas or that construction company, then Nullify is doing a great job. Yep. And that's the product they're selling. Awesome. Thank you, Nullify. Okay, next up, we have Instinct. lunar future today okay so we got a moon building a lunar future, and we've got some kind of satellite that's floating around. Yeah, it's nice. It's very immersive. I think it's very safe to say that these guys are working on space technology. What gave you that idea? Aerospace technology. So already there, kudos. I think You know, to go back into like AI world for a second, this is a great example of, I think you can very easily get an LLM to make you kind of like a 3D version or a WebGL version of a moon that you can put on this website that kind of is interactable with the cursor. That's something that I would probably add to this page. Both of these elements are actually things that I would render in 3D and then have as live objects on the page. That's not totally impossible to do now with AI. showstopper components so like when you have one or two components on the website that really like take all of your attention and like really draw you into what's going on yeah um i feel like that's a that's an awesome moment to show to show something like that off yeah i think this this is very well done because right off the bat we knew exactly what this was yeah and the animation here of like showing it in 3d it could have just been a 2d it could have been a photo yes you know that they superimpose but there's something about that that draws our attention to like oh this is actually the thing that they're building the moon is a photo here in the background so right the thing that... I was reacting to, but yeah, you're totally right. [60:00] Also, nice use of the font. I feel like a lot of the websites right now are working in a very safe, considered space with a sans serif. And having the courage to try to wield a serif font on the website is a nice touch. I will say on that note, the logo itself, the font here, and this typography here are all different and kind of competing. And then there's a lot of color in the logos down here. including your lovely logo and I feel like it's almost drawing too much attention away from the actual message and in this case There's only one message. It's nice and reductive, but you have space to add one more piece of meta content here that maybe talks more about what your company does and what you're building. But let's dive further in. um yeah so now they get more specific instinct is building the lunar lander for today's space industry so launch cruise land yeah i think that's it's it kind of explains what's what's going on that's really cool that when you hover over it you see it i mean the first one it did i couldn't really tell what's happening there i don't really this doesn't really look like a launch to me oh there we go okay you just had to sit with it for a while so maybe they can get to that faster way faster the attention spam in general is half a second like that's what was cool about the second I think that's a very good piece of feedback here. The moment you hover over this, this thing should open up. There's a world where you could have them all play at the same time because they're very concise moments. It's just the launch. It's just cruise. It's just land. And they can actually all play in quick looping videos. And you could probably get the point across even faster. And the land video, it doesn't really get the point across. I don't think everybody immediately understands that's the moon. And then you're slowly coming closer to it. I think that what you're actually waiting for is this moment, right? You want to see. go you see the shadow getting bigger That's it. That's what I want to see. Yeah. I wouldn't even show any of the other stuff. It should have just been that. It should have just been this. It should be that, this scene, and then this, but with the top open. And that's all you need to do here. Yep. And again, one, two, three, three, three. Like, the three-up is nice as well. On mobile, this really quickly turns into a nice carousel. So very easy to translate this into mobile. Again, Primal strategy that J.T.L. and me, our school of thought on this would always be you have technology, company, news, careers, merge. If these are the things that you deem as important for your business, those are the chapters on the homepage. Show off technology, show off the company, show off news and careers. Don't make me use the navigation at the top. These are all elements that you can bring into the homepage. And from there, using very simple sheets. sheets you can just transition into any pieces any piece of that content and it'll make that whole it'll make this whole thing feel way more digestible and and and and and readable but let's let's click through some of the pages um yeah that's cool yeah technology okay so what i like about this yeah it's it looks like it's real video and so it makes me feel like this is real i mean these this is real yeah it's not like a bunch of renderings and you know it's hard to tell is this real is this just like a plan that they have and it's like no they're actually doing the thing they're building this yeah I think, again, great example. There's not that much information on the technology section. This whole video could have been a piece of content on the homepage that says explore our technology. You tap into it. you open up a new component like this, you scroll through it. And when you scroll back out, you're on the homepage again. Like that interaction pattern would work really nicely here. And this is super cool. And you're relying on people to click on the technology page in order to see any of that. Exactly. We're getting a little sloppy here with the cover images here. I think there's a lot of stuff going on. It doesn't match the quality and the style of the rest of the pages. No, not at all. And I think very important for Instinct to remember here, that becomes a stylistic element of the overall art direction for your branding you don't use it for any of the body copy or paragraph copy those are sans serif that's a sans serif font so these this this information here and this information here i would use something like instrument or just like a normal sans serif like a like an inter or something that works really well here we were looking at carousels earlier like this carousel doesn't drag this carousel doesn't swipe that's, That's definitely not the way you build these components. I think my takeaway is you've got to release Carousel Kit. We have a Carousel Kit, actually, that, yes, has been working on called Blossom Carousel. And Blossom Carousel is basically, this carousel swipes and scrolls, and it comes in a multitude of different variations and versions. It comes as stacks on mobile. This is free to use and on GitHub, so any founders or any entrepreneurs who are watching the show, you can... Yeah, this is great. Everybody should use this. way better. Exactly. Awesome. Awesome instinct. Thank you. Great work instinct. Awesome. That does it for this design review. Marvin, thank you so much for being on. Thank you so much for having me. It's so lovely to be here. It's nice to be in San Francisco. It's just like, yeah, the energy here is unmatched. Y Combinator is awesome. The office here is sick. I'm so glad that you guys asked me to be on the show. And it's just, it's nice to get to sit with like, [65:00] people who just want to look a little bit under the hood. We went through some of that work and I think, yeah, thank you for letting me show a little bit of my workflow. And it's awesome to see all these companies coming up with so much innovative new work. Yeah. Well, it was amazing to see the behind the scenes of your work and really get into your mind and how you think about how you set the bar and level it up with not just the visuals, but a lot of the interaction and how users actually experience the work that you do. So thank you so much for sharing it with us. And that does it for review and we'll see you on the next one bye guys