Ras Mic · 22:09 · 发布 2026-06-23 · 2.4万次观看(截至抓取) · 观看原视频
主旨
作者用自己正开发的 Pluto 应用做反面教材,演示一套”先把设计系统磨对、再交给 coding agent 一口气产出多个页面”的工作流,核心是用 Claude Design 生成基于 token 的设计系统并导出给 Claude Code,确保 AI 生成的 UI 全站风格统一。
核心论点
- AI 时代下”看着像 AI 做的”fugly 设计,根因是没建设计系统、没用 design tokens,不是模型不够好。(→ 详解1)
- Design token 是”把一个具体设计决策抽象成变量名”的最小单元,主题切换与品牌色变更只需改一处即可全局生效。(→ 详解2)
- AI 现在做不好”截图 1:1 还原”,但擅长给出一块可反复打磨的设计系统画布,人应把品味/审美留到这一层注入。(→ 详解3)
- 把设计系统在 Claude Design 调到满意后再喂给 coding agent,而不是在 agent 里逐页微调,因为 token 系统让一处改动自动传播全站。(→ 详解4)
- 上层 UI 组件库(BUI 等)的微动画、抽屉、3D 倾斜卡可整库搬来再让 agent 按本地设计系统重写,不必从零造轮子。(→ 详解5)
知识点详解
1. AI 设计的”fugly”通病:缺系统、缺令牌 00:20
作者开场用自己 Pluto 应用的现状做示范:首页和仪表盘的圆角不一致(有的尖锐小圆角、有的圆润大圆角),“New Agent”按钮在两个页面的视觉风格完全不同。这种不统一在 AI 生成的 UI 里几乎普遍存在,因为生成时缺少一个全局规范去约束。
他明确点出根因:01:25 “I did not build out a design system, nor did I use design tokens”——既没有设计系统,也没用 design token。这两件事是互相绑定的:设计系统是”所有设计决策的单一真理源”,组件库 + 品牌 + 文案规范都在里头;而 token 是这套系统的可执行底层。
对非设计师开发者来说,这尤其重要:他们没有 Sketch/Figma 训练出的肌肉记忆,只能靠 token 把”审美判断”转成”可重用的变量”,让 AI 后续按规矩填。
2. Design token:把设计决策变量化 02:00
Token 的本质是把一个具体的设计决策绑到一个语义变量名上。例如,不再写 padding: 16px 和 color: #1E40AF,而是写成 padding: spacing-medium 和 color: brand-primary。一旦这样,后面要做主题切换、品牌色升级、间距体系重整,只改 token 的值即可。
作者引用 Google 官方对 token 价值的表述:02:24 “tokens make it incredibly easy to introduce a dark mode”——切换 dark mode 只需改 token 值,变更自动级联全站。但作者用自己的亲身失败补充:你若没建 token 系统就开始写页面,等真要做 dark mode 时会发现某些按钮、徽章根本不响应,因为它们当时是用硬编码值写的。
第二个价值是02:46 “centralized maintenance”——品牌主色变更后,不需要在代码里全局搜索替换 hex 码,token 是这种”找每一个具体值”的苦差事的根治方案。对一个 AI 主导的开发流程而言,这套机制几乎是必备:你不希望每次让 agent 改色都得遍历整站文件。
3. 灵感收集:从 Twitter、Mobbin 到现成设计规范 03:36
工作流第一步是收集灵感,作者给出三个可靠来源。
第一个是03:36 他自己的 Twitter 信息流——关注的开发者/设计师/AI 圈层日常会分享大量新界面。看到喜欢的内容就 bookmark,但他用了一个叫04:04 GatherOS 的小工具把所有 bookmark 同步到一个集中池子里,等于自建了灵感库的 incoming 入口。
第二个是04:23 Mobbin,一个订阅制 UI 截图库(他没有付费),按 onboarding flow、hero section、dashboard 等模式分类整理了大量 app 的截图,可以直接拿来当参考。第三个是现成的设计规范文件——11:19 Vercel 的 design.md 是他重点推荐的”拿来当起点”的范例,直接复制粘贴就能让 Claude Design 基于它生成基础设计系统。
作者特别强调:这些参考都不是让你照抄,而是当起点。05:03 本视频示范用 family.co 这家”卡通但有品味的加密钱包”站点做素材——风格活泼又克制,适合做”cute + clean”的产品调性。
4. Claude Design 生成设计系统并逐点打磨 05:27
作者用的是 05:27 Claude Design(视频口播偶尔转写为 “Claw Design”,指同一工具),核心流程是:截屏参考页面 → 在 Claude Design 里点 “Start with a file” 上传截图 → 用一条简单 prompt 让它从截图生成完整设计系统。
参考 prompt 是06:06 “Please create a design system with the attached page. Please do create components using the design system and display the tokens. I want this displayed on one page.”——同时要求生成组件、把 token 列表展示在同页。这个 prompt 的精髓在于”display tokens on one page”:你想看到所有色值、字号、间距、圆角都被命名暴露出来,而不是埋在生成的组件里。
生成的初始版本大概率不会完美,作者展示了他如何用 10:01 markup 画笔工具直接在截图上圈出要改的地方,然后跟 Claude Design 说”remove this / fix alignment”。他特别提到10:45 “I don’t want AI to design my logo”——Logo 这种代表品牌核心识别的东西应留给人做,不要让 AI 生成”很 AI”的标准字标。
11:44 “if you use AI to design the entire thing, no sauce or input from you, your site’s going to look like everybody else’s”——这是他整套工作流的灵魂主张。AI 是把审美决定 提炼成 token 化画布 的工具,不是审美本身。
5. 从设计系统到可运行 App:喂给 Claude Code 13:06
设计系统调到满意后,作者在 15:11 SvelteKit 里新起一个最简项目(选 Svelte 是因为”my framework of choice”),然后回到 Claude Design 点15:59 “Share → Send to Claude code”——这个动作把整个设计系统作为上下文,通过 Claude Design 的 MCP 推给 Claude Code。
Claude Code 端先15:53 用 --dangerously-skip-permissions 启动(“that’s the way to live”),然后粘贴 Claude Design 给的 prompt,agent 会读取完整设计系统文件并识别出 color tokens、typography、spacing、radius、elevation、组件清单等结构。
接着作者追加一句18:53 “please build out a landing page. I want you to build out an auth page with sign-in and sign-up, and I want you to build a dashboard page”——一条 prompt 让 agent 同时产出三个页面。关键观察:19:01 “I didn’t tell it to use the design system. It’s baked into the codebase.”——他没说”请用设计系统”,但因为设计系统已经在仓库里,agent 自然遵守,产出的三个页面色彩、字体、间距完全一致。
一旦后续要调风格,只需改设计系统源文件一处,修复会自动传播到三个页面(20:14 “because you have a design system, once you fix one thing, it affects the entire thing”)。这正是 token 系统的复利收益。
6. 用 UI 库叠微动画,而非从零造 21:06
最后一步是20:35 “using UI libraries to spice up your application”。作者举了他最近发现的 BUI(纯口播未给链接)为例:这种库提供带微动画的 accordion、抽屉、3D 倾斜卡等”开箱即用 oomph”的组件。
21:02 “micro animations”——他说这些微弹跳、滑动、倾斜效果是设计质感的关键,但不需要自己写。两种集成方式:把组件代码复制粘贴给 agent 让它按本地设计系统重写,或者直接把库的 URL 给 agent 并要求”add this component but use my design system”。
这种”上层动画库 + 本地设计 token”的拼装范式,与agent-readable 组件库 主张的”组件源码 import 而非 npm 包、让 agent 能直接改”的思路异曲同工:核心都是把”组件”从黑盒包变成 agent 可读的源代码,从而在 AI 工作流里仍保持可塑。
可执行步骤
- 启动新 UI 项目前,先明确要不要 dark mode、要不要中途改品牌色——只要其中之一需要,就必须建 token 系统。
- 找一个你觉得”风格相近但不是照抄”的现成页面(family.co / Vercel design.md / Twitter bookmark)作为设计系统的起点素材。
- 用 Claude Design 的 “Start with a file” 上传截图,prompt 末尾明确要求 “display tokens on one page”,把所有 token 值集中暴露出来便于审查。
- 把 Claude Design 生成的组件用 markup 画笔逐个圈、逐个改——尤其要删掉 logo、AI 风 confetti 等不该让 AI 决定的部分。
- 设计系统满意后再用 “Share → Send to Claude code” 一次性推给 coding agent,不要在 agent 里逐页微调样式。
- 给 agent 一条 prompt 同时要求 landing / auth / dashboard 三个页面,验证 token 是否被一致使用。
- 把 BUI 这类带微动画的 UI 库 URL 给 agent,让它按本地设计系统重写组件,而不是从零实现。
关联
- 进阶:Skill 按需加载 vs agents.md 每轮注入 是同频道链路第一集(harness 上下文管理),先读它再读本片的 UI 层。
- 印证:Vibe Coder 定义为”只提需求、不问机制、一路下一步点到底”;本片整套工作流正是其反面——作者明确说 AI 设计全靠 prompt 而自己零审美贡献的产物会”和所有人一样”,主张 vibe coding 的合理范围止于逻辑/编码,UI 必须有 token 系统 + 人反复打磨。两者构成同一光谱的两端(对应AI 编码光谱的”vibe coding → agentic engineering”演进)。
- 印证:Audacity 是”技术门槛被 AI 拉平后,靠审美、耐心与细节打磨制造产品差异化”;本片在 Claude Design 里反复画 markup、改 token、改 logo 的”花时间”(作者原话:21:32 “you’re going to spend a lot of time here”)就是这种 Audacity 的具体落地——AI 把审美门槛拉平后,愿意花时间打磨的人反而成为差异化源。
- 印证:agent-readable 组件库 主张”shadcn/ui 这类把组件源码直接 import 进项目、让 agent 能改”是 2025-2026 选型逻辑;本片的 “Send to Claude code → 源码级 MCP 集成” 是同一思路的更上游版——连设计系统本身都以源码形式对 agent 暴露,而非打包成 npm 包。
- 冲突/更新:ras-mic·我如何构建应用 是同一频道前作,讲系统架构层(客户端/服务器/数据库/服务拆分),对 UI 一笔带过;本片把视野收紧到 UI 一层,认为 token 系统是”让 AI 生成的 UI 不再像 AI”的必要前提——前者补的是基建,后者补的是表达层,二者串联才是完整的 AI 时代 vibe coding 工作流。
一手来源与延伸
- vercel.com/design.md —— Vercel 公开的设计规范 markdown 源文件,本片用作”无灵感来源时的兜底基础模板”。
- family.co —— 视频里用作本片示范案例的灵感参考站点。
- Mobbin —— 移动/web app UI 截图库,视频列为灵感来源之一。
- Claude Design 与 Claude Code 均为 Anthropic 产品,无独立第三方文档地址可核(详见立场与利益节)。
术语
- Design System(设计系统:把 UI 组件、设计指南、品牌识别整合成单一真理源)
- Design Token(设计令牌:把具体设计决策抽象成命名变量,如 spacing-medium、brand-primary)
- Claude Design(Anthropic 出品的可视化设计系统生成/编辑器,可基于截图或 markdown 生成 token 与组件)
- Claude Code MCP(本片里 Claude Design 用 MCP 把整个设计系统项目作为上下文推给 Claude Code 的接口)
- BUI(本片举例的带微动画 UI 组件库,具体官网地址视频未给,搜索”BUI components”可查)
- SvelteKit(作者选用的前端框架;搭配
dangerously-skip-permissions模式跑 Claude Code) - Markup tool(Claude Design 内的画笔工具,允许在生成页面上直接圈选要改的元素并配文字 prompt)
金句
原文 11:44: “If you use AI to design the entire thing, no sauce or input from you, your site’s going to look like everybody else’s.” → 这句话是整套工作流的灵魂,也是与”AI 万能”叙事的根本分歧——AI 不是审美,只是审美的搬运工。
原文 02:24: “Tokens make it incredibly easy to introduce a dark mode. You simply change the underlying token value and the update propagates everywhere automatically.” → token 系统价值的最小可证伪承诺:dark mode 不必逐页改,改一处即全局。
原文 20:14: “Because you have a design system, once you fix one thing, it affects the entire thing, right?” → token 系统的复利收益,也是”先建系统再写页面”的根本动机。
立场与利益
视频有明确赞助段(描述里 https://rasmic.link/scrimba 走的是 affiliate 短链,导流到 Scrimba AI engineer 课程)。作者本人身份是 AI consultancy / product studio 主理人,口播反复强调”I have a product studio… this is what we do for a lot of businesses, particularly medium to large-size businesses”——视频中段是 Scrimba 的中插广告,已从笔记核心论点中剥离。
与工具强绑定的主张:整条工作流深度依赖 Claude Design + Claude Code 这套 Anthropic 闭环(截图 → 生成 → 推送 → 编码),换用 v0 / Galileo / Relume 等其他 AI 设计工具时,“Send to Claude code” 这一步不能直接复用,需要中间手动导出代码。token 系统本身是通用设计工程共识,不依赖具体工具。
通用共识部分:设计系统 + token 的价值、灵感收集方法、UI 库微动画的拼装策略都不绑定特定厂商,任何 AI 编码工作流都可借鉴。
价值定位
适合正在用 AI 编码工具(vibe coding)做产品前端、但对生成的 UI 不满意的开发者,提供一套把”AI 出图 → 设计系统 → 多页面一次性输出”串成完整流水线的具体操作步骤,而不是泛泛的”用 AI 做 UI”。
实操价值在于:这套流程把”反复在 Claude Code 里改 CSS”的高 token 成本、人工疲劳工作提前到 Claude Design 这块低成本画布上完成;再通过 token 系统让设计决策真正变成”改一处即全站生效”的杠杆。
与ras-mic·我如何构建应用 重叠但各有侧重:前作讲系统架构(后端、数据库、服务拆分),本片讲 UI 层设计工程——两片合看才覆盖”用 AI 做产品”的全栈。本片独有价值是把”AI 生成 UI 不一致”这个 vibe coding 普遍痛点,落到 token + Claude Design 这套可执行的解法上。
自检问题
- 为什么作者主张 AI 生成的 UI 看起来”fugly”的根因不是模型不行,而是缺设计系统? 答案:根因是没建设计系统、没用 design tokens——没有全局规范约束,各页面的圆角、间距、配色各自为政;模型本身能画出好看界面,但缺乏 token 化的统一约束就只能靠运气。详解1 01:25
- Design token 的两个核心价值是什么?各举一个具体例子。 答案:主题切换便捷(改 dark mode 只需改 token 值,变更自动级联);集中维护(改品牌色不必全局搜索替换 hex 码)。详解2 02:24 02:46
- 为什么作者建议先在 Claude Design 把设计系统磨到满意,再喂给 Claude Code? 答案:因为设计系统已在 codebase 里,token 改动会自动传播到所有页面;在 Claude Code 里逐页调样式既费 token 又破坏一致性。详解5 20:14
- “I didn’t tell it to use the design system. It’s baked into the codebase” 这句话意味着什么工程实践? 答案:让规范成为代码本身的结构(通过 Claude Design MCP 推送到 repo),而非每次靠 prompt 提醒 agent;这是规范工程化的典型做法——降低使用规范的摩擦、避免依赖人记得要求。详解5 19:01
- 作者反对”AI 全包设计”的具体理由是什么? 答案:“If you use AI to design the entire thing, no sauce or input from you, your site’s going to look like everybody else’s”——缺个人审美贡献会导致产品与所有 AI 出图趋同,丧失差异化;AI 只能画”画布”,审美必须留给人。详解4 11:44