拆解一下最近的热门 AI 编程项目 SuperDesign郑州配资网。
本文可以解决以下问题：
为什么 AI 总是生成丑的那么统一的 UI
怎么解决这个问题
统一的丑
先看看什么叫“丑的统一”：
前两天 TailwindCSS 的创始人在 上发了帖子回应 GPT-5 也没解决“紫色问题”，破案了
Tailwind CSS是目前全球范围内最流行的前端样式框架，在 V1、V2 版本中，Adam Wathan 选择了靛蓝色作为默认背景颜色。
然后几乎所有的教程文章也都直接引用了这个默认配置，于是之后所有 AI 学习的编程知识（训练语料）也就都是这个，尤其是当你说“优化一下样式”时……
为了避免“丑的统一”，Same.dev、v0.dev、Z.ai 这几个专注用 AI 写网页的工具，在系统级提示词里都有明确要求，禁止使用indigo和blue……
最近拆 Superdesign 项目，开发者也做了相同的约束：superdesign avoids using indigo or blue colors unless specified in the user's request.
除此以外，Superdesign 还做了更多 UI 设计流程和约束上的优化，通过它生成的样式比直接让 AI 给你写的好了几个量级。
Superdesign-demo
除了禁止使用靛蓝色以外，Superdesign 还做了其他几个优化，接下来我们一起拆一拆。
SuperDesign拆解
Superdesign 是一个 VS Code 插件，安装后可以在编程 IED 里“指挥”AI 为你设计UI。它自带一个画布，可以实时预览 AI 生成的页面。
得到上面截图这个 UI，经过了 4 步，一共花了 $0.39(￥2.8)：
发送需求后，AI 先用线框图设计布局
然后设计配色主题方案
然后设计动画方案
最后生成网页预览
这四步是在 Superdesign 的系统提示词里明确要求的：
原始提示词
中文翻译
## Workflow
You should always follow workflow below unless user explicitly ask you to do something else:
1. Layout design
2. Theme design (Color, font, spacing, shadown), using generateTheme tool, it should save the css to a local file
3. Core Animation design
4. Generate a singlehtml file for the UI
5. You HAVE TO confirm with user step by step, don't do theme design until user sign off the layout design, same for all follownig steps
## 工作流程
你应该始终遵循以下工作流程，除非用户明确要求你做其他事情：
1. 布局设计
2. 主题设计（颜色、字体、间距、阴影），使用 generateTheme 工具，它应将 css 保存到本地文件
3. 核心动画设计
4. 为 UI 生成一个单一的 html 文件
5. 你必须与用户逐步确认，在用户确认布局设计之前不要进行主题设计，后续所有步骤同样如此。
设计约束
Superdesign 的系统提示词中，除了禁止使用靛蓝色外，还有多处设计方面的约束，非常细节。
可以摘录放在自己的常用提示词库里，Vibe coding 时拿出来放在提示词里
比如在## Styling中给出了内行人看着很常规，但非专业人士可能不知道的要求：
使用 flowbite 库作为基础，必须生成响应式设计，必须使用 Google 字体，确保背景与页面元素搭配，绝不应使用一些 bootstrap 风格的蓝色，那些都是糟糕的颜色选择。
关于图标、图片和脚本引入，也给了详细的约束：
图片占位符，必须使用真实的 URL，不要伪造； 只使用 lucid icons 库 约定了 Tailwind css 等三方库必须使用
粤有钱提示：文章来自网络，不代表本站观点。
相关文章
沪深京指数
热点资讯
