今天研究了一下前端设计这块，分享几个对我冲击比较大的点。
1. AI 的审美上限，其实是你定的
AI 本质没有审美，它做出来的东西好看，是因为底层内置了一些设计原则约束——颜色怎么配、留白怎么做、字体怎么选。
但这些约束背后还是人写的。
所以你的审美，就是 AI 审美的上限。你说不清哪里不对，它就交一份 70 分的均值答案。你能看出 90 分是什么样，它就往 90 分做。
2. 前端三件套，认准 AI 在哪层干活
HTML 是骨架（内容在哪），CSS 是皮肤（长什么样），JS 是肌肉（动起来）。
改颜色 → 找 CSS，改内容 → 找 HTML，修动画 → 找 JS。
这个认知非常重要。很多人让 AI 改个东西，不知道该让它改哪层，结果越改越乱。
3. 配色 4 色封顶
主色 + 辅色 + 背景色 + 文字色，4 个就够了，多了就乱。
三种常见调子：
- 深色科技调（深蓝底 + 青/绿主色）——适合技术人
- 浅色干净调（白底 + 黑字 + 一抹亮色）——适合写作者
- 高对比强观点调（黄黑、红黑）——适合想被记住的人
4. 间距用 8 倍数体系
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128
所有间距都从这串里取，不要写 13px、27px 这种「魔法数字」。
这个点很小，但效果很明显。很多页面看着廉价，就是因为间距乱写。
5. 让 AI 当评委，别让它说「挺好的」
把页面截图扔给 AI，给它具体维度（视觉权重 / 信息层级 / 留白节奏 / 色彩克制），让它各打 1-10 分，最后按严重度排序输出修改清单。
给了维度 + 评分要求 + 强制排序，AI 立刻专业了。
今天就先聊这几个点。前端设计这个坑很深，但掌握这几个基础原则，至少能让 AI 做出来的东西从 50 分拉到 70 分。
至于怎么从 70 到 90…下次再说。
彩蛋：今天搭了个 AI 扒站 Skill
今天研究前端设计的同时，顺手测试了一个网站克隆的工作流——用 Codex + Playwright MCP，可以把任意网站像素级克隆下来。
核心流程：
- 让 AI 用浏览器 MCP 打开目标网站，截图 + 提取 CSS + 记录所有交互行为
- 写每个 section 的详细 spec（颜色/字体/间距/动画，精确到 getComputedStyle 返回的值）
- 丢给 Codex 按 spec 重建 React 组件
- 验收：原站 vs 克隆站逐区域比对
实测克隆了 stormzhang.ai，95% 还原度。Canvas 星空动画、scroll-snap 吸附、时间线逐帧动画全部复刻。
这个 skill 已经存好了，以后看到好看的网站，一句话就能扒下来改改就用。
关键词：不要自己写审美代码，全部丢给 Codex。 Python 驱动的 Agent 审美天然弱势，认清这个边界很重要。
补一下来源：这个 clone-website 的原始 skill 不是我写的，是 GitHub 上的开源项目：
https://github.com/JCodesMore/ai-website-cloner-template
我只是把它跑通了，配好了 Playwright MCP，测了一轮效果，存成了自己的 skill。
原作者写的 spec 提取流程非常细——getComputedStyle 精确提取、多状态捕获、行为分析、组件拆分——这些我自己想不出来。