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 BootstrapBootstrap 系模板、Colorlib免费且设计感不错。适合时间紧、要快速交付时。先做静态 Demo把风格定死再开工大项目最容易翻车的点一句「帮我做完整 SaaS 平台」AI 哗啦生成几十个文件做完发现风格全错返工烧掉一堆 Token。改成两段走先要一个纯静态前端 Demo只验证视觉你对着 Demo 满意了再让 AI 基于这份 Demo 代码用同一套风格扩出完整项目。关键纪律第一版 Demo 如果糙了禁止继续往下开发。方向错了后面积累了越多代码拆掉越疼。这也和 对话工程技巧 里「拆小步骤、逐步验证」的路数一致——每步可检查你随时能掉头。设计阶段想加速还有几件趁手的Google Stitch输入一段描述就能出界面原型纸面草图拍照也能识别成设计稿支持导出代码再交给 Cursor 之类的工具继续开发。Figma Figma MCP在 Figma 里把页面画清楚AI 直接读设计文件出码。Onlook主打设计师直接可视化编辑网页代码设计和开发之间不断层。告诉 AI 去哪找图而不是让它凭空生图AI 默认产出的页面没有真实图片这是「内容空洞」的头号来源。别指望它从 0 生图把图片来源点名给它就行四个渠道各管一摊用途来源说明插画unDraw免费 SVG 插画颜色可自定义图标Iconify20 多万个免费矢量图标真实照片Pexels高质量免费图库有 API 可搜占位图Picsum PhotosURL 直接指定尺寸每次刷新都是不同照片为本网站搜索并集成图片 1. 插画到 undraw.co 搜与内容相关的图 2. 图标使用 Iconify 图标库 3. 真实照片用 Pexels 搜索 4. 临时占位用 Picsum Photos适合任何需要「内容充实感」的页面。真实照片带来的信息密度是生成式网站最缺的那块拼图。自己定死配色别让 AI 抽卡想彻底摆脱「蓝紫脸」最硬的招是配色自己拍板。用Coolors按空格键随机撞色可导出多格式或Adobe ColorAdobe 官方配色工具生成一套色板然后把色值原样交给 AI主色 #1F3A5F辅色 #C9A227背景 #F5F1E8。 全站只能从这组色板取色禁止引入任何其他颜色。适合对品牌感有要求、或者就是看不惯 AI 默认色的人。色值一旦写死AI 想跑偏都跑不了。第二步对话中下约束——把「不要什么」写清楚先给 AI 立一份「设计禁止清单」只说「要好看」等于什么都没说。把最容易撞车的默认项逐条禁掉设计禁止清单 - 蓝紫渐变、纯平背景色 - Hero 三卡片布局、完美居中对齐 - emoji 当功能图标 - ease-in-out 线性动画 - 「赋能」「极致」类空话文案适合所有项目成本最低、见效最快的一步。禁完再跑一遍自查清单红线条数会肉眼可见地掉。给 AI 定一个「设计师」人设角色设定能把 AI 从「标准答案模式」拨到「风格模式」你是一位资深独立设计师反感千篇一律的 SaaS 模板 追求每个像素都有温度和手感。 深灰 橙色是你的常用组合大留白是你的呼吸感。适合需要强辨识度的品牌页、个人站。人设里带上具体口味配色倾向、留白习惯比抽象形容词管用。把文案从「通稿」改成「人话」AI 写文案的默认档是新闻通稿必须手动降档。三条要求直接抄走文案规则 - 具体化「每天省 2 小时重复劳动」不说「提升效率」 - 口语化「上手像呼吸一样自然」不说「卓越体验」 - 带情绪「再也不用在 10 个群里翻文件了」 - 每句不超过 15 个字适合落地页、产品页这类靠文案留人的页面。语境注入先喂情绪再谈设计AI 出通用设计还因为它不知道你页面要传达什么「气氛」。解法是先给它一段带情绪的原文再提设计参数先读这段话《黑客与画家》——编程语言是用来思考的。 按这种冷静、理性的情绪设计首页 深灰 冷蓝布局理性有序整体沉思感。AI 会把视觉参数和文字的情绪对齐产出带特定氛围的页面。适合内容本身有调性的项目博客、音乐页、书评站比干巴巴罗列色值更能出「魂」。把全部规则沉淀成 AGENTS.md上面的技巧每次手打一遍不现实。把它们固化成项目根目录的AGENTS.mdCursor、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-skillsanthropic-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 UI150 动画组件专攻微交互、流光边框、文字渐变。DaisyUI30 主题cyberpunk、retro、cupcake 这类风格一键切换。备选ikun-uiSvelte.js UnoCSS、Radix UI无样式原语自由度拉满、Mantine100 组件。有个坑必须提前堵小众库文档更新快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-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辅助生成（AIGC），仅供参考