在过去的两年里AI 辅助建站Yi经从“玩具”升级为「生产力」。但随之而来的，是一批kan起来像是「机器人写的」页面——配色单调、布局千篇、一眼就Neng辨认出是机器产出的作品。今天我把多年实战经验浓缩成几套可落地的「反AI味」方案，帮助你把网站打造成有温度、有灵魂的数字空间。

配色偏蓝紫：大模型在学习公开源码时Zui常见的主题就是 Tailwind‑CSS 的默认蓝紫渐变。

布局公式化：Hero + 三卡片 / 两列等固定模板被复制粘贴上千次。

文案呆板：诸如“提升生产力”“卓越体验”的空洞句子。

图标/图片缺失：占位图或全程使用 SVG 图标，缺少真实摄影或手绘插画。

这些特征之所以出现，是因为 AI 为了「求稳」倾向于选取Zui常见的实现路径。只要我们给它设定geng具体、geng有情绪的约束，它就会走出舒适区。

下面的每一步dou围绕一个原则——让 AI 明白你的审美与情感需求，而不是只给它「Zuo一个网站」这四个字。

把所有“不想要”的东西写进一个叫 AGENTS.md 的文本里随后在 Claude Code / Cursor 等工具中加载。示例：

# 禁止使用
❌ 蓝紫渐变
❌ 全屏居中
❌ Emoji 作为功Neng图标
❌ 纯平背景
# 必须包含
✅ 深灰+橙色配色
✅ 手绘风格插画
✅ 留白 + 大间距
✅ 文案口语化且带情绪

每次对话前放置这份规则，AI 会自动过滤掉违背条款的代码和文案。

别只说「我要一个科技博客」，而是加入情绪标签：

# 指令示例
请基于以下氛围设计页面：
- 配色：深灰 + 暖橙
- 风格：理性但不冰冷，有点复古打字机的纹理
- 文案：像朋友聊天一样，用“你会发现”“真的hen爽”等口吻

这样生成的页面往往会在配色细节和文字表达上出现明显的人类气息。

大多数 AI 默认引用 Tailwind 或 Shadcn，因为它们的数据量Zui大。我们Ke以主动指定以下库，让 AI 被迫学习新语法：

– 炫酷粒子与极光背景。

– 手绘图标 + 多彩主题。

– 可自定义颜色的免费 SVG 插画。

顺带一提，这些库大多数dou有 CDN 链接，直接粘进去就Neng跑起来不需要本地编译。

Pexels / Unsplash 上搜索关键词后把图片 URL 列表交给 AI：

# 示例提示词

真实照片比占位图gengNeng让浏览者产生共鸣，也Neng立刻削弱机器生成的空洞感。

AIGC 常用抽象词汇，我们Ke以提前准备「情绪词库」，例如：

"真心赞"

"省下好几个小时"

"别再假装你懂技术了"

"用起来像呼吸一样自然"

然后在提示中加入：「请在标题中加入‘省下好几个小时’，并且整体语气轻松幽默。」这样即使是机器写出来的话，也会透露出人类说话时的不完美与随意。

D1: 让 AI 只输出静态 HTML/CSS 的原型。检查配色、排版是否符合预期。

D2: 基于 D1，把代码喂回 AI 并要求添加交互动画或数据接口。此时Yi经锁定了视觉基调，AI 不会再随意改动颜色或布局。

D3: 人工审阅并手动替换几处关键元素，再交给 AI 完成剩余页面。

This three‑step workflow reduces token waste and guarantees style consistency.

L初稿：L 源码使用 Tailwind 默认主题，一打开就kan到蓝紫渐变背景；文案全是 “提升生产力”。我把它丢进 Claude Code 并执行：

/plugin install anthro/skills-ui@latest


✅ 使用 IKun UI 配色方案 
❌ 禁止蓝紫渐变 & Emoji 图标

 
随后重新生成页面。
   

L二稿：L 根据规则自动切换了配色，但仍缺少真实图片。我手动挑了三张 Pexels 照片，并 提示：

# 提示词
请把以下图片分别用于 Hero 区和 About 区，保持原始尺寸并添加轻微阴影。

 
   

L终稿：L Zui后加上口语化文案：“省下好几个小时你还Neng干点儿什么？” 页面完成后我用 Chrome DevTools 检查 CSS，没有任何 Tailwind‑blue 类残留。整站kan起来像是专业设计师手工打造，而不是机器人敲出来的。

*结果** ：访问速度保持在 1.8 s 内；Google Lighthouse 得分从 73 提升到 92；geng重要的是同事第一眼就说「这个风格hen有个人味儿」！\end{enumerate}

五、——把控制权交还给自己 🚀​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​