不写代码也不画图，先把风格参考铺成一面墙、逐张打星，再把审美规矩聊成一份能被机器读懂的 md，最后让 AI 照着画布写代码。一个能摇签的黄历 App，就在这五步里跑起来了。

脑子里冒出个想法，路径通常是：找开发 → 报价 → 排期 → 放弃。多数想法不是死在“做不出来”，是死在还没开始。

这次我换了个做法：不写代码，也不自己画图。先在参考库里把想要的风格挑出来，再在一个固定的 Ardot 文件里用聊天把设计定下来，最后让 AI 照着这份画布把代码写出来。

这条路叫 D2C（Design to Code）。要回答的不是“能不能生成代码”，而是“画布上的这份设计，能不能不失真地变成代码”。

我拿它验证的，是一个黄历 App——「好日子」。

先说说以前为什么做不出来：

• 门槛太高。不会写代码，就没法把手里的想法变成能点、能滑、能给别人看的东西。外包有报价、排期、来回沟通，多数想法撑不过这一关。
• 让 AI 直接生成，快但改不动。同一个页面出现两种圆角、三套绿色；想改一个间距，它把整块重生成一遍，改完别处又变了。
• 说不清楚，AI 只能猜。“高级一点”“再紧凑些”——这些感觉词，AI 理解的高级和你心里的高级，可能差着十万八千里。

问题的共同点：缺一份确定的、能被机器读到的设计事实源。不是缺工具，是缺一个“以谁为准”的答案。

五步流程

前四步都不用画图——你是在找、在说，不是在画。只有最后一步要动手。

01 先做调研，在 Ardot 里建一个参考库

拿到想法的第一反应，多半是马上开工。我做的第一件事是反过来的：先找参考。

因为脑子里那个“我想要好看一点”，是模糊的。模糊的标准没法执行，也没法验收。找参考这一步，就是把模糊的审美换成一组具体的、可以指着看的图。

我在 Ardot 里单开了一个页面叫「风格参考」，照 App 的结构分：底部导航、整体风格、主页-今日、择日、运势、我的。每一行下面再拆到元件：数值卡、指标栏、内容卡片、日历、结果卡。

铺完，我的任务只有一件事：选。选中的就在旁边标一颗星。

打星这一步，决定了后面你有没有资格说“不对”。没有这一列图，你判断 AI 的产出只能靠感觉，说出口的只有“不好看”；有了这一列图，你能指着说“不像这张”。

这一步花的时间不多，但决定了后面所有环节的上限。

02 新建一个固定的项目文件，把链接交给 WorkBuddy

最要紧的诀窍：从头到尾只用一个 Ardot 文件。参考库放哪儿都行，但项目本身只用一个文件。因为 AI 读的就是这个文件——文件只有一个，它读到的就不会有两个版本。

动作很简单：在网页 Ardot 里复制这个文件的链接，打开 WorkBuddy 切到「设计创意」模式，把链接粘进去，告诉它你要在这个文件里做。

背后把两者连起来的是 MCP。

03 在 WorkBuddy 里把规矩和布局聊出来，落成 md

接上之后，我没有开始画界面——我是开始用自然语言对话。

先把 App 是什么聊清楚：四个 Tab、每个 Tab 里有什么。再聊调性：新中式、轻量、不要大面积色块。最后聊规矩：朱红做主色、金色只做点缀、正文一律用墨色、间距定四档。

布局也是聊出来的：四个 Tab 各分几块、月历怎么排、指标柱放哪儿、哪个元素压在哪个上面。

聊得差不多了，WorkBuddy 会整理成一份 md 文档。为什么要落成 md？因为聊天记录是过程，md 是结论。后面每一次生成，都从这份 md 出发，而不是从几百条记录里往回翻。

这里有个关键动作：我把参考库里打星的图连同需求一起丢给它，让它先照着参考把方向定下来。然后让它把参考图里的规律用文字复述出来，写进 md。

为什么多这一道“翻译”？因为图给不了它长期记忆。这一轮把图发给它，下一轮开个新对话，它就不记得了。而 md 留在文件里，谁读、什么时候读，都不会变。

主视觉 Hero 就是这样出来的。红色剪纸、圆月、桂花、月饼、玉兔，外面套一圈窗棂边框。

这张图，我没有画过一笔。

04 把这份 md 在 Ardot 里变成画板

拿着 md 回到 WorkBuddy，让它在这个 Ardot 文件里把画板一块块铺出来。

第一块是「设计系统」。色彩六个色板，每个都带语义名：朱红 Primary、金 Gold、墨 Ink、次文 Sub、线 Line、底 BG。为什么不直接写色值？因为名字才是接口。语义名决定了 AI 知不知道什么时候该用——Primary 只能出现在标题和关键按钮上，正文一律用 Ink。这是规矩，不是偏好。

字体三套，用真实文案展示。间距四档：8/12/16/24。组件四类基础组件，中英双语语义名，成对命名：l-运势值卡+ ex-运势值卡。ex-开头会告诉 AI：这是一个已经定型的、可复用的东西。

然后是页面画板。所有画板统一 390 宽，命名带宽度：今日门户390、Tab2择日390。排布一行一行铺开，一眼看到全貌。

生成时有一条规矩：一次只做一个屏，验证通过再推进下一个。贪多必返工。

05 AI 铺不了的那部分，自己上手画

常规页面铺开后，还剩一类东西：异形的小弹窗。运势签抽取结果弹层这类东西，形状特殊、只有一处会用到，AI 生成的版本总差着点意思，只能在画布里自己搭。

动手之前有个默认状态得说清楚：WorkBuddy 铺出来的界面，容器基本都开着自动布局。自动布局的逻辑是“子元素的位置由父级和兄弟决定”，好处是结构跟着内容走，副作用是——你想手动把某个元素挪到某个绝对位置，它会被拽回去。

所以手动微调前先看这个容器开没开自动布局。要自由摆放就先取消，要让内容自己排就加上（Shift + A）。该开还是该拆，只看一件事：这个位置，你想让内容决定，还是自己决定。

写一段提示词来回要好几分钟，在画布里拖一下几秒钟。小颗粒度的调整，设计工具天然比自然语言快。

到这里，设计这一侧就收工了。接下来的问题是——怎么让 AI 把这份画布原样变成 Demo。

用 MCP 打通 AI 工具链

MCP 是一套让 AI Agent 直接读写外部工具的协议。Ardot 支持它，意味着画布能被 AI 当作数据源来读——图层、坐标、字号、颜色、文本，全都是可读的字段，而不是一张需要猜的截图。

Ardot MCP 有两种形态，可以同时挂上：

• 云端 MCP：不依赖客户端开不开，换设备都能接着做。长期迭代走云端。
• 本地 MCP：适合在自己机器上反复读写、来回校准。短时间高密度走本地。

配置就是加一段 JSON，在 WorkBuddy 的「连接器」里配好就行。配完之后，CodeBuddy、Cursor、Claude Code 也都是加一段 MCP 配置的事。

接上之后，我把 19 个节点一次性交给它。它做的事不是“截个图看着猜”，是读数据：读图层结构和真实属性，拿视觉截图做校验，把画布里的视觉素材导出来直接用。

产出是一个 HTML 文件，扫码就能在手机上打开，切到运势那一页，可以摇一次签。

PC端链接：https://bb74a58df7014c8da3cfc0d32a10792a.App.WorkBuddy.link

几条经验

规矩要留在画布上，不要留在对话里。“卡片内边距16、卡片间距12”写在提示词里，下一轮就忘了；定成画布上的设计系统画板，每一轮读到的都是同一份。同一个问题说到第三次还发生，就该停下来改规矩，而不是再说一遍。

用精准定位代替口头描述。有些状态只出现在特定情况下，很难说清楚。“日期数字不对”“浮窗出现时机不对”，AI 很难判断具体是哪个元素。直接把设计稿里对应的 frame 或元素链接丢给它，让它照着目标状态还原——指到哪就改到哪。

先找够参考，先把话说清楚。标准得先有，才能验收。参考库那一步花的时间最少，但决定了后面每一次“不对味”有没有得比。规矩没定就让 AI 开工，它会给你十个版本；规矩定完再开工，第一版就已经八九不离十。

AI 负责生成，人负责判断。它一口气出八个屏，哪个留、哪个推倒，得我说了算；它说“做完了”，是不是真做完了，得并排比过才知道。代码我一行没碰，但判断它做得对不对，我一下都没省。还原度的下限，由规范的颗粒度决定——一份粗糙的设计稿，再聪明的转码也救不回来。

回到最初那个问题：普通人能自己做一个 App 吗？

能。但前提是你先看清想要什么，再说清楚想要什么。工具会把“做”的门槛一降再降，门槛降得越低，站在门槛这边的人，就越需要知道自己想要什么、能分辨什么是好的。

执行变得便宜，判断变得昂贵。