不会设计的人,可以完全用AI做网站吗?
能做完,但我得先把"做完"这个词说清楚——它交付的是一堆各自看不出毛病、放在一起不像同一个站的东西。这不是 AI 的缺陷,是它工作方式的必然结果:每次生成都是从零开始选一套值,它没有理由保证第 20 个页面和第 3 个页面用的是同一组间距。
它给你的是默认值,不是设计
实测里最典型的现象是这样的:我让它生成工具列表页,拿到了卡片间距 16px、圆角 8px、副标题 #6b7280 的组合;隔一天让它生成详情页,变成间距 20px、圆角 12px、副标题 #64748b。
两个页面单独看都挑不出错。放在一起就散了。
这不是挑它的毛病。单个生成任务里,它没理由知道"间距 16"是个需要全站统一的决定——它面前的任务只有一个页面。想让它稳定,就得把设计决策从"每次生成时临时决定"改成"生成之前就钉死"。
一个省钱的办法:让它抄,不许它想
如果连这六个数都想不出来,有个更省力的路径:找一个你觉得好看的同类站,截图丢给它,让它测出这套值——配色、间距、字号比例——然后拿测出来的值当 token 用。
关键在第二步:不许它"参考风格重新设计",只能提取具体数值。这个限制很重要,放开的话它会立刻回到从训练分布里取平均值的老路上。
不用 UI 库,反而更统一的那个例子
10015.io 是个值得反复看的工具站。作者 Fatih Telis 是伊斯坦布尔的前端开发者,技术栈是 Next.js + styled-components,明确不用任何 UI 组件库,站上挂了 50 多个工具,几乎所有工具都在客户端运行、极少向服务端发请求,AdSense 的 MRR 大约 300 美元。

10015.io 首页的插画里,电脑屏幕上浮着一个带 Aa 图标的文档窗口。
不用 UI 组件库这件事听起来是"放弃了设计",实际效果反过来:因为没有现成的组件可以拖,他必须自己定义每个间距、每个颜色、每个字号,而这些定义被迫集中在一处——写 CSS 的那个地方一旦集中,视觉就自然统一了。
这正是不会设计的人最该抄的路径:把设计决策压缩成一张很短的变量表,然后全程只用这张表里的值。
这份表我在实际项目里还会加两条:
一条是字重规则:正文只用常规字重,需要强调的地方只用加粗,不允许用斜体强调中文。AI 经常给中文加斜体,那在中文排版里很难看,而且是"这段没想清楚"最容易被人一眼看出的地方。
另一条是表单的四种状态——默认、聚焦、报错、禁用。AI 通常只生成前两种,报错态往往是后来临时补的,于是和前两种不在同一个视觉体系里。
我的做法是六个数:三个间距、一个圆角、一个主色、一个文字灰。写完定死,之后所有生成的提示词里都带上这张表,并且写一句"只允许使用这些值,需要新值时先问我"。
用 CSS-in-JS 承载这套变量是有实际好处的——变量和组件写在同一个文件里,AI 改组件时能顺手看到全部可用值。相关的写法可以看 React 组件化,重点不是 styled-components 这个库,是"样式必须引用同一份 token"这个约束。
合并到三档之后整站会立刻收紧。无 UI 库的路径里,这一步是唯一必须做的设计动作。
工具站的 UI 还有一个反直觉的地方
做工具站时 AI 最常犯的错误是过度设计:给每个工具页都加 hero 区、加特性介绍、加 FAQ 三件套。
工具页面不需要这些。用户从搜索结果落进来的时候脑子里只有一个动作——把文件丢进去,拿到结果。多出来的每一块区域都在推迟这个动作。
这里还有一层连锁反应:处理逻辑能不能放在本地,直接决定了这个页面能简化到什么程度。图片重编码、格式转换这类重活,用WebAssembly在浏览器里跑,页面就不需要上传进度、不需要任务队列、不需要结果保留多久的说明。10015.io 敢做到"极少请求服务端",前提就是这些处理不需要服务端。
做得出来和有人来,还是两件事
最后一个不太中听的现实:视觉统一解决的是留存,不解决获客。Product Hunt 现在大约每天有 668 次产品发布,能上 feature 榜的比例约 2.8%。
在这个密度下,一个"不难看的工具站"是及格线,不是优势。同样的一段投入时间,花在配色上的回报远低于花在处理能力上——支持多大的文件、兼容多少种输入格式、遇到畸形输入会不会整个崩掉,这些才是用户会替你传播的东西。
这套表里我还专门加了一条限制:组件里不允许出现字面量颜色。写成变量之后改一次全站生效,写死的话,半年后你自己都找不出某个灰色是从哪来的。
视觉统一解决的是复访,工具站的收入结构恰好依赖复访。10015.io 的主要来源是展示广告,公开信息里 AdSense 的 MRR 大约 300 美元——这类收入看的是访问量而不是转化率,靠的就是每个工具页都值得再来一次。
工具页该按什么粒度组织,可以参考在线工具集合。
盯着 Token 表不好使的时候,我就去看那些不用 UI 库的人是怎么写的。他们没有更好的审美,只是少了一套能犯错的选项。
10015.io 技术选型与作者信息来自项目公开资料;Product Hunt 发布量与上榜率为第三方公开统计。