AI 写 Compose UI 总是对不上？让 Agent 直接看到渲染结果！

AI 写 Compose UI，改完看不清效果？试试这个

你有没有遇到过这种情况：让 Claude Code 帮你写 Jetpack Compose 代码，它哗哗产出一大堆，代码看起来挺像那么回事——结果一跑，布局全乱了，字号对不上，颜色也偏了。

问题不在 AI 代码能力不行，而在于它”看不见”自己写了什么。

Compose 官方预览要开 Android Studio，要跑 Gradle，要配模拟器。AI 每次改一行就想看效果？光启动环境就够烦了。所以大多数 AI 辅助写 UI 的流程就是：盲写 → 跑跑看 → 报错 → 再盲改 → 再跑……效率极低。

compose-ai-tools 干的事情很简单：让你在命令行里直接渲染 @Preview Composable，生成一张 PNG 图片。AI 代理改完代码，一个命令就能看到它实际写出来的界面长什么样。

核心能力：命令行渲染 Compose 预览

这个工具支持两条路：

• Jetpack Compose（Android）：通过 Robolectric 在 JVM 环境渲染，不需要真机或模拟器
• Compose Multiplatform Desktop：通过 ImageComposeScene 输出 PNG

安装只要一行命令：

curl -fsSL https://raw.githubusercontent.com/yschimke/skills/main/scripts/install.sh | bash

装完之后，在项目目录执行：

compose-preview render   # 把所有 @Preview 渲染成 PNG
compose-preview browse   # 打开组件浏览页面，汇总所有预览

不需要改项目任何配置，CLI 会自动在运行时把自身注入到 Gradle 构建里。

Agent 也能用——这才是精髓

单独用 CLI 看预览已经挺方便了，但它真正有价值的地方是：可以被 AI 编码代理调用。

安装脚本同时会放入一个 compose-preview Skill（SKILL.md 格式），Claude Code / Codex / Gemini 等 Agent 读取这个 Skill 后，就知道如何渲染、迭代、检验自己写的 UI 代码。

换句话说：AI 改完 Compose 布局，能自动调一个命令把你的预览渲染出来给你看——不是截图，而是一张可以在 CI 里存档、在 PR 里评论的正式图片。

VS Code 用户还有更懒的选项：装 Compose Preview 插件，直接在编辑器里内联看渲染结果，完全不用离开 IDE。

适合谁用

• 用 Claude Code / Codex 做 Android 开发的：每次改 UI 后让 AI 渲染预览，不用反复跑 Android Studio
• KMP（Compose Multiplatform）开发者：同一套代码要跑 Android/iOS/Desktop，命令行渲染是最高效的验证方式
• AI 工作流集成：在 PR 里自动附上 UI 预览图，reviewer 不用本地跑也能看效果

总结

compose-ai-tools 解决的是一个很具体但长期被忽视的问题：AI 写 UI 代码时缺乏即时视觉反馈。有了命令行渲染预览，AI 辅助写 Compose 的效率能提升一大截——不再是盲写-盲改的循环，而是”写-看-改”交替进行。

项目地址：https://github.com/yschimke/compose-ai-tools

GitHub: https://github.com/yschimke/compose-ai-tools