# 不会设计的人，可以完全用AI做网站吗？

URL: https://caijiao.org/posts/181
Source: docs/posts/181.md
Description: 能，但成品的样子和你以为的不一样——AI 给的是组件默认值，不是一套视觉系统。10015.io 的作者 Fatih Telis 是前端出身，Next.js 加 styled-components、不用任何 UI 组件库，反而做出了 50 多个工具的统一感。

能做完，但我得先把"做完"这个词说清楚——它交付的是**一堆各自看不出毛病、放在一起不像同一个站的东西**。这不是 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 官网首页截图](/images/2026-09/10015.io.png)

*10015.io 首页的插画里，电脑屏幕上浮着一个带 Aa 图标的文档窗口。*

不用 UI 组件库这件事听起来是"放弃了设计"，实际效果反过来：因为没有现成的组件可以拖，他必须**自己定义每个间距、每个颜色、每个字号**，而这些定义被迫集中在一处——写 CSS 的那个地方一旦集中，视觉就自然统一了。

这正是不会设计的人最该抄的路径：**把设计决策压缩成一张很短的变量表**，然后全程只用这张表里的值。

这份表我在实际项目里还会加两条：

一条是**字重规则**：正文只用常规字重，需要强调的地方只用加粗，不允许用斜体强调中文。AI 经常给中文加斜体，那在中文排版里很难看，而且是"这段没想清楚"最容易被人一眼看出的地方。

另一条是**表单的四种状态**——默认、聚焦、报错、禁用。AI 通常只生成前两种，报错态往往是后来临时补的，于是和前两种不在同一个视觉体系里。

我的做法是六个数：三个间距、一个圆角、一个主色、一个文字灰。写完定死，之后所有生成的提示词里都带上这张表，并且写一句"只允许使用这些值，需要新值时先问我"。

用 CSS-in-JS 承载这套变量是有实际好处的——变量和组件写在同一个文件里，AI 改组件时能顺手看到全部可用值。相关的写法可以看 [React 组件化](/react/)，重点不是 styled-components 这个库，是"样式必须引用同一份 token"这个约束。

合并到三档之后整站会立刻收紧。无 UI 库的路径里，这一步是唯一必须做的设计动作。

## 工具站的 UI 还有一个反直觉的地方

做工具站时 AI 最常犯的错误是**过度设计**：给每个工具页都加 hero 区、加特性介绍、加 FAQ 三件套。

工具页面不需要这些。用户从搜索结果落进来的时候脑子里只有一个动作——把文件丢进去，拿到结果。多出来的每一块区域都在推迟这个动作。

这里还有一层连锁反应：处理逻辑能不能放在本地，直接决定了这个页面能简化到什么程度。图片重编码、格式转换这类重活，用[WebAssembly](/webassembly/)在浏览器里跑，页面就不需要上传进度、不需要任务队列、不需要结果保留多久的说明。10015.io 敢做到"极少请求服务端"，前提就是这些处理不需要服务端。

## 做得出来和有人来，还是两件事

最后一个不太中听的现实：视觉统一解决的是留存，不解决获客。Product Hunt 现在大约每天有 668 次产品发布，能上 feature 榜的比例约 2.8%。

在这个密度下，一个"不难看的工具站"是及格线，不是优势。同样的一段投入时间，花在配色上的回报远低于花在处理能力上——支持多大的文件、兼容多少种输入格式、遇到畸形输入会不会整个崩掉，这些才是用户会替你传播的东西。

这套表里我还专门加了一条限制：**组件里不允许出现字面量颜色**。写成变量之后改一次全站生效，写死的话，半年后你自己都找不出某个灰色是从哪来的。

视觉统一解决的是复访，工具站的收入结构恰好依赖复访。10015.io 的主要来源是展示广告，公开信息里 AdSense 的 MRR 大约 300 美元——这类收入看的是访问量而不是转化率，靠的就是每个工具页都值得再来一次。

工具页该按什么粒度组织，可以参考[在线工具集合](/tool/)。

盯着 Token 表不好使的时候，我就去看那些不用 UI 库的人是怎么写的。他们没有更好的审美，只是少了一套能犯错的选项。

---

*10015.io 技术选型与作者信息来自项目公开资料；Product Hunt 发布量与上榜率为第三方公开统计。*