Claude Code新功能, /design 从 UI 一路做到产品、视频和发布
2.4K views · 2026-08-26
UI Design
Claude Code 现在不只是会写代码了。
这期视频我会实际测试新的 /design 工作流：从两张设计参考开始，让 Claude 先探索 2–3 个不同的 UI Design Directions，而不是一上来就直接写代码。
0:00 intro
1:27 inspirations
3:57 /design command 做UI 设计方向
5:01 canvas ui 介绍
7:10 制作full app 和设计系统
8:27 制作social post
9:41 制作视频
然后我会选出一个方向，继续把它变成：
→ Design System→ Real Product Interface→ Claude Code Implementation→ Social Media Visual→ HyperFrames Animation / Product Video→ 最后进入发布流程
我认为 /design 真正重要的地方，并不是“Claude 现在也会画 UI”。
而是它开始把 设计探索前置。
过去常见的 AI Coding 工作流是：
Prompt → 写代码 → 做完发现不好看 → 再让 AI 美化
但很多真正重要的产品决策，其实应该在 Build 之前就完成：
Hierarchy、Composition、Density、Tone、Visual Language、Interaction Focus。
所以我也会在视频里聊一个我越来越认同的观点：
好设计依赖三个东西：好的参考、清晰的想法，以及后天训练出来的审美。
AI 可以帮助我们快速探索更多方向，但最终选择哪个方向、什么应该留下、什么太普通，仍然需要人的判断。
这期你会看到：
• 如何使用 Claude Code /design• 如何用 Reference Images 生成多个设计方向• 为什么应该 Design First，而不是 Code First• 如何把设计方向继续发展成 Design System• Claude Design × Claude Code 的工作流• 如何从设计继续生成 Social Content• 如何结合 HyperFrames 制作 Animated Product Content• 为什么 Claude Code 正在越来越像一个 Creator Workspace
如果你平时在使用 Claude Code、Vibe Coding、AI Design、UI/UX、Design Systems，或者希望 AI 做出来的产品不再都是同一种“AI SaaS 风格”，这期应该会给你很多新的思路。
这次真正值得测试的问题不是：AI 会不会设计？
而是：一个 Agent，能不能从设计方向开始，一路完成产品和内容？
#ClaudeCode #ClaudeDesign #AIDesign #VibeCoding #UIDesign #AIcoding #HyperFrames
这期视频我会实际测试新的 /design 工作流：从两张设计参考开始，让 Claude 先探索 2–3 个不同的 UI Design Directions，而不是一上来就直接写代码。
0:00 intro
1:27 inspirations
3:57 /design command 做UI 设计方向
5:01 canvas ui 介绍
7:10 制作full app 和设计系统
8:27 制作social post
9:41 制作视频
然后我会选出一个方向，继续把它变成：
→ Design System→ Real Product Interface→ Claude Code Implementation→ Social Media Visual→ HyperFrames Animation / Product Video→ 最后进入发布流程
我认为 /design 真正重要的地方，并不是“Claude 现在也会画 UI”。
而是它开始把 设计探索前置。
过去常见的 AI Coding 工作流是：
Prompt → 写代码 → 做完发现不好看 → 再让 AI 美化
但很多真正重要的产品决策，其实应该在 Build 之前就完成：
Hierarchy、Composition、Density、Tone、Visual Language、Interaction Focus。
所以我也会在视频里聊一个我越来越认同的观点：
好设计依赖三个东西：好的参考、清晰的想法，以及后天训练出来的审美。
AI 可以帮助我们快速探索更多方向，但最终选择哪个方向、什么应该留下、什么太普通，仍然需要人的判断。
这期你会看到：
• 如何使用 Claude Code /design• 如何用 Reference Images 生成多个设计方向• 为什么应该 Design First，而不是 Code First• 如何把设计方向继续发展成 Design System• Claude Design × Claude Code 的工作流• 如何从设计继续生成 Social Content• 如何结合 HyperFrames 制作 Animated Product Content• 为什么 Claude Code 正在越来越像一个 Creator Workspace
如果你平时在使用 Claude Code、Vibe Coding、AI Design、UI/UX、Design Systems，或者希望 AI 做出来的产品不再都是同一种“AI SaaS 风格”，这期应该会给你很多新的思路。
这次真正值得测试的问题不是：AI 会不会设计？
而是：一个 Agent，能不能从设计方向开始，一路完成产品和内容？
#ClaudeCode #ClaudeDesign #AIDesign #VibeCoding #UIDesign #AIcoding #HyperFrames