专项 07 · 网站开发
网站开发 SOP：从设计稿到能用的整站
我做的站风格高度一致：先用设计工具生成静态页 → 组装整站 → 冻结 UI → 打通交互 → 灌数据 → 逐页精修 → 上线。这一课把它固定成十步，配 3 个真实项目复盘。
前提
先说清技术形态（它决定了流程）
| 项 | 我的做法 | 为什么 |
|---|---|---|
| UI 来源 | 先用 AI 设计工具生成一套静态 HTML | 先有视觉，再有工程。反过来做一定难看 |
| 前端 | 纯静态 HTML/CSS/JS + hash 路由 /#/ch01/0 | 零构建、双击能开、改完刷新就见效 |
| 后端 | 零依赖 Node（node:http + node:sqlite），或纯前端存储 | 不装一堆包，环境永远不炸 |
| 预览 | 固定端口 http://127.0.0.1:8310 | 我随口就能说"打开网页" |
| 数据 | 先 CSV/JSON/MD，后期进库 | 数据先行，页面后做 |
这个形态最大的好处：每一层都能独立验证。页面画不出来不是数据的问题，数据没进来也不是页面的问题。
SOP
十步流程
按顺序走，每一步都有明确产出。跳过任何一步，后面都会以"返工"的形式补回来。
1
拿设计稿
设计工具导出一堆
code.html（每页一个文件夹）。先有视觉，再有工程。产出：一组静态页 + 资源
2
侦察现状
读取 <站点根目录> 里面的所有文件夹，只读取，先不修改。 提前发现重复页、外链字体、缺图。产出：页面地图 + 资源清单
3
组装整站
把这个里面的网页给我做成一个网站，衔接功能打通，然后本地测试。产出：能跑的站 + 本地服务
4
冻结 UI ★
禁止修改 UI，只能增加功能。 把设计稿定为基线，此后所有问题都只剩"功能"问题。产出：只读的 UI 基线
5
打通交互
所有按钮都接通，点击之后有反应才对。 每个按钮都要有 handler + 视觉反馈。产出：可点的站
6
灌数据（先假后真）
先造 10 条跨档假数据跑通流程，再换真数据。这样出问题一定是逻辑问题。
产出：有内容的站
7
逐页精修 ★★
最耗时间的阶段。截图 → 一句话 → 改，每页至少 10 轮，复杂的 40 轮以上。
产出：看得下去的站
8
统一美化
字号梯度 / 间距梯度 / 圆角 / 主色，一轮收口，别混在功能里做。
产出：风格统一的站
9
性能与上线
先量成长任务/帧率再动手；部署后用真实域名再走一遍验收。
产出：线上能用的站
10
沉淀
HISTORY + PITFALLS + 全站链接自检脚本（含运行时拼出来的路径）。
产出：下次能复用的资产
十步分四段 · 时间到底花在哪
准备 ①②
拿设计稿 + 侦察（一两个会话就过）
打通 ③④⑤⑥
组装整站 + 冻结 UI + 按钮接通 + 灌数据
精修 ⑦⑧
真正的战场：逐页截图微调 + 一轮统一美化
上线 ⑨⑩
量性能 + 部署 + 沉淀
最大的认知差：新手以为 80% 时间在「做出来」，实际有一半以上在「改到能看」。
你能多快看出哪里不对，就是你的真实水平 —— 这是 AI 替不了的那部分。
说人话
做网站像装修：拆改水电（组装）很快，真正耗时间的是贴完砖后一遍遍看哪儿不对齐、哪条缝宽了。
所以别指望"一次做完美"，要准备一段专门用来挑毛病的时间，而且这段时间里 AI 特别好用 ——
你说一句它改一处，一轮 20 秒。
必知
设计工具导出的三个坑（拿到就先处理）
① 固定画布三件套
导出的 HTML 在 <html> 上带 width+height+overflow:hidden。
拿到就删这三项。
overflow:hidden 写在 <html> 上 = 整页禁滚，还会锁死响应式。② 链接是假的
全站 <a href="#" data-path="...">，点了什么都不发生。
按「页面表 + 锚文本规则」批量改写成真实链接。
③ 混用两套设计系统
同一站里，有的页 text-headline-lg 是 32px，有的页是 16px。
判据：H1 计算出来 16px 而 class 写着 headline-lg ⇒ 该页缺 fontSize token，不是你的 CSS 没生效。
案例
三个真实网站项目
清单
每一页都要过的九条
性能
卡顿的四个真凶（按我遇到的频率）
| 真凶 | 判据 | 修法 |
|---|---|---|
| 一次渲染太多 DOM | 打开时主线程有几百 ms 长任务 | 分帧建行 / 虚拟滚动 |
| 一次读入全部数据 | 首屏要等很久 | 列表只读元数据，详情按需读 |
| 静态资产没缓存 | 每次导航都在下载字体/图片 | /assets/ 长缓存，HTML no-store |
| 动画用了布局属性 | 动画时掉帧 | 只动 transform + opacity |
纪律：先量成数字再动手。
用
PerformanceObserver 观测 longtask，再配上 rAF 帧间隔；改前改后各跑一次同一脚本。
「凭感觉怪某个 CSS 属性」经常是错的。
速查
一页纸（打印贴屏幕）
① 读取所有文件夹，只读取不改
② 做成整站，打通，本地起服务
③ 冻结 UI：禁止修改 UI，只能加功能
④ 所有按钮接通，点击有反应才对
⑤ 假数据 10 条（跨档），跑通流程
⑥ 换真数据
⑦ 逐页精修：截图 → 一句话 → 改（每页 ≥10 轮）
⑧ 统一字号/间距/圆角/主色，一次收口
⑨ 量性能 → 改 → 再量；部署 → 真实域名再验一遍
⑩ HISTORY + PITFALLS + 全站链接自检