Skip to content

Commit 971eba5

Browse files
pencil20388-engpencil20388-eng
authored
Create index.html
1 parent 40b7309 commit 971eba5

1 file changed

Lines changed: 222 additions & 0 deletions

File tree

‎docs/index.html‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>零代码用 AI 做官网的完整方法 — ai-website-building</title>
7+
<meta name="description" content="给完全不懂代码的市场、运营、产品的实操手册：用 AI 从零做出能交付给开发上线的官网原型。覆盖调研、分模块生成、逐块微调、设计规范、图片处理、移动端适配、避坑清单、省 token 策略、交付开发。">
8+
<meta name="keywords" content="AI 做官网,零代码做网站,AI 生成网页,落地页制作,AI 建站,不会代码做网页,Claude 做官网,AI 网页设计,Tailwind 模板,官网原型,非技术人员做网站">
9+
<meta name="author" content="pennyops">
10+
<meta name="robots" content="index, follow">
11+
<link rel="canonical" href="https://pencil20388-eng.github.io/ai-website-building/">
12+
<meta property="og:title" content="零代码用 AI 做官网的完整方法">
13+
<meta property="og:description" content="给不懂代码的人：用 AI 从零做出能交付上线的官网。调研、生成、微调、避坑、交付全流程。">
14+
<meta property="og:type" content="website">
15+
<meta property="og:url" content="https://pencil20388-eng.github.io/ai-website-building/">
16+
<meta property="og:locale" content="zh_CN">
17+
<meta name="twitter:card" content="summary_large_image">
18+
<meta name="twitter:title" content="零代码用 AI 做官网的完整方法">
19+
<meta name="twitter:description" content="给不懂代码的人：用 AI 从零做出能交付上线的官网。">
20+
<link rel="preconnect" href="https://fonts.googleapis.com">
21+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
23+
<style>
24+
:root{
25+
--bg:#fbfbfa;
26+
--ink:#16161a;
27+
--muted:#6e6e76;
28+
--line:#e7e7e3;
29+
--accent:#2b6cff;
30+
--accent-soft:#eef3ff;
31+
--card:#ffffff;
32+
}
33+
*{margin:0;padding:0;box-sizing:border-box;}
34+
html{scroll-behavior:smooth;}
35+
body{
36+
background:var(--bg);
37+
color:var(--ink);
38+
font-family:'Noto Sans SC',sans-serif;
39+
font-weight:400;
40+
line-height:1.75;
41+
-webkit-font-smoothing:antialiased;
42+
}
43+
.wrap{max-width:980px;margin:0 auto;padding:0 24px;}
44+
45+
/* nav */
46+
nav{position:sticky;top:0;background:rgba(251,251,250,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10;}
47+
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;}
48+
nav .brand{font-weight:700;font-size:15px;}
49+
nav .brand span{color:var(--accent);}
50+
nav a.cta{font-size:13px;background:var(--ink);color:#fff;padding:8px 16px;border-radius:8px;text-decoration:none;font-weight:500;}
51+
52+
/* hero */
53+
.hero{padding:90px 0 70px;border-bottom:1px solid var(--line);}
54+
.badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);background:var(--accent-soft);padding:5px 12px;border-radius:20px;margin-bottom:24px;}
55+
.hero h1{font-size:clamp(32px,5.5vw,52px);font-weight:900;line-height:1.2;letter-spacing:-1px;max-width:18ch;}
56+
.hero p.sub{font-size:clamp(16px,2.5vw,19px);color:var(--muted);margin-top:22px;max-width:46ch;font-weight:300;}
57+
.hero .actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
58+
.btn{text-decoration:none;font-size:15px;font-weight:500;padding:13px 26px;border-radius:10px;transition:all .2s;}
59+
.btn-primary{background:var(--accent);color:#fff;}
60+
.btn-primary:hover{background:#1a5aef;}
61+
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
62+
.btn-ghost:hover{border-color:var(--ink);}
63+
.hero .meta{margin-top:30px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);}
64+
65+
/* principle band */
66+
.band{background:var(--ink);color:#fff;padding:54px 0;}
67+
.band h2{font-size:clamp(22px,3.5vw,30px);font-weight:700;letter-spacing:-.5px;}
68+
.band h2 b{color:#7aa5ff;}
69+
.band p{color:#b8b8c0;margin-top:14px;font-weight:300;max-width:54ch;font-size:16px;}
70+
71+
/* sections */
72+
section{padding:64px 0;border-bottom:1px solid var(--line);}
73+
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;}
74+
section h2.title{font-size:clamp(24px,4vw,34px);font-weight:900;letter-spacing:-.5px;margin-bottom:10px;}
75+
section p.lead{color:var(--muted);font-weight:300;max-width:56ch;margin-bottom:34px;}
76+
77+
/* coverage grid */
78+
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
79+
.cell{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 20px;transition:all .2s;}
80+
.cell:hover{border-color:var(--accent);transform:translateY(-2px);}
81+
.cell .k{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);margin-bottom:8px;}
82+
.cell h3{font-size:16px;font-weight:700;margin-bottom:6px;}
83+
.cell p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.6;}
84+
85+
/* flow steps */
86+
.steps{display:grid;grid-template-columns:1fr;gap:0;}
87+
.step{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start;}
88+
.step:last-child{border-bottom:none;}
89+
.step .n{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;color:#fff;background:var(--accent);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
90+
.step h3{font-size:17px;font-weight:700;margin-bottom:5px;}
91+
.step p{font-size:14.5px;color:var(--muted);font-weight:300;}
92+
93+
/* honesty box */
94+
.honesty{background:var(--accent-soft);border:1px solid #d4e0ff;border-radius:16px;padding:32px;}
95+
.honesty h3{font-size:18px;font-weight:700;margin-bottom:14px;}
96+
.honesty .row{display:flex;gap:12px;padding:9px 0;font-size:15px;align-items:baseline;}
97+
.honesty .row .tag{font-family:'JetBrains Mono',monospace;font-size:11px;padding:2px 8px;border-radius:5px;flex-shrink:0;font-weight:500;}
98+
.honesty .yes .tag{background:#dcf5e3;color:#1a7a3e;}
99+
.honesty .no .tag{background:#fde0e0;color:#b53030;}
100+
.honesty .row span:last-child{color:#3a3a44;font-weight:300;}
101+
102+
/* install */
103+
.code{background:var(--ink);color:#e8e8ec;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.95;padding:24px;border-radius:12px;overflow-x:auto;}
104+
.code .c{color:#7a7a86;}
105+
.code .g{color:#8fd49b;}
106+
107+
/* cta */
108+
.final{text-align:center;padding:80px 0;}
109+
.final h2{font-size:clamp(26px,4.5vw,38px);font-weight:900;letter-spacing:-.5px;margin-bottom:16px;}
110+
.final p{color:var(--muted);font-weight:300;margin-bottom:30px;}
111+
112+
footer{padding:36px 0 56px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);line-height:1.9;border-top:1px solid var(--line);}
113+
footer a{color:var(--accent);text-decoration:none;}
114+
.series{margin-top:14px;}
115+
.series a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
116+
</style>
117+
</head>
118+
<body>
119+
120+
<nav>
121+
<div class="wrap">
122+
<div class="brand">ai-website-building <span>/ skill</span></div>
123+
<a class="cta" href="https://github.com/pencil20388-eng/ai-website-building">GitHub ↗</a>
124+
</div>
125+
</nav>
126+
127+
<header class="hero">
128+
<div class="wrap">
129+
<span class="badge">给不懂代码的人 · Claude Code Skill</span>
130+
<h1>零代码,用 AI 做出能交付上线的官网</h1>
131+
<p class="sub">市场、运营、产品,不写一行代码,从调研到交付,一个人几天内出一版能给开发上线的官网原型。这套方法把整个流程拆给你。</p>
132+
<div class="actions">
133+
<a class="btn btn-primary" href="https://github.com/pencil20388-eng/ai-website-building">查看完整方法</a>
134+
<a class="btn btn-ghost" href="#flow">先看流程</a>
135+
</div>
136+
<div class="meta">源自一次真实改版 · 1 个非技术人员 + AI · 约 2 周 · 100+ 轮迭代</div>
137+
</div>
138+
</header>
139+
140+
<div class="band">
141+
<div class="wrap">
142+
<h2>核心理念,<b>人做决策,AI 做执行</b></h2>
143+
<p>AI 负责生成代码、改样式、处理图片、记录版本。人负责审美判断、品牌把关、信息取舍、最终拍板。AI 没有真正的审美,容易过度设计,必须靠人来说「够了」。</p>
144+
</div>
145+
</div>
146+
147+
<section id="flow">
148+
<div class="wrap">
149+
<div class="eyebrow">主线流程</div>
150+
<h2 class="title">先定大方向,再逐块微调</h2>
151+
<p class="lead">不要一上来就让 AI 做全站,那样改起来是灾难。整个流程分两个阶段,中间靠大量调研托底。</p>
152+
<div class="steps">
153+
<div class="step"><div class="n">1</div><div><h3>先知道自己要什么</h3><p>动手前做足调研,国内外竞品、优秀 SaaS 官网、现成模板三类都看。看到合适的立刻存下来。心里有清晰的目标和参考,再让 AI 实现,比凭空让它给方案高效得多。</p></div></div>
154+
<div class="step"><div class="n">2</div><div><h3>出一版完整框架</h3><p>让 AI 按信息架构把整个页面搭出来,先看整体,不纠结细节。</p></div></div>
155+
<div class="step"><div class="n">3</div><div><h3>分模块逐块精修</h3><p>一次只盯一个模块。大改前让 AI 给「A 方案还是 B 方案」的选择题,不要让它盲改。大改时直接给参考图让它照着学。</p></div></div>
156+
<div class="step"><div class="n">4</div><div><h3>同步检查移动端</h3><p>每个模块在电脑上调好,一定再看一遍手机端。桌面端好看不代表手机端好看,要同步推进,别全做完才发现手机端乱了。</p></div></div>
157+
<div class="step"><div class="n">5</div><div><h3>换页面就重新调研</h3><p>首页、落地页、定价页,每个页面目标和受众都不同。换页面 = 重新调研,不要拿一次调研套所有页。</p></div></div>
158+
</div>
159+
</div>
160+
</section>
161+
162+
<section>
163+
<div class="wrap">
164+
<div class="eyebrow">这套方法覆盖什么</div>
165+
<h2 class="title">从第一句话到交付开发,全程</h2>
166+
<p class="lead">不只是「怎么让 AI 写页面」,而是一个非技术人员独立跑完整个项目需要的全部环节。</p>
167+
<div class="grid">
168+
<div class="cell"><div class="k">环境</div><h3>东西在哪运行</h3><p>不懂代码也能看懂的环境说明,东西在哪、怎么看见效果。</p></div>
169+
<div class="cell"><div class="k">成本</div><h3>省 token 策略</h3><p>先用低成本模型趟路调 prompt,高能力模型攻坚,省下大量开销。</p></div>
170+
<div class="cell"><div class="k">稳定</div><h3>多 agent 备份</h3><p>两个 agent 接管同一项目,一个崩了另一个立刻救场。</p></div>
171+
<div class="cell"><div class="k">红线</div><h3>避坑清单</h3><p>8 个真金白银踩出来的坑和红线规则,改动前必读。</p></div>
172+
<div class="cell"><div class="k">体系</div><h3>设计规范</h3><p>间距、字号、颜色、圆角、移动端的具体标准,让 AI 输出有体系感。</p></div>
173+
<div class="cell"><div class="k">配图</div><h3>图片处理</h3><p>AI 生成不了好图,怎么找现成素材、怎么避开透明背景变黑的坑。</p></div>
174+
<div class="cell"><div class="k">流量</div><h3>SEO 优化</h3><p>哪些前端能做、哪些走后台配置、哪些要技术介入,结合实战。</p></div>
175+
<div class="cell"><div class="k">交付</div><h3>交付开发</h3><p>交付物清单、需求文档模板、排期沟通、埋点要点。</p></div>
176+
<div class="cell"><div class="k">对齐</div><h3>沟通方法</h3><p>怎么和决策者对齐,给选择题不给问答题,减少反复推翻。</p></div>
177+
</div>
178+
</div>
179+
</section>
180+
181+
<section>
182+
<div class="wrap">
183+
<div class="eyebrow">先说清楚边界</div>
184+
<h2 class="title">什么能做,什么得交给开发</h2>
185+
<p class="lead">一个诚实的边界,免得你拿它去做做不到的事。</p>
186+
<div class="honesty">
187+
<h3>能「看」的它能做,要「用」的得交给开发</h3>
188+
<div class="row yes"><span class="tag">能做</span><span>官网首页、落地页、产品介绍页、活动页,这类给用户看的展示型静态页面</span></div>
189+
<div class="row no"><span class="tag">做不了</span><span>表单提交存数据、用户登录注册、读数据库、支付、账户后台,这类真实功能逻辑必须开发实现</span></div>
190+
<div class="row yes"><span class="tag">能做</span><span>AI 可以做出「长得像」的静态外壳,把视觉和结构先定下来</span></div>
191+
</div>
192+
</div>
193+
</section>
194+
195+
<section>
196+
<div class="wrap">
197+
<div class="eyebrow">三十秒上手</div>
198+
<h2 class="title">装进你的 AI 工具</h2>
199+
<p class="lead">支持 Claude Code、Cursor、Codex CLI 等。装好之后,让 AI 做官网时会自动套用这套方法。也可以当纯文档读。</p>
200+
<div class="code">
201+
<span class="c"># Claude Code,clone 到 skills 目录</span><br>
202+
<span class="g">mkdir</span> -p .claude/skills<br>
203+
<span class="g">git clone</span> https://github.com/pencil20388-eng/ai-website-building.git .claude/skills/ai-website-building
204+
</div>
205+
</div>
206+
</section>
207+
208+
<div class="final wrap">
209+
<h2>下一次官网改版,你一个人就能起步</h2>
210+
<p>完整方法、避坑清单、设计规范、交付模板,全在仓库里。</p>
211+
<a class="btn btn-primary" href="https://github.com/pencil20388-eng/ai-website-building">在 GitHub 上查看 →</a>
212+
</div>
213+
214+
<footer>
215+
<div class="wrap">
216+
由 <a href="https://www.adspower.net/">AdsPower</a> 内容团队构建 · 源自一次真实官网改版项目 · MIT License
217+
<div class="series">内容工作流系列,<a href="https://github.com/pencil20388-eng/content-topic-judgment">选题判断</a> · <a href="https://github.com/pencil20388-eng/stop-slop-zh">去 AI 味</a> · 做官网(本页)</div>
218+
</div>
219+
</footer>
220+
221+
</body>
222+
</html>

0 commit comments

Comments
 (0)