五分钟做出你的第一个设计

体验 1DesignTool 最短的路径是一次 brief 加一次 steer——大约五分钟。 本页带你走一遍这个循环:一个新项目、一次 run、一次修复——后面的 文档都建立在这个流程上。

创建项目

在主屏幕上点击 New project——或者直接在主屏幕的 composer 里描述 设计,应用会替你创建项目。选择模板会告诉 agent 输出格式(一套演示 文稿、一组移动端界面、一份 UI mockup),并加载对应的查看器和检查; Blank 则把格式留给 brief 决定。

带模板卡片的新建项目面板

写第一份 brief

好的第一份 brief 要讲清想法、受众和感觉——一两句话,不是一份 spec。"一个咖啡订阅的落地页——深色、偏编辑风、字体排印大胆自信" 就够了。点击 Send 发送,run 就开始了:composer 显示 agent 正在 工作,预览面板随着真实文件写进项目文件夹而逐步填充。

run 进行到一半的项目——左边是 transcript,右边是实时结果

这一轮结束时,门禁会报告——Design checks 为绿色表示结果通过了 kit 的规则(对比度、字号、点击目标、每个宽度下都可用的导航)。结果 在右侧面板里是可交互的:悬停、点进去、拖动宽度。

steer 一次

不喜欢某个标题?在预览里 ⌥-click 它,写一行——"收紧一点,最多 两行"——然后发送。评论会以 pin 的形式落下,agent 能读到,下一轮 就精准修到那一处。改动方向更大时,就在 composer 里写一段后续追加。

Tip: 引导做什么,而不是怎么做。"首屏上方留出更多空间"胜过 "加个 margin-top: 4rem"——design kit 会把你的方向翻译成整个项目 统一使用的 token。

从 brief 到构建、门禁再到实时预览,走完全程。

更进一步:一个移动应用,经 MCP 重新设计

同一个循环可以扩展到更大的产物。这里一个 Mobile app 项目构建了一个 习惯追踪应用——Today 圆环、连续打卡、统计页面——采用原生 SwiftUI 风格,然后一个 MCP client(Cursor)从应用外部驱动下一轮:一次 重设计,换掉强调色、加粗圆环并加上每周图表。

Mobile 模板上的移动应用项目

外部轮次和其他轮次一样落下——气泡上带着 via MCP · Cursor 标签, run 在 transcript 里实时进行,门禁在结束时报告。工作室从不停顿, 客户端只是使用它真实的 API。

经 MCP 派发的一轮——prompt 上的 "via MCP · Cursor" 标签
移动应用先建好,再由 MCP 客户端重新设计——完整过程。

MCP——从任何 agent 驱动工作室 介绍 server、访问面板以及客户端能调用什么。

相关阅读