ai-website-buildinglisted

# 零代码用 AI 做官网：完整方法 这是给**完全不懂代码的人**（市场、运营、产品）准备的方法。目标是用 AI 大幅提升出原型的效率，让一个人就能完成从设计到交付的大部分流程，把过去需要多人、多轮排期的工作压缩到几天内。 核心理念：**人做决策，AI 做执行。** AI 负责生成代码、改样式、处理图片、记录版本；人负责审美判断、品牌把关、信息取舍、最终拍板。AI 没有真正的审美，容易过度设计，必须靠人来说「够了」。 最重要的前提：**先知道自己要什么，再去下指令。** 这比用哪个工具都关键。让 AI 凭空给方案，大多数时候是来回改都不满意；自己心里先有清晰的目标和参考，再让 AI 实现，效率会高很多。下面所有方法都建立在这个前提上。 --- ## 一、这个东西在哪里运行 用户不懂代码，所以先说清楚「东西在哪、怎么看见」。用大白话解释，不要丢术语。 - **写代码的地方**：就是和 AI 对话的窗口（这个对话本身）。AI 会把网页写成一个 `index.html` 文件。 - **网页文件长什么样**：一个 `.html` 文件就是一个完整网页，双击就能用浏览器打开看效果。不需要安装任何东西。 - **怎么实时看效果**：让 AI 生成文件后，下载到电脑双击打开；或者让 AI 部署到一个临时网址，改完刷新就能看。 - **技术选型（AI 默认这么做即可，用户无需理解）**：用 Tailwind CSS（通过 CDN 引入）+ 原生 HTML，零构建工具，一个文件搞定。这样用户拿到的就是一个能直接打开、也能直接交给开发的文件。 - **这个 skill 用在哪**：从「我想做个官网」这句话开始，一直到「把文件交给开发」结束，全程都用这套方法。 如果用户问「我要先装什么软件吗」，回答：不用，全程在对话里完成，最后拿到一个 html 文件即可。 **适用边界（什么时候不该用这个方法）**：本方法适合做**展示型静态页面**——官网首页、落地页、产品介绍页、活动页这类「给用户看」的内容。但涉及**真实功能逻辑**的页面做不了，需要真开发介入：比如表单提交并存储数据、用户登录注册、从数据库读取动态内容、支付、账户后台等。这类页面 AI 可以做出「长得像」的静态外壳，但背后的逻辑必须开发实现。一句话：能「看」的它能做，要「用」的（提交、登录、动态数据）得交给开发。 --- ## 二、省 token 策略（重要，先说） 做官网是个长任务，会消耗大量 token。**先用低成本模型趟路，再用高能力模型攻坚**，能省很多钱。 具体策略： 1. **先用低成本模型做大概**。让低成本/快速的模型先把整体框架、布局、文案搭出来，看看大方向对不对、prompt 说得清不清楚。 2. **借低成本模型调 prompt**。如果低成本模型做出来的东西方向不对，先反思是不是自己的需求没说清楚——低成本模型对模糊指令更敏感，反而能帮你发现 prompt 的问题。把需求改清楚，省下来的是后面高能力模型的钱。 3. **低成本模型反复做不好就换高能力模型**。当你发现「不管怎么说，低成本模型就是做不出这个效果」——通常是涉及精细的视觉判断、复杂布局、或需要理解上下文的改动——这时候切换到高能力模型（如 Claude）来攻坚。 4. **判断标准**：低成本模型适合「明确、机械」的活（改文案、调间距、批量替换）；高能力模型适合「需要审美和理解」的活（整体设计、复杂模块、反复调不好的细节）。 一句话：**低成本模型测方向和 prompt，高能力模型做最终