前几天，OPPO 4.7 刚刚发布，昨天 Anthropic 又顺手端出了 Claude Design，一个用对话生成产品页原型幻灯片的新产品。对开发者最有意义的一点是，它能把设计稿打包交给 ClooCode，一句话就能够实现真正可以跑的代码。大家好，我是小木头，今天我们再来聊聊 ClooDesign。
我们来看看这款新产品对于设计工具、设计软件究竟有多大的冲击。ClooDesign 来自 Anthropic Labs。他们之前还做过 Skills MCP CoWork。官方对于这款小产品的定位是跟 Claude 一起对话，做出可以直接发出去的视觉产品。大家通过 Claude .ai slash design 这个 URL 访问产品。
那它能做什么呢？官方列出了一系列的典型用例，首先是交互原型，把静态 mockup 变成可以使用的原型，不用写代码，也不用走 PR。第二类是产品线框稿，产品经理自己勾画 feature flow，画完呢直接丢给 code 实现。第三类是设计探索。设计是一次铺出十几个方向，不用为了赶时间只做两三个。还有一个典型的应用场景就是 pitch deck 和演示。
帮助用户从大纲到成稿，几分钟就搞定，还能导出PPT或推送到Canva。用户还可以用它来做营销素材，比如landing
page、社交图、campaign的视觉效果。最后一类呢，就是前沿的设计，语音、视频、3D这种得跑代码才能做的东西，它也可以搞定。一句话说，凡是需要做漂亮东西的场景，它都想吃下。光说没感觉，那我们来做个 demo 吧，从视觉上更加直观地了解 Cloud Design 究竟能为我们做什么。
通过浏览器打开 Cloud. aslash Design，这就是首页。我们可以选择不同的生成类型，原型还是PPT还是基于模板在做设计与开发，给它起一个名字，比如菜菜。不久前我也发布了一个小小的自己日常使用的餐食管理的小应用，菜菜app.cloud就是它的官方网站。我一直期望能够设计一个更好的使用体验，来更方便的管理日常采买的原材料、菜谱、每周的餐食。
采购清单等等，咱们就借此机会让 Cloud Design 帮助我们重新设计一下这个应用。在开始使用前，大家还可以点击 Set Up Design System 来创建自己的设计系统。点击 Create，我们可以选择从哪里开始这次的设计。可以基于咱们创建的设计系统，可以基于截屏，可以基于代码仓库。如果大家已经有了Figma设计，也可以将文件提交。
提交方式呢是在聊天框这里上传Figma文件，我就直接将菜菜Up的链接交给他，看看他能不能读取这个官方网站的内容，了解这个应用是什么，并且帮我重新设计。我给他这么一个简单的需求，并没有提供任何的设计想法，也没有提供什么素材。就将官方网站链接交给他，希望他能够去读取到内容，特别是其中图片资源，理解核心功能，帮我重新设计一个Web版的应用。
我的期望是确保像Materials、Recipes、Meals、Orders。管理呢，能够有一个最佳的、最便捷的用户体验，实际上便捷网写错了，看看它能够给到我什么样的一个设计吧。首先呢，它通过脚本的运行来获取网页内容，其次呢，还抓取了四个截图。它现在呢，列出了一个问卷。来确认我期望的设计方向，整体美学方向。
其实我个人比较偏好这个厨房笔记本感，米黄纸质加手写感，我觉得这个不错。Web布局范式，日常采买涉及大量的CRUD操作，哪种主导航最合适？其实这个呢，对于我来说没有特别感觉，因此呢，我希望他来帮我做决定，要重点打磨哪几个模块？我个人觉得这些模块都非常值得打磨，就把它全部勾选上。编辑体验的偏好是期望内联编辑，还是侧边栏抽屉样式，还有快捷驱动，还是三者结合？
他依然可以帮我做决定。这一点上，我就直接决定吧，侧边抽屉详情。信息密度层面给到了我一到十之间的一个分数选择，一是极疏、宽松呼吸感，十是极密。那咱们就保留它推荐的密度值七。希望看到几种变体，这一点上大家可以注意。如果你期望呢，可以让它生成多个变体，在这些方案中选择。我觉得在演示中就一个最佳方案就好。下一个问题是，希望能通过 tweaks 实时切换什么？
这一点呢，是在 Clock 中非常有趣的。不光生成一个应用，生成一个模板设计，它在这个生成中还能够为我们创建一个所谓的 tweaks 概念或组件。在 tweaks 中，它会提供一组我们可以进行实时线上或在线调整的设计元素。在我们这个设计或者演示中呢，它给到了我们如下的选项：主题配色、信息密度、字体搭配、布局范式、模块导航顺序。
我们来选几个，大家看看效果。我选主题配色、布局范式和模块导航顺序。Muse视图最想要的形态，可以是周视图、月视图、列表，还可以是看板。看板呢，就是早餐、午餐、晚餐三列，我就选看板吧。接下来是Orders核心场景，日常我使用的Orders场景呢，就是购物清单。最后呢是界面。我当然期望中英文双语了，其他方面我暂时没有任何的灵感或者是直观的需要反馈给他的或者我的需求，那直接点击
Continue，咱们来看看接下来他会做出什么样的一个设计。
Clo Design 花了一些时间生成了现在这么一个 Web 应用，在左侧的对话这里，大家看到。Cloud Design 还在做验证、模拟的可视化的一个桌面情况，看起来呢，它在做一些真正的可视化的端到端的验证工作，这是蛮神奇的一点。我们来看看它在上面究竟做了一些什么。通过刚才的问卷调查，他得到了我偏好的一个设计的方案。
根据这个方案呢，建立的一个工作计划，开始了工作。后续呢，就是一系列的代码生成工作。我们来看看这个应用究竟能够给到我们什么样的功能。在右下角有一个调整模块，这正是刚才咱们说的 tweaks 功能或者组件，主题、配色、布局、语言都可以切换。我们来试一试。大家感觉怎么样呢？这个呢就是主题颜色的切换，布局也可以调整，可以设置成顶端的导航栏，可以设置成侧边导航，语言也可以做调整，中文、英文都支持。
我们暂时将 Twix 这个组件关闭，我们就以中文的形式来展示这个应用吧。在食材库这里，按照不同的分类列出了目前可以使用的食材。我们还可以点击新建按钮来添加新的物料。菜谱是以卡片的形式展示的，咱们可以点击新建，创建新的菜谱。膳食计划来看看吧，这是按每周的方式来列出的，每天呢是早餐、午餐、晚餐的方式，三列看板式的呈现，这也是我们在方案确定中我所选择的。
每天呢，可以根据自己的需要来添加菜谱。比如十八号午餐，我想要再添加一个蒜香意面吧。长按卡片可跨栏拖动。比如我想将晚餐的番茄炒蛋移到中午来。怎么样，效果还不错吧？来看看采购清单，这是我感觉非常满意的一个设计了。我完全不觉得在这个设计上我还有什么可以让它做改进的。包含了进度以及合计金额，比如在超市采买的时候，当我拿了黄瓜呢，就将其勾上，进度呢对应的就做了调整。
拿了五花肉也勾上，那来看看全部采买完毕的效果。好，进度。八杠八表示采买完毕，我们可以点击标记完毕这个按钮。这里还有一个非常实用的功能，从库存告急添加。当我们点击它，就可以在这次的采买中将库存告急的商品添加到这个清单中。这一点其实我自己都没有想到，但是呢，它已经帮助我在这里做了这么一个功能的呈现。可以说是非常非常的优秀了。
在这次的工作中，他不仅给到了我们这么一个设计，在交付的这个应用中，所有的按钮链接都是真实可以点击的。分享一个蛮有趣的功能，我们以菜谱这个功能为例，或许我们有时希望它做一些调整，但并不能够很好的描述究竟我期望它做什么样的改动，在哪里做改动。过去我要做的呢，就是对应用做截图啊，交给 Claude，然后通过复杂的文字进行描述。
那我现在可以选用 Do 这个功能，点击它，在页面中圈出我想要它做调整的区域，比如我圈出菜谱卡片，那在这里呢，咱们直接输入文字，我们就提供了自己的一个反馈。平时呢，我并不会对菜谱做拍照，因此呢，菜谱通常不会有图片。如果大量菜谱又没有图片，当前这个菜谱的页面展示效果可能会不太好。我期望 Design 帮助我看看该怎么改进，发送就好。
在左侧对话这里，大家看到了吗？有这么一个截图，其中呢就有我所圈出的区域，并且给到了我刚才在圈出区域中的一个描述。他给到我两个改进方向，一个是手绘食谱卡的风格，一个是可选的彩色色块加emoji的标识。他现在呢就来做改造，改造完毕，大家来看看新的菜谱效果吧。左侧对话这里，他依然在通过。浏览器进行端到端的验证。
那么，我们直接看右侧的演示效果。现在的菜谱就变成了食谱索引卡的风格。这种方式呢，我觉得是更适合我日常使用的风格。我也非常满意这么一个效果。现在设计完毕，应用开发也完成。那接下来该做什么呢？我们可以点击右上角 Export，将项目呢以 zip 包的形式打包下载，也可以发送到
Canva。更为有趣的是，作为日常 Clojure 的用户，我们可以选择 hand off to Clojure，它给到了我们一个命令或者提示词，我们只需要交给 Clojure，它就能帮助咱们将这个设计重新实现出来。
点击 Copy Command，粘贴运行，它会基于这个链接去获取到完整的设计，并且来实现这么一个应用。咱们在这里呢就不等待它完成了。通过 Cloud Design，我们有了一条完整的链路。提示词到 Clo Design 出原型，再到 Twix 来调手感，Clo Code 补生产细节。中间你做的事情非常少，自己从零撸这种东西至少得两三个下午吧。
目前市面上 AI 生成 UI 的工具蛮多的，Clo Design 的差异我觉得主要在两个地方，第一个是品牌系统原生内置，Clo 可以读取咱们自己的代码仓库和设计文件，在 Clo Design 咱们还可以创建自己的设计系统。将自己的公司、团队、产品的相关信息交给他，比如 Figma 的文件，包括字体、Logo。
通过这套系统，Claudio 可以更好地理解你、理解你的团队，你不用每次都重新给他解释我们公司的风格是什么。第二点是，它跟 Claude 原生集成。从设计到生产代码，我们中间不需要很复杂的过程，通过一段简单的提示词，就将 Cloud Design 集成到了 Cloud Code，设计与开发完美的对接。
感兴趣的朋友赶紧去尝试一下吧。好了，今天就到这里，我们下期见。