Run Overview

我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师

https://www.bilibili.com/video/BV1MbosBfEoK

success
平台
B站
创作者
code秘密花园
当前阶段
已完成 / 无
最后更新
2026-05-15 10:38:14
Stages
download
success
元数据已保存，并确定了可用字幕/音频输入
2026-05-15 10:34:40 → 2026-05-15 10:34:52
transcribe
success
音频转录完成，共 3 段
2026-05-15 10:34:52 → 2026-05-15 10:36:14
analyze
success
结构化分析完成（引擎: qwen）
2026-05-15 10:36:14 → 2026-05-15 10:38:14
render
success
整理稿、辅助全文与运行产物已全部生成
2026-05-15 10:38:14 → 2026-05-15 10:38:14
Artifacts
status.jsonmetadata.jsontranscript.jsonanalysis.jsonreport.mdarticle.mdrun.log

《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》内容整理

Theo 这次转向 CMUX，并不是因为 Ghostty 已经无法使用，而是因为他的开发工作方式发生了变化。 随着多个项目、多个终端任务和 AI 编码工具同时展开，传统终端加 Tmux 的组织方式开始显得吃力。 视频随后展示了 CMUX 如何用项目侧边栏、分屏和标签管理回应这个问题，同时也提到浏览器集成和链接打开方式等体验仍不成熟。

核心信息

  • 对 Theo 来说，传统终端多路复用器在多项目和 AI 编码并行场景下开始显得不够顺手。
  • 视频将 CMUX 的项目侧边栏和分屏能力作为应对多项目并行管理问题的主要理由。
  • 将高端AI能力封装为可复用的Skill，是普通人跨越技术门槛的关键路径。

跳读导航

可先看这几段：

  • 00:00:00：介绍Figma股价下跌背景，引出Anthropic新功能Claude Design
  • 00:00:30：展示基于该Skill生成的两个设计案例效果
  • 00:05:00：说明色彩系统采用OKLCH，因其感知均匀性提升视觉和谐感
  • 00:11:00：细微规则叠加带来从合格到有风格的质变
  • 00:12:00：推荐开源项目EasyAgent，用于复刻Claude Code类产品

内容主线

从工具到技能：让每个人都能做顶级网页设计

UP主介绍Claude Design功能虽强但难以使用，于是将其核心能力提炼为一个名为WebDesignEngineer的Skill，实现人人可用的高级网页设计能力。

视频并没有把这次切换归因于 Ghostty 的性能或稳定性，而是转向了工作流本身：当项目分支、终端会话和 AI 编码任务同时增加，原来的组织方式需要承担更多定位和切换成本。

揭秘Claude Design的六大设计思维

深入拆解Claude Design提示词中的核心设计原则，包括角色定位、六步工作流、去AI化规则、色彩系统选择、留白运用和自动化验证机制。

视频用分屏、重命名、固定标签这些具体操作说明，CMUX 想解决的并不是单个终端窗口怎么摆放，而是多个项目、多个任务同时展开时，怎样更快定位当前工作区。

实战对比：Skill如何让设计从合格到精致

通过两个真实案例对比，展示使用Skill前后在信息缺失情况下生成网页的差异，凸显琐碎规则带来的整体质变。

视频用分屏、重命名、固定标签这些具体操作说明，CMUX 想解决的并不是单个终端窗口怎么摆放，而是多个项目、多个任务同时展开时，怎样更快定位当前工作区。

开源共享与未来展望

公开WebDesignEngineer Skill及原始提示词，同时推荐其另一开源项目EasyAgent，帮助开发者构建企业级AI Agent系统。

视频后半段从浏览器集成和链接打开方式的问题切入，随后把讨论推向更大的工作区设想：终端、浏览器和编辑器不再作为几个互相跳转的应用存在，而是被收进同一套可分屏、可嵌套、可滚动的环境。

边界与保留

  • 该Skill依赖于Claude 3.5等特定模型，跨平台兼容性受限
  • 部分规则如色彩系统需用户具备一定设计认知才能正确应用
  • 提示词虽已泄露，但实际效果仍受上下文理解能力影响
  • 未提及如何处理多语言或本地化内容的适配问题

回查证据

整理结论视频依据时间点
角色定位为专家设计师与产品经理关系你是一个专家设计师，而用户是你的产品经理。注意啊这里并没有说你是一个AI助手啊主要说的是设计师和产品经理的关系。00:02:15
直接输出可运行代码而非静态图片他输出的不是图片，是真实能跑起来的代码，链接是可以点的，标签也可以切版本，可以diff。00:01:00
去除AI味的设计规则清单，如禁用渐变背景、乱用emoji等别滥用渐变背景，别乱用emoji，别用那种侧边色块的原生问题，如可能让大家的字体啊对齐无意义的数据和图标等。00:04:00
说明色彩系统采用OKLCH，因其感知均匀性提升视觉和谐感传统的HSL色彩空间有个很大的问题啊就是感知不均匀，那是的亮度值呢首先可能比蓝色看的的大问题。00:05:00
提出留白是解决版式问题的关键策略每个元素都能明明自己为什么的该有，那但首先你要想加起来啊这用用户是每个里面啊可能个个的的问题啊用留白来解题。00:06:00
输出独立验证脚本，对网页进行全局检查如果用做个个个的的自自自己的形的很时候呢它会这个形式的的自自己没有题题但是如果换一个全局的的产品啊就是自我感觉良好就很容易被解构。00:07:00

术语与来源

术语本文语境
Claude DesignAnthropic推出的AI设计功能，可基于文本提示生成可运行的网页代码，支持版本管理与交互验证。
Skill一种可复用的AI工作流模块，封装特定任务的提示词、流程与规则，可在多种AI工具中调用。
OKLCH一种基于CIELAB色彩空间的现代色彩表示法，具有感知均匀性，适合生成和谐配色。
CIELAB国际照明委员会定义的感知均匀色彩空间，能准确反映人眼对颜色的感知差异。
Diff版本控制系统中用于比较文件差异的功能，可用于追踪代码修改历史。
留白设计中未被内容填充的空间，用于增强视觉层次与阅读节奏，是高级设计的重要手法。
角色定位在提示词中设定AI的角色身份，如专家设计师与产品经理，以引导其决策方式。
工作流一套结构化的任务执行流程，如理解需求→探索资源→制定计划→搭建结构→完成验证→总结。
来源项内容
UP主code秘密花园
平台B站
BV号BV1MbosBfEoK
链接https://www.bilibili.com/video/BV1MbosBfEoK
时长00:12:58
播放量99,881

辅助参考：article.md（校正后全文）

---

分析引擎: qwen 模型: qwen-flash 原文长度: 4562 字 生成时间: 2026-05-15 10:38