为什么AI生成的页面总是紫色，一眼AI，如何解决？

Question

为什么AI生成的页面总是紫色，一眼AI，我的提示词来自网络，参考“站在产品经理和设计师的角度，使用HTML设计一个番茄工作法iOS应用原型图。注意，你需要在一个页面上创建所有必要的界面原型，设计应精美、完整，包含所有状态和交互细节，可使用开源图标库丰富视觉元素。并能直接供开发团队参考实现。”，如何进行调整，并二开该项目。

Answer 1

因为……

所以可以按照你自己的想法告诉AI来调整为其他的配色。

---

如果知道自己的审美不太行，之前在社区里面收藏的一个别人的风格分享，可以试试看。

• Design Prompts - AI-Powered Design Style Explorer

以及楼上提到的 SKILL 方式：

• claude-code/plugins/frontend-design/skills/frontend-design/SKILL.md at main · anthropics/claude-code

Answer 2

定义Agent SKills ，按照你想要的去生成

https://github.com/anthropics/skills

Answer 3

我的提示词一般是类似这样的：

使用Tailwind CSS和Ansome Fonts，创建一个现代化风格的UI界面，颜色搭配请使用我指定的色系或相近的色彩，确保构建出来的网页层次分明，界面美观

其中现代化一般就是指扁平化的设计风格，同样的还有拟物风格、拟态风格、NoStyle极简风格、手绘风格……建议参考这篇文章知乎-深度解析 9 大 UI 设计风格
顺带一提布局也有一些门道，参考这篇文章知乎-6种经典的网页布局设计，你最喜欢哪个？
色彩搭配这方面，我推荐中国色官网，还有很多色彩搭配网站可以参考借鉴
字体方面，不建议使用谷歌的字体CDN，连接慢，可以用中文网字计划或者字体自由，连接速度快

---

总得来说，不建议提示词太宽泛，严谨一些，才好让AI理解需求，直接规定好想要的样式、布局和字体，得到的UI效果肯定比让AI自己生成的质量要好一些
当然，也可以尝试着摆脱一些前端框架和CDN，让AI直接采用传统前端三件套和本地字体，这样自定义效果能更精确，也避免了CDN可能会连接慢，但是用框架开发一半来说代码更好维护

Answer 4

最好是直接告诉Ai你要的页面风格，以及配色情况，我就一般告诉AiPy给我生成一个网站，页面配色要高压简洁，主要以黑白灰三色为底色，其他来点少量多巴胺配色，就会得到