一个设计网站的经验思路

最近我一直为自己的博客界面头痛。

我是个纯正的后端。到了 AI 时代，多少算蜕成了「AI 全栈」——能让模型把页面吐出来，也能把接口接上。可做久了会发现：AI 生成的网页大多「能用」，却很少是我脑子里的那个样子。这个博客也一样，到现在还没完全达到预期。

想了想，与其继续跟生成结果较劲，不如对自己这轴轴的脑子做一次梳理，把这条 UI 构建思路写清楚。按我现在的理解，做网站界面，就是三步：

图片 → 原型 → 接入真实数据和接口。

先用图片锁定视觉

最先应该是图片。它的时间成本最低；如果你已经有生图工具的订阅，金钱成本往往也最低。

你可以不断试错，直到出现一张「对了」的效果图。视觉方向一旦被锁住，后面会少走很多弯路。

但生图也经常不尽如人意：构图飘、气质偏，细节对不上脑海。所以我更推荐先自己画草图——不必精致，只要把脑子里的样子落到纸面或画板上。草图阶段也没必要先争来争去、把色调和主题定死；结构、疏密、主次先成立，再拿草图去生成更完整的效果图，往往更稳。

再把感觉做成能动的原型

图片给的是主体感觉，不是能点、能滑、能反馈的东西。从静帧到可交互，大概率会失真。

失真常见在这些地方：细节组件被「升级」成另一套气质；色调被悄悄抬高或改掉；页面上多出一些来路不明的说明文字；点击、悬停、过渡是生硬还是生动，也得单独打磨。

所以原型阶段通常最长。视觉对了，只是过了第一关；交互手感对了，才算把那张图真正用起来。

最后接入真实

把 HTML 原型变成能跑的站点，对现在的 Agent 并不难。难的是：原型里多半是假数据。

真实内容一进来，字数、图片比例、列表长度都会和设计稿不一样，样式往往要被小改一轮才能重新站稳。这一步同样需要你盯着看、给出反馈、再调——不是接上接口就结束。

麻烦，但更可能对上预期

这条路比「直接让 AI 出一版页面」麻烦。可对我这种并不以视觉为本能的人来说，它更有效：先用低成本把样子找准，再接受从静到动、从假到真时必然发生的失真，并在每一段失真里，把页面拽回自己要的感觉。