给不懂代码的人 · Claude Code Skill

零代码,用 AI 做出能交付上线的官网

市场、运营、产品,不写一行代码,从调研到交付,一个人几天内出一版能给开发上线的官网原型。这套方法把整个流程拆给你。

源自一次真实改版 · 1 个非技术人员 + AI · 约 2 周 · 100+ 轮迭代

核心理念,人做决策,AI 做执行

AI 负责生成代码、改样式、处理图片、记录版本。人负责审美判断、品牌把关、信息取舍、最终拍板。AI 没有真正的审美,容易过度设计,必须靠人来说「够了」。

主线流程

先定大方向,再逐块微调

不要一上来就让 AI 做全站,那样改起来是灾难。整个流程分两个阶段,中间靠大量调研托底。

1

先知道自己要什么

动手前做足调研,国内外竞品、优秀 SaaS 官网、现成模板三类都看。看到合适的立刻存下来。心里有清晰的目标和参考,再让 AI 实现,比凭空让它给方案高效得多。

2

出一版完整框架

让 AI 按信息架构把整个页面搭出来,先看整体,不纠结细节。

3

分模块逐块精修

一次只盯一个模块。大改前让 AI 给「A 方案还是 B 方案」的选择题,不要让它盲改。大改时直接给参考图让它照着学。

4

同步检查移动端

每个模块在电脑上调好,一定再看一遍手机端。桌面端好看不代表手机端好看,要同步推进,别全做完才发现手机端乱了。

5

换页面就重新调研

首页、落地页、定价页,每个页面目标和受众都不同。换页面 = 重新调研,不要拿一次调研套所有页。

这套方法覆盖什么

从第一句话到交付开发,全程

不只是「怎么让 AI 写页面」,而是一个非技术人员独立跑完整个项目需要的全部环节。

环境

东西在哪运行

不懂代码也能看懂的环境说明,东西在哪、怎么看见效果。

成本

省 token 策略

先用低成本模型趟路调 prompt,高能力模型攻坚,省下大量开销。

稳定

多 agent 备份

两个 agent 接管同一项目,一个崩了另一个立刻救场。

红线

避坑清单

8 个真金白银踩出来的坑和红线规则,改动前必读。

体系

设计规范

间距、字号、颜色、圆角、移动端的具体标准,让 AI 输出有体系感。

配图

图片处理

AI 生成不了好图,怎么找现成素材、怎么避开透明背景变黑的坑。

流量

SEO 优化

哪些前端能做、哪些走后台配置、哪些要技术介入,结合实战。

交付

交付开发

交付物清单、需求文档模板、排期沟通、埋点要点。

对齐

沟通方法

怎么和决策者对齐,给选择题不给问答题,减少反复推翻。

先说清楚边界

什么能做,什么得交给开发

一个诚实的边界,免得你拿它去做做不到的事。

能「看」的它能做,要「用」的得交给开发

能做官网首页、落地页、产品介绍页、活动页,这类给用户看的展示型静态页面
做不了表单提交存数据、用户登录注册、读数据库、支付、账户后台,这类真实功能逻辑必须开发实现
能做AI 可以做出「长得像」的静态外壳,把视觉和结构先定下来
三十秒上手

装进你的 AI 工具

支持 Claude Code、Cursor、Codex CLI 等。装好之后,让 AI 做官网时会自动套用这套方法。也可以当纯文档读。

# Claude Code,clone 到 skills 目录
mkdir -p .claude/skills
git clone https://github.com/pencil20388-eng/ai-website-building.git .claude/skills/ai-website-building

下一次官网改版,你一个人就能起步

完整方法、避坑清单、设计规范、交付模板,全在仓库里。

在 GitHub 上查看 →