Vibe Coding 生成网站去 AI 味完整实战指南：三步治理法-育师

Vibe Coding 生成网站去 AI 味完整实战指南：三步治理法

【免费下载链接】ai-guide程序员鱼皮的 AI 资源大全 + Vibe Coding 零基础教程，分享 OpenClaw 保姆级教程、大模型玩法（DeepSeek / GPT / Gemini / Claude / GLM）、最新 AI 资讯、Prompt 提示词大全、AI 知识百科（Agent Skills / RAG / MCP / A2A）、AI 编程教程（Harness Engineering）、AI 工具用法（Cursor / Claude Code / TRAE / Codex / Copilot）、AI 开发框架教程（Spring AI / LangChain）、AI 产品变现指南，帮你快速掌握 AI 技术，走在时代前沿。本项目为开源文档 aiguide，已升级为鱼皮 AI 导航网站项目地址: https://gitcode.com/GitHub_Trending/aig/ai-guide

同一句提示词「给本地精品咖啡店开发一个落地页」，丢给 AI 编程工具，你会得到两种完全不同的结果：

结果 A：蓝紫渐变大背景，首屏一个巨型标题，下面并排三张卡片，图标全是 emoji，通篇没有一张照片。你盯着它看了两秒，脑子里只剩一个念头——「这又是 AI 做的」。

结果 B：深咖色打底配奶油色文字，手绘风咖啡豆插画，一张真实的手冲照片斜切排布，文案写着「我们豆子下周一就到」。像人做的，而且像这家店做的。

差别不在工具，不在模型，全在你怎么提需求。

这篇文章是开源仓库 ai-guide（程序员鱼皮的 AI 资源大全 + Vibe Coding 零基础教程）经验技巧板块的一篇实战教程：带你走一遍「写码前备料、对话中下约束、交付前升级」三步流程，每一步都给你可直接照抄的提示词和命令，让 AI 产出的网站干净、专业、有辨识度。想顺藤摸瓜的，可以看仓库里的 Vibe Coding 经验技巧总览。

30 秒自查：你的网站中了几条「模板感」红线

交付之前，拿下面这张清单过一遍自己的页面。中 4 条以上，基本可以盖章「一眼 AI」：

主色是蓝紫渐变（#6366F1、#8B5CF6 这一挂的）
首屏结构 = 大标题 + 三张并排卡片
字体就是 Inter、Roboto 这类默认款，毫无个性
功能图标用 emoji 顶着
整页找不到一张真实图片
文案清一色「赋能」「极致体验」「高效协作」式空话

这六条基本就是 AI 产出的「标准长相」：配色、布局、字体在视觉层撞脸，图片、文案在内容层空洞。后面所有动作，都是冲着把这几条打钩逐个消掉去的。

找到病根：AI 为什么总交出「标准答案」

原因不复杂，一句话：AI 是个规避风险的学徒，它只会挑出现频率最高的安全答案。

训练语料里有海量基于 Tailwind 构建的现代网站，而 Tailwind 默认主色恰好是蓝紫色。AI 在几十亿行代码里统计出：蓝紫渐变 = 「现代化」的高频答案。于是你一句「做个现代化网站」，它为了不出错，就把这个最高频的答案端给你。同理可推出三卡片布局、Inter 字体、emoji 图标——全是它眼里「最不会挨骂」的默认项。

所以破局思路就一条：别让它自己猜，把选择空间收窄。你每多给一条明确的约束、一个具体的参照，它就少一次回退到默认项的机会。下面按干活的时间线，分三步说。

第一步：写码前备料——先给样本和物料，别先给愿望

让 AI 照着真实网站抄

AI 审美平庸，是因为你只给了它「感觉」两个字。换成给它一个具体参照物，立刻不一样。按省事程度从轻到重，四档操作：

直接读网页：Cursor、Claude Code 这类工具（或装了 Firecrawl MCP 的模型）能自己访问网页。直接下指令：
```
访问 xx 咖啡店官网，提取它的配色方案、字体组合 和布局结构，然后按同样的视觉语言搭建新网站。
```
适合：目标网站在线、AI 工具支持联网读取时。
丢网页截图：模型支持图片理解的话，截一张图配两句描述（「深色底、衬线标题、大量留白」），比纯文字描述精确得多。适合：AI 不能联网、但能看图时。
截图转代码：模型既不能联网又不擅长理解图，就上 Screenshot to Code 这类工具：把喜欢的网站截图丢进去，直接生成代码，再把这段代码喂给 AI 当底子改。抄样式不如抄代码直接。适合：兜底方案。
套开源模板：下载现成模板源码，让 AI 只换内容不动样式。免费模板库可以逛：HTML5 UP（极简响应式合集）、WordPress 官方主题库（上万个主题）、Start Bootstrap（Bootstrap 系模板）、Colorlib（免费且设计感不错）。适合：时间紧、要快速交付时。

先做静态 Demo，把风格定死再开工

大项目最容易翻车的点：一句「帮我做完整 SaaS 平台」，AI 哗啦生成几十个文件，做完发现风格全错，返工烧掉一堆 Token。

改成两段走：

先要一个纯静态前端 Demo，只验证视觉；
你对着 Demo 满意了，再让 AI 基于这份 Demo 代码，用同一套风格扩出完整项目。

关键纪律：第一版 Demo 如果糙了，禁止继续往下开发。方向错了，后面积累了越多代码，拆掉越疼。这也和对话工程技巧里「拆小步骤、逐步验证」的路数一致——每步可检查，你随时能掉头。

设计阶段想加速，还有几件趁手的：

Google Stitch：输入一段描述就能出界面原型，纸面草图拍照也能识别成设计稿，支持导出代码再交给 Cursor 之类的工具继续开发。
Figma + Figma MCP：在 Figma 里把页面画清楚，AI 直接读设计文件出码。
Onlook：主打设计师直接可视化编辑网页代码，设计和开发之间不断层。

告诉 AI 去哪找图，而不是让它凭空生图

AI 默认产出的页面没有真实图片，这是「内容空洞」的头号来源。别指望它从 0 生图，把图片来源点名给它就行，四个渠道各管一摊：

用途	来源	说明
插画	unDraw	免费 SVG 插画，颜色可自定义
图标	Iconify	20 多万个免费矢量图标
真实照片	Pexels	高质量免费图库，有 API 可搜
占位图	Picsum Photos	URL 直接指定尺寸，每次刷新都是不同照片

为本网站搜索并集成图片： 1. 插画：到 undraw.co 搜与内容相关的图 2. 图标：使用 Iconify 图标库 3. 真实照片：用 Pexels 搜索 4. 临时占位：用 Picsum Photos

适合：任何需要「内容充实感」的页面。真实照片带来的信息密度，是生成式网站最缺的那块拼图。

自己定死配色，别让 AI 抽卡

想彻底摆脱「蓝紫脸」，最硬的招是配色自己拍板。用Coolors（按空格键随机撞色，可导出多格式）或Adobe Color（Adobe 官方配色工具）生成一套色板，然后把色值原样交给 AI：

主色 #1F3A5F，辅色 #C9A227，背景 #F5F1E8。 全站只能从这组色板取色，禁止引入任何其他颜色。

适合：对品牌感有要求、或者就是看不惯 AI 默认色的人。色值一旦写死，AI 想跑偏都跑不了。

第二步：对话中下约束——把「不要什么」写清楚

先给 AI 立一份「设计禁止清单」

只说「要好看」，等于什么都没说。把最容易撞车的默认项逐条禁掉：

设计禁止清单： - 蓝紫渐变、纯平背景色 - Hero + 三卡片布局、完美居中对齐 - emoji 当功能图标 - ease-in-out 线性动画 - 「赋能」「极致」类空话文案

适合：所有项目，成本最低、见效最快的一步。禁完再跑一遍自查清单，红线条数会肉眼可见地掉。

给 AI 定一个「设计师」人设

角色设定能把 AI 从「标准答案模式」拨到「风格模式」：

你是一位资深独立设计师，反感千篇一律的 SaaS 模板， 追求每个像素都有温度和手感。 深灰 + 橙色是你的常用组合，大留白是你的呼吸感。

适合：需要强辨识度的品牌页、个人站。人设里带上具体口味（配色倾向、留白习惯），比抽象形容词管用。

把文案从「通稿」改成「人话」

AI 写文案的默认档是新闻通稿，必须手动降档。三条要求直接抄走：

文案规则： - 具体化：「每天省 2 小时重复劳动」，不说「提升效率」 - 口语化：「上手像呼吸一样自然」，不说「卓越体验」 - 带情绪：「再也不用在 10 个群里翻文件了」 - 每句不超过 15 个字

适合：落地页、产品页这类靠文案留人的页面。

语境注入：先喂情绪，再谈设计

AI 出通用设计，还因为它不知道你页面要传达什么「气氛」。解法是先给它一段带情绪的原文，再提设计参数：

先读这段话：《黑客与画家》——编程语言是用来思考的。 按这种冷静、理性的情绪设计首页： 深灰 + 冷蓝，布局理性有序，整体沉思感。

AI 会把视觉参数和文字的情绪对齐，产出带特定氛围的页面。适合：内容本身有调性的项目（博客、音乐页、书评站），比干巴巴罗列色值更能出「魂」。

把全部规则沉淀成 AGENTS.md

上面的技巧每次手打一遍不现实。把它们固化成项目根目录的AGENTS.md（Cursor、Claude Code、Windsurf 等主流工具都会自动读取），一次编写，长期复用：

# 项目设计规则 ## 角色 资深独立设计师，主打「反主流」网页美学 ## 禁止 - 蓝紫渐变、纯平背景、Tailwind 默认色板 - Hero + 三卡片、完美居中、等宽多栏 - emoji 图标、ease-in-out 动画 ## 必须 - 文案口语化，每句不超 15 字 - 图标 Iconify、照片 Pexels、 插画 unDraw、占位 Picsum

从第二个项目开始，你只需要写需求本身，风格底线由文件兜底。同一个「做个动漫视频网站」的需求，有没有这份文件，产出是两种东西。

第三步：交付前升级——技能包 + 小众组件库

安装官方 Frontend-design 技能

不想每次手写设计提示词，就在 AI 工具里装现成的技能包。以 Claude Code 为例，先加官方技能市场：

/plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills

装完直接说「开发一个开发者作品集网站」，AI 会主动提示要动用前端设计技能，确认后产出就是设计感路线，不再回退到蓝紫渐变。

装 UI UX Pro Max，让 AI 自己出设计方案

社区里最顺手的去 AI 味技能，支持 Claude Code、Cursor、VS Code、Codex 等。装两条命令的事：

npm install -g uipro-cli uipro init --ai cursor

（把--ai换成你实际用的工具。）之后让 AI 开发网站时，它的工作流是：先识别产品类型和页面类型 → 调search.py脚本在 data 目录做多维搜索 → 综合出主色、字体组合、间距规范的设计方案 → 再按方案出码。

背后是 Agent Skills 的通用机制：渐进式披露——AI 平时只扫技能的元数据，碰到相关任务才加载完整说明、按需取用资料，用到哪查哪，既省上下文又准。原理细节可以看仓库里的 Agent Skills：通用 AI 技能库。

换掉主流组件库，用「有脾气的」

AI 保险起见永远先选 Tailwind、Shadcn UI 这类大路货——这恰恰是模板感的另一半来源。反着来，指定有辨识度的库：

Aceternity UI：闪光粒子（Sparkles）、极光背景（Aurora Background）、流星（Meteors），全是 AI 很难从零手写的高计算量特效，几行引用就有。
Magic UI：150+ 动画组件，专攻微交互、流光边框、文字渐变。
DaisyUI：30+ 主题，cyberpunk、retro、cupcake 这类风格一键切换。
备选：ikun-ui（Svelte.js + UnoCSS）、Radix UI（无样式原语，自由度拉满）、Mantine（100+ 组件）。

有个坑必须提前堵：小众库文档更新快，AI 训练数据里见得少，容易按旧版 API 写出跑不起来的代码。两个补救手段——装Context7插件实时查最新文档，或直接把官方文档地址塞给 AI：

必须用 Aceternity UI 设计本站。 写码前先读官方文档确认最新 API。

适合：想要「这页面不可能是模板」的观感、且项目愿意引入额外依赖时。

实战对比：同一需求，朴素提示词 vs 组合提示词

光说不练假把式。三个场景，都跑了两遍，需求文本一字不改，只改「喂法」。

场景一：精品咖啡店官网

朴素版：「开发本地精品咖啡店官网」→ 蓝紫渐变 + 三卡片 + emoji，像某个 SaaS 的 demo 页。
组合版：AGENTS.md 规则 + UI UX Pro Max 技能 + 语境注入：
```
开发精品咖啡店官网 先读这段话找氛围：「第三空间」—— 家与工作之外的停留之处 配色只用 #3E2723 / #F5F1E8 / #C9A227
```
产出：深咖底色配奶油字，手绘咖啡豆插画，真实手冲照片斜切排版，文案直接写「下周一新豆到店」。同一个需求，气质差了一个档次。

场景二：开发者个人作品集

朴素版：「开发个人作品集首页」→ 大标题 + 三卡片标准像，和隔壁十个程序员站一个模子。
组合版：AGENTS.md 规则 + 官方 Frontend-design 技能 + Coolors 自定色板：
```
开发个人作品集首页 配色 #0F172A 底 + #38BDF8 点缀，禁止蓝紫 布局不对称，代码片段作为装饰元素
```
产出：深色底、代码雨式装饰、非对称栅格，一眼是「极客的手艺活」而不是「模板填充」。

场景三：猫咖移动端落地页

朴素版：「开发猫咖落地页（移动端）」→ 通用模板味，和咖啡店网站长得差不多。
组合版：AGENTS.md 规则 + UI UX Pro Max 技能 + 指定小众组件库：
```
开发猫咖落地页（移动端） 必须使用 ikun-ui 设计 写码前先读官方文档确认最新 API 照片用 Pexels 搜索真实猫咪照片
```
产出：暖黄色调、圆角卡片、真实猫咪照片占满视觉，看起来真能走进去坐坐。

规律很清楚：需求不动，喂法决定产出。规则文件管底线，技能管方案，组件库管细节，三层叠加，模板感基本绝迹。

收个尾：一份可以存下来的执行清单

把全文压成一句：AI 的品味不是问出来的，是你用样本和约束买回来的。它没有审美，只有概率；你把选择空间收得多窄，它就给你多窄范围内的最优解。

下次开干前，把这份清单存进备忘录，按顺序过：

选 1 个参考网站或模板，定死主色色板
先出静态 Demo，风格不满意禁止往下开发
点名图片来源：unDraw / Iconify / Pexels / Picsum
提示词里写「禁止清单」+ 设计师人设
有调性的项目加一段语境注入（先喂情绪）
全部规则沉淀为项目根目录的 AGENTS.md
装 Frontend-design 或 UI UX Pro Max 技能
要「不像 AI」的观感，指定 Aceternity UI / Magic UI / DaisyUI，并配 Context7 或官方文档地址
交付前，用开头的 30 秒自查清单再扫一遍

照做九步，你的网站就该从「一眼 AI」毕业到「看着像那么回事」了。更多配套技巧，仓库里 Vibe Coding 对话工程技巧可以继续往下挖。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Vibe Coding 生成网站去 AI 味完整实战指南：三步治理法