以下是翻译成简体中文后的内容：
Codex + 一个秘密工具就是我们在我们机构一直使用的设计工作流……而且输出结果真的在另一个层次上。
我已经说了好几个月了。如果你的应用看起来像 AI 垃圾，那不是 Codex 的问题。那是工作流的问题。
大多数开发者都陷入了同样的循环。他们用 AI 开发功能。后端能用了。逻辑很扎实。但界面看起来和其他所有 vibecode 应用一样。用户在两秒钟内就能判断它是否看起来真实。
旧的解决方法是雇一个设计师。等几周 Figma 文件。然后看着你的开发者去解释那些设计，并在代码里重新实现。等设计上线时，你已经失去了动力，并且烧掉了本不必烧的钱。
整个流程现在已经是可选的。
这次演示我构建了 Haven，一个房地产移动应用概念。20 分钟内完成完整的设计系统。每个屏幕在一小时内设计完毕。通过 Codex 输出生产代码，无需重写一行 CSS。
这就是我现在正在运行的工作流。而且每个用 AI 开发产品的开发者都需要理解它是如何工作的。
Moonchild 到底是什么
秘密工具就是 Moonchild。
过去一年我测试了几乎所有发布的 AI 设计工具。大多数在第一屏看起来还不错，但当你构建第二个页面时就开始崩溃。一致性是问题所在。Moonchild 以一种其他工具没有做到的方式解决了这个问题。
它是一个从你的设计系统开始的聊天式设计画板。不是从空白提示开始。不是从截图开始。而是从你实际的设计系统开始。你可以通过三种方式引入你的系统：
→ 从 Figma、GitHub 或在线 URL 导入
→ 向它的 Agentic Design System Builder 描述你的品牌
→ 从 Dribbble 或其他地方放入设计灵感
一旦系统就绪，你就不会再用老方式去提示设计。你粘贴一份 PRD。它会根据你的系统生成完整的屏幕。然后你从那里进行艺术指导。
输出路径是闭环的关键。Moonchild 提供了一个 MCP 连接器，将你的设计作为结构化输出直接发送给 Codex。不是让 Codex 去解释的截图。而是实际的设计数据。组件、令牌、布局，所有内容。
这就是工作流。现在来看看如何实际使用它。
大多数开发者使用 AI 进行设计时的问题所在
以下是大多数开发者的做法。
他们提示 Codex 构建一个新功能。它输出了。看起来还行。然后他们提示下一个功能。看起来略有不同。到第五个功能时，应用看起来像五个不同的产品拼凑在一起。
这就是人们说 AI 设计不好的意思。
问题不在模型。问题在工作流。
Codex 不知道你的设计语言是什么。每次提示都是一个全新的上下文。每个屏幕都是一次猜测。每个组件都和上一个有偏差。颜色偏移。字体偏移。一切都累积。
解决方法是简单的。给 Codex 一个系统去遵循。然后给它实际的设计去构建。
大多数工作流只给了其中一个。Moonchild 加上 MCP 连接同时给了两者。
第一步：先构建你的设计系统。永远如此。
这是每个人都跳过的一步。但也是最重要的一步。
在 @ignytlabs，我们在接触任何屏幕之前为每个客户构建一个设计系统。过去这需要设计师两天时间。Moonchild 大约 20 分钟就能完成。
这次演示我构建了 Haven，一个房地产移动应用概念。有几种方法可以将设计系统导入 Moonchild。你可以从 Figma、GitHub 或在线 URL 导入。你可以向 Agentic Design System Builder 描述你的品牌。对于 Haven，我做了我从一个 vibe 开始时常做的事情。从 Dribbble 获取设计灵感。我放入了三张移动房地产应用的截图，这些截图完美地抓住了我想要的氛围，以及一段关于 Haven 是什么以及为谁设计的简短描述。该工具提取了设计语言，并从零构建了系统。
让我惊讶的是一切都是可预览的。大多数 AI 工具，包括我在上一篇文章中写到的 Google Stitch 工作流，都只给你一个平面的令牌文件。颜色。字体。可能还有间距。但这个工具不同。它构建了一个完整的组件库和一个图库。每个标签、按钮、卡片和芯片都以它们在实际应用中的呈现方式渲染。点击任何组件，你都会看到它的实时效果，并带有测试变体和尺寸的控制。预览正下方是该组件的实际 JavaScript、CSS、示例和依赖项。准备好拉入代码库。
图库是真正改变你设计方式的部分。你不必猜测 "品牌标签" 或 "评分标签" 在上下文中应该是什么样子，你可以并排看到它们全部。在售。出租。精选。整个系列一目了然。在生成任何屏幕之前，你就可以做出明智的设计决策。
这就是样式表和真实系统之间的区别。
第二步：从 PRD 到 UI
一旦你的设计系统就绪，你就不会再用老方式去提示设计了。
你粘贴一份 PRD。
一页的功能简报。一个产品规格。一个目标陈述。随便你有什么。
对于 Haven，我粘贴了一份结构化的 PRD，包含产品介绍、目标、目标用户和角色、关键功能和 MVP 范围、完整的用户旅程、技术栈以及设计方向。大约一页。具体到足以给工具提供真实上下文。结构化到足以将正确的细节拉到正确的屏幕中。
然后我做了一件大多数人会跳过的事。
在生成任何屏幕之前，我先和它进行了头脑风暴。
这是大多数开发者错过的关键。聊天模式包含完整的 PRD 上下文。你不只是倾倒 PRD 然后点击生成，而是先讨论产品。确认屏幕列表。锁定导航模式。在任何像素存在之前预先定义关键屏幕的层次结构。
对于 Haven，我问了：
→ "基于这个 PRD，你建议我们先构建哪些屏幕？对于房地产应用，我还漏掉了什么吗？"
→ "主导航应该是带有 Home、Search、Favorites、Profile 的底部标签栏吗？还是别的什么？"
→ "在生成之前，帮我梳理一下 Property Detail 屏幕的优先级顺序。先放图片，然后是名称和价格，然后是规格，然后是配套设施，然后是经纪人。确认或改进。"
→ "好的，现在请继续生成这些屏幕，同时提供亮色和暗色模式，并坚持我当前附加的设计系统。确保完成整个用户旅程并创建所有屏幕。"
当我点击生成时，该工具对产品的了解已经超过了大多数设计师在第一次客户电话后的了解。
现在快速说明一下变体。仔细阅读。
一个很酷的功能：你可以为屏幕创建不同的变体。你只需要明确告诉 Moonchild，它就会处理。对于 Haven，我想要三种不同的美学方向，然后才确定一个。这是我使用的确切提示：
"我希望你为 Haven 生成 3 个完整的移动 UI 设计概念：
概念 1 - 温暖编辑风：奶油色背景、宽敞间距、房产名称使用衬线标题、柔和阴影、杂志风格图片处理。
概念 2 - 大胆现代风：暗色模式、高对比度、全无衬线、锐利边角、照片主导、边缘到边缘图片。
概念 3 - 高级极简风：中性色调（米白色、炭灰色、单一强调色）、精致字体、大量呼吸空间、微妙微互动。
以连接的设计系统为基础，但让每个概念将系统拉向不同的美学方向。生成完整屏幕，不仅仅是片段。你会怎么做？"
注意结尾的"你会怎么做？"。这是让这招奏效的小细节。工具不是盲目生成所有内容，而是先回来告诉你一个计划。
它说它会先为每个概念构建 5 个代表性屏幕。我会并排查看三个方向。一旦我选定了想要的那个，它就会去设计整个应用朝那个方向走。
这完全改变了成本等式。你不是在为三个完整的构建付费。你是在为三个快速样本付费，然后为你实际选择的方向进行一次完整构建。
我选了温暖编辑风。接着返回了完整的屏幕集。
接下来是真正让我惊讶的部分。
Moonchild 生成的每个屏幕在预览模式下都是可交互的。不是静态的模型。是真正可交互的。
你可以点击输入字段。点击按钮。像真实用户测试原型一样在屏幕之间移动，无需写任何代码。对于 Haven，我在预览中发现了两个流程问题，否则它们会直接发送到 Codex。属性详情屏幕没有明显的返回浏览方式。联系经纪人 CTA 太靠下。如果我没有先点击通过就把设计交给 Codex，这两个问题都会发布出去。
这就是关键。在写任何代码之前先测试产品。
完善循环是最后一部分。
当一个屏幕需要修改时，你不需要从头重新提示。你选择该屏幕，告诉工具要改什么，它就会在原地生成 v2。想要更电影化的英雄区？v2。想要把卡片布局换成列表视图？v3。变体会堆叠起来，这样你可以比较并选出最强的。
对于 Haven 的属性详情屏幕，我经历了三次迭代。v1 的经纪人区块位置太高。v2 修复了层次结构但图片库太小。v3 两者都做好了。大约 8 分钟的来回调整。
你不是在空白画布上策展。你是在完善一个真实的方向。这部分感觉最像与高级设计师合作。
第三步：通过 MCP 将 Moonchild 连接到 Codex
这就是工作流变得厉害的地方。
设计系统给 Codex 提供了规则。MCP 连接给了 Codex 更强大的东西。直接访问实际的设计输出。不是截图。不是设计的文本描述。而是 Codex 可以读取和重建的结构化设计数据。
设置方法如下：
→ 进入 Moonchild 设置，然后 MCP
→ 复制适用于你设置的安装命令
→ 打开 Codex CLI
→ 粘贴安装命令
→ 用你的 Moonchild 账户进行身份验证
→ 完成
连接后，Codex 会同时看到你的设计系统和已设计的特定 Haven 屏幕。
第四步：Codex 输出代码
现在像这样提示 Codex：
使用 Moonchild MCP 获取 Haven 房地产移动应用项目，并告诉我里面有哪些屏幕。
这个第一个提示完成两项工作。它确认 MCP 已正确连接。并让 Codex 完全了解你设计的每个屏幕。
在让 Codex 做更重的工作之前，有一个小提示。保持计划模式。Codex 在执行之前会展示它要做什么。每次都阅读计划。确保它理解你想要哪些屏幕、按什么顺序以及什么精细度。这就是 Codex 编写你实际需要的代码和 Codex 编写它认为你需要的代码之间的区别。
一旦你审查了计划并将其指向你想要的屏幕，Codex 会直接从 Moonchild 拉取设计数据，引用你的设计系统，并编写代码。它甚至添加了悬停状态、过渡和边界情况处理，因为它使用的是真实的设计数据而不是从提示中猜测。
结果。生产级 UI 进入你的实际代码库，与设计完全匹配，只需几分钟。
在 @ignytlabs，我们过去为每个客户 MVP 的设计预算两周时间。设计师构建 Figma 文件。开发者解释它。解释会有偏差。我们修正。循环。使用这个工作流，整个循环压缩成一个下午的工作。相同的质量。更高的利润。少得多的上下文切换。
何时使用这个工作流
这不是适合每个团队的工作流。诚实地评估何时适用。
在以下情况使用：
→ 你作为个人开发者或小团队发布 MVP
→ 设计一致性在屏幕之间不断被破坏
→ 你不想维护单独的 Figma 到设计师到开发者的管道
→ 你已经有一个设计系统，并希望它在所有地方被强制执行
在以下情况跳过：
→ 你规模较大，拥有完整的内部设计团队和成熟的 Figma 库
→ 你需要像素完美的交接用于营销网站或品牌工作，每个阴影都很重要
→ 你的代码库有高度自定义的 UI 模式，需要定制设计工作
对于 80% 发布 MVP 和 SaaS 产品的开发者来说，这个工作流覆盖了你所需的一切。
需要注意什么
在你运行之前，有几个诚实的提示。
你的设计系统质量决定了你的输出质量。垃圾进，垃圾出。一个只有三个颜色令牌的半成品 Figma 文件会产生平庸的屏幕。在系统上花时间。它在每个屏幕上都会回报你。
PRD 质量很重要。模糊的简报会得到通用的屏幕。带有用户流程、边界情况和清晰层次结构的具体 PRD 会得到有用的设计。这不是工具限制。这是思维限制。
你仍然需要品味。工具产生。你指导。选择正确的变体并完善它是你的判断力所在。如果你跳过了策展步骤，你就回到了 vibe 设计。
某些组件需要手动调整。复杂的动画状态、自定义交互模式、任何超出设计系统的东西都需要在 Codex 中手动过一遍。MCP 能让你达到 90%。最后 10% 是你的品味。
这实际上意味着什么
这是我的诚实看法。
用 AI 构建产品的瓶颈从来不是代码。AI 可以写代码。瓶颈一直是设计层。一致性、品味、将所有东西联系在一起的设计系统。
那个瓶颈刚刚崩溃了。
在我们的机构，我们过去为每个客户 MVP 的设计预算两周时间。雇设计师。等 Figma 文件。看开发者解释它。循环。过去需要两周的时间现在只需要两天。相同的质量。更快的交付。更高的利润。
这就是资金充足的团队通过他们的 Figma 加设计师加开发者管道已经拥有的工作流。不同之处在于，现在个人开发者、独立机构和小型工作室无需增加人手就能获得同样的杠杆。
2026 年对于先搞明白这一点的机构和开发者来说将是极不公平的。
TLDR
→ 别再因为糟糕的 UI 而责怪 Codex 了。Codex 不是问题。你的工作流才是。
→ 第一步：在 Moonchild 内构建你的设计系统。从 Figma、GitHub 或在线 URL 导入。或者描述你的品牌。或者像我为 Haven 做的那样放入 Dribbble 灵感。
→ 第二步：粘贴你的 PRD。在生成之前先在聊天模式下进行头脑风暴。先锁定屏幕列表和导航模式。
→ 默认生成一个变体。对于英雄屏幕，明确要求多个变体并指定不同的氛围。
→ 在写任何代码之前使用交互式预览测试流程。通过 v2、v3 迭代在适当位置完善屏幕。
→ 第三步：通过 MCP 将 Moonchild 连接到 Codex。这给 Codex 提供真实的设计数据，而不是截图。
→ 第四步：提示 Codex 使用 MCP 构建每个屏幕。几分钟内获得生产级 UI。
→ 你的设计系统质量决定你的输出质量。在那上面投资。
→ Figma 到交接再到开发者的循环已经死了。现在一个工作流同时运行设计和代码。
来干吧。
