起因
闲着没事，就想整个 blog 玩玩，时不时写点东西记录一下，顺便养成做笔记的习惯。
虽然我是 CS 科班生，但从没接触过前端，CSS 更是一窍不通。
想着这不是有 AI 吗，手里还有个 ChatGPT Pro20x 的订阅，那就试试看
初版
由于没有前端经验，我先在 ChatGPT 网页端描述了想要的风格，给了它几个关键词——简洁、技术博客等，再让它帮我写一份给 agent 干活的提示词。
我对前端一无所知，提示词也写不好，所以先让 AI 理解我的想法，再帮我写提示词。
生成了一堆看似很高级的约束。
我直接 Command + C、Command + V，丢给 agent，让它 猛猛开干，初版就出来了：
（截图中的 CS PhD Candidate 是初版生成的错误文案。）
AI 味儿实在太浓了！！！熟悉的 GPT 蓝色，熟悉的圆角框，还有那些不明觉厉的描述……
重写约束！
我开始反思，可能是因为具体约束给得不够，所以 AI 就会按它理解的风格自由发挥，做出来的东西很容易大同小异。
想找到自己喜欢的风格，还是得学一点 CSS 基础，知道有哪些地方能调、该怎么调，再学会怎么约束它。
于是我学习并参考了这篇教程：《美的源代码 — 写给程序员的美学鉴赏》。
其中有几个 tips：
- 把“简洁”说具体。 页面里哪些内容重要、先看什么、哪些信息可以弱化，都要先想清楚。标题、日期、摘要之间的对齐和距离，也会影响整个页面的感觉。光给几个风格词，AI 还是有很大的自由发挥空间。
- 字体和阅读参数一起考虑。 正文、导航和代码各自用什么字体，字号多大，行高多少，一行放多少字，都需要一起调整。长文读起来舒不舒服，跟这些细节关系很大。
- 给颜色和样式定一套规则。 背景、正文、链接和强调色各有用途，颜色数量也要控制。字号、间距和组件样式统一维护，同类内容沿用同一套规则，后面改页面就不容易各改各的。
- 把给 AI 的要求拆开写。 教程里的 Prompt 模板包含意图、结构、系统、参照和边界。对应到这个博客，就是交代网站用来做什么、放哪些内容、采用哪些字体和颜色、想参考什么风格，以及明确排除哪些效果。
- 修改时说清楚具体位置。 哪块间距不舒服、哪种颜色太抢眼、哪个组件需要调整，都尽量指出来，同时说明其他部分保持不变。这样一轮轮改下来，比反复让 AI 重新生成更容易接近自己想要的样子。
我就照着这些思路，逐步确定字体、行距、字号、颜色和各个组件的样式，再让 AI 去开干，整体效果就好多了～
这些规则后来也整理进了项目文档，颜色、字号和间距统一用 Token 管理，组件沿用已经确定的样式。后续修改有了可以参考的约定，改完再检查构建和页面效果。
经过后面几轮修正，本站就出现了！！
做完以后的一些反思
- AI 的工程执行能力很强，但它不一定能
真正懂你。对于一个不懂你的 AI，想让它做出你想要的作品，确实很难，得说清楚自己的想法，明确约束。 - 有了 AI，可以尝试一些以前没接触过的领域，但不能
直接 一句话驱动 AI，让它猛猛干。 - 相关的基础知识还是得学一点，至少知道
能怎么做、原理是什么、效果是什么，才能写出合格 的 prompt。