让AI画出不像AI的界面！LobeHub官方UI Skill来了

做 AIGC 应用 UI，LobeHub 官方出手了

最近在调 AI 聊天界面，被”通用感”折磨得不行——模型输出的界面永远是等大卡片、紫蓝渐变、统一无衬线字体，平庸到让人想打人。本质问题不是模型能力不够，而是需求描述含糊时，它会默认收敛到训练数据里最常见、最稳妥的那类结果。

LobeHub 团队显然也意识到了这个痛点，于是把自家 UI 生态做成了可被 AI 理解和执行的 Skill——building-with-lobe-ui，直接开源在 GitHub 上，仓库星数 2.2k。

这个 Skill 解决的不是「画什么」，而是「怎么让 AI 画出来的界面不烂」。它把组件语义、视觉取值、工艺标准和验收机制全部显式化，让 AI 在生成的每一步都可控，而不是在最后靠一条 prompt 补救。

具体来说，它把工作流拆成四个最小运行模式：选组件（回答”这个信息该用哪个组件”）、取值（写出符合设计系统的 style.ts）、建界面（交付完整页面或组件）、审查（判断已有界面能否放行）。每个模式只读必要的参考文件，不用每次都全量读六份文档，效率拉满。

特别有意思的是它的六维验收标准——不只是”能不能跑”，还包括视觉层次、信息密度、交互状态是否完整、是否符合 lobe-ui 的设计语言。想靠 AI 生成真正有品质的 UI 界面，这个 Skill 几乎是目前最完整的解决方案之一。

目前支持 @lobehub/ui 全家桶（base-ui、chat、mobile、awesome、brand 等），以及 @lobehub/icons、@lobehub/charts、@lobehub/fluent-emoji、@lobehub/streamdown 等配套生态，覆盖 AIGC 应用的主流 UI 需求场景。

如果你是 AIGC 应用开发者，或者在用 LLM 做产品原型，这个 Skill 值得收藏——它本质上是把 LobeHub 团队做 UI 的方法论，翻译成了 AI 可执行的显式指令。

GitHub：https://github.com/lobehub/lobe-ui

GitHub: https://github.com/lobehub/lobe-ui