为什么claude code 写前端页面很喜欢用紫色

AI工具导航站
同名“AI工具导航站”，跟上时代的脚步
16 人赞同了该回答
原因是Tailwind CSS
不知道你发现没有，当你兴致冲冲打开 Claude Code，敲下一行“帮我写个酷炫的落地页”时。
它吐出来的页面大概率长这样：Inter 字体、白底、再加上一个标志性的紫色/靛蓝色渐变按钮。
这种感觉，就像是 AI 圈的一场“视觉通货膨胀”。
很多开发者直呼：这股浓浓的 “AI 味儿” 真的看吐了！
为什么 Claude 写前端总是跟紫色过不去？这背后其实藏着一个长达五年的“视觉阴谋”和 AI 的求稳心态。
这一切的起源，要追溯到 2025 年 Tailwind CSS 联合创始人 Adam Wathan 发出的一条“道歉”推文。
五年前，Tailwind UI 在创建组件库时，为了展现框架的威力，随手选了 bg-indigo-500（一种中深靛蓝色）作为按钮和链接的默认演示色。
谁也没想到，这个无心的审美选择，竟然成了 AI 的“教科书”
• 训练数据的重灾区： 互联网上充斥着使用 Tailwind CSS 的代码仓库、技术博客和教程。
• 统计学规律： 当 Claude 在海量数据中学习如何写一个“按钮”时，它发现“按钮”和紫色/靛蓝色的关联度高得离谱。
• AI 不懂美，只懂“稳”： 对 AI 来说，用最常见的颜色最不容易出错，于是它固执地认为：现代化网站 = 蓝紫色渐变。
除了那抹挥之不去的紫色，典型的 AI 生成页面还有几大“硬伤”：
• 布局死板： 万年不变的“Hero 标题 + 下面三个功能卡片”布局。
• 字体单一： 默认全是 Inter 或 Roboto 字体。
• Emoji 泛滥： 喜欢用各种图标表情充当功能说明。
• 文案空洞： 满篇都是“提升生产力”、“卓越用户体验”这种听起来很厉害但啥也没说的废话。
如果你想让 Claude 写出的页面不再像“快餐模板”，这里有几个实战锦囊：
• 强制偏离“舒适区”： 要作为指挥官下达强约束。比如：“使用深灰色背景、不对称布局、禁止使用紫色/靛蓝色渐变”。
• 引入“外援”参考： 给 AI 投喂一张你喜欢的真实网站截图，或者让它去读取 Dribbble、Mobbin 上的优秀设计，让它“照猫画虎”而不是“凭空想象”。
• 利用 Agent Skills（技能包）： 现在有很多成熟的技能包（如 frontend-design 或 UI UX Pro Max），它们内置了反通用设计模式，能强迫 AI 在写代码前先进行审美思考，甚至可以一键切换“粗野主义”、“玻璃拟态”或“赛博朋克”等 11 种风格。
• 建立项目规则文件（AGENTS.md）： 把你的审美偏好（比如：必须使用 Iconify 图标库、禁止线性动画）写进项目的规则文件里，这样 AI 每次对话都会自动遵守你的设计规范。
如果你还不会使用Claude code，可以看我之前写的文章，一共有三种方法，应该可以让你愉快使用Claude code。

补一种更省心的：国内用户嫌注册和海外支付麻烦，可以用 Code80，它把真实订阅帐号转成 Claude API，和官方接口一致，换个 endpoint 就能用，支持国内付款，地址 code.ai80.vip。

相关阅读：
【无需魔法】Claude Code 2026最新国内中转站，保姆级安装教程
4 赞同 · 11 评论 文章
发布于 2026-01-30 16:27・广东
赞同 16​
9
喜欢
收起​