这篇文章沿着两条线展开：一条是把网站搭起来，另一条是把模糊的喜好变成可以检查、可以复用的约定。流程图梳理了本次实践的路线；第 5 节再回头讨论，哪些经验值得带到下一个项目。
缘起：解决完一个问题，想把答案留下来
解决完搜狗输入法的适配问题后，我有两个想法。
一个是把这次解决方案记录下来。以后换设备，可以照着快速复刻，不用重新找资料、走一遍弯路。如果有人也遇到相同问题，这篇记录可能还用得上。
另一个是，希望有个地方放自己的东西 🪴：使用记录、做过的小工具、零散实践。一个能慢慢积累的个人主页。
于是，搜狗输入法那篇文章成了本站的第一篇博客。后面的建站过程，也顺手变成了一次 AI 协作实践。
这次我主要负责提出需求、提供参考、看效果和纠偏；找仓库、改代码、处理导入、构建与部署，交给 AI 推进。页面出来以后，我再继续提意见。很多需求，都是看到真实页面后才想清楚的。
1. 先找 repo，迅速拿到一个能跑的架子
🧱 我没有从空白页面开始设计整套系统。先把目标说清楚：需要一个能写博客、展示个人工具的站点，文章支持 Markdown，可以本地预览，也能发布到自己的域名。
最后用的是 Eleventy 官方的 eleventy-base-blog。Eleventy 是静态网站生成器：把文章和页面模板构建成 HTML，再放到服务器上。这个仓库已经提供了博客的基础结构和订阅能力，适合拿来改。
现成仓库负责解决通用问题，自己的精力留给内容和使用体验。 本站后来重新做了首页、文章布局和编辑后台，沿用的是这个起点。
如果现在重新做一次，我会这样向 AI 交代目标：
text
我要一个个人主页，主要放博客和自己做的小工具。
请先找一个适合修改的现成博客仓库，说明选择理由和许可证。
先跑通：一篇真实文章 → 本地预览 → 发布到我的域名。
文章支持 Markdown，也允许少量 HTML 处理复杂排版。
先给我能打开的页面，再根据实际效果逐项调整。
这段是把本次做法整理后的需求示例，可以按自己的情况替换。关键是先有一篇真实文章、一条完整链路。等文章、图片和链接都能正常打开，再决定下一步改哪里。
2. 注入个人设计 token：把“我喜欢”变成可执行的约定
Important
架子能跑以后，接下来才是“让它像我的网站”。
我喜欢暖一点的纸张底色、灰绿色、克制的排版和适当留白。首页可以有一点杂志感，长文阅读则希望接近熟悉的飞书文档。TL;DR 单独做成知识卡片，带一点博物馆出版物的感觉。
只说“高级、简洁、有质感”还不够。我会把参考图和具体偏好一起交给 AI，再通过页面确认它理解到了哪一步。 比如纸色太深就调浅，太浅、没有纹理就补一点质感；纸边要有邮票齿，但下沿接图片的位置必须平直。
🎨 下面是根据这次需求和本站实际样式，整理出的 个人设计 token。这里既有颜色、尺寸，也有排版约定，可以直接作为下一次做页面的起点。
yaml
气质: 安静、自然、有纸张感，像个人记录与小型艺术出版物
页面底色: '#f9f8f4'
主文字: '#293b33'
次要文字: '#788078'
强调色: '#53745a'
分隔线: '#dedfd5'
首页: 时间线；标题摘要在左、配图在右；工具入口独立展示
字体: 首页大标题允许衬线；长文使用现代无衬线字体
正文: 接近飞书文档，层级清楚、间距紧凑、适合长文
TLDR:
结构: 上方邮票纸承载摘要，下方接风景版画
纸色: '#faf7ee'
纹理强度: 0.09
内框: 1px细线，透明度0.24，内缩18px
邮票齿: 3.6px，仅顶部和两侧，下沿平直
上下留白: 35px
配图显示高度: 205px
卡片最大宽度: 780px
选图: 素材库随机，也可以单独指定
这些数值是当前实现的默认值；不同区域和窄屏会按阅读需要调整。
下面把起点和定制结果放在一起看 👇🏻：左边是官方模板当前演示，右边是本站首页。重点看配色、标题留白，以及文章与工具如何分区。
左右保持相同截图宽度和展示高度。左图取自官方当前演示站，用于对照模板的默认样式，并非本站刚克隆时的历史截图；右图为本站本地页面实拍。点击图片可以放大。
Tip
参考图最好说明“参考哪一部分”。 比如这次的博物馆风格，主要用于 TL;DR 的纸张、边缘和配图；整篇文章仍按飞书式长文阅读来排。一个参考图里可以有多个好元素，不必整页照搬。
3. 三个定制需求
① 时间线样式与博客展示样式
主页需要适合“随手记一条，再慢慢积累”。我希望文章按时间排列，每条能直接看到标题、摘要和配图，点进去读完整内容。
所以首页逐渐改成了现在的样子：左侧标题和摘要，右侧配图，日期单独露出来；文章编辑后，时间线按最近更新时间排序。工具入口在旁边，和文章形成两个阅读区域。
文章页的关注点不同。先看到标题和摘要，往下才是正文；桌面上把 TL;DR 放到标题右侧，目录默认打开，也允许隐藏。隐藏后，正文在整个页面里居中。
同样是“好看”，首页重在浏览，正文重在读下去。把这两个场景分别说明，AI 才知道哪些地方要紧凑，哪些地方可以留白。
② 博客内保留飞书排版：Markdown + HTML
我已经在飞书里写了一些长文，不希望搬到博客以后，颜色、分栏、表格和折叠结构都丢了。
这一步踩过坑。只拿 Markdown 导出，并不能保留全部飞书排版。 后来改为读取更完整的文档结构，用 HTML 表达分栏、表格和折叠，再配上本站统一的正文样式。
最终采用的是 Markdown + HTML 混排：普通段落、标题、列表尽量用 Markdown；复杂布局用 HTML 补上。这样既方便写，也能照顾已有长文。
例如，一段强调文字可以写成：
html
<p>普通内容用 Markdown 写，<strong>复杂排版再补 HTML</strong>。</p>
分栏、长表格和代码块则按各自的用途处理。表格宽就横向滚动；代码保留换行、高亮和复制；单张图片限制最大宽度，点开再看细节。它们需要在真实文章里检查，不能只看一个空白模板。
③ 接入个人工具展示
除了文章，我也希望主页能放自己做过的小工具。
本站已有大衍筮法和此刻等入口。这里的需求是给它们一个统一、容易找到的入口，并让博客与原有应用的路径能一起工作。
所以导航里有小应用，首页也留了工具区域。点开后再进入对应应用。个人主页由此同时承载两类东西：一类是写下来的记录，一类是可以直接使用的作品。
4. 持续优化：看到具体问题，再改一项
第一版能用以后，我没有一次列出全部细节。很多反馈就是一张截图，加一句“这里想改成这样”。
下面几项，都是这次建站里实际发生过的调整。红色框和数字只标出需要定位的细节；不影响理解的画面保留原样。
更新 01 · 时间线，从文章列表变成图文记录
最早先把文章列出来，后来补上右侧配图，再把日期和标题之间的层级拉开。现在一条记录能同时提供时间、主题和视觉线索。
图中 ① 日期、标题和摘要；② 右侧配图；③ 独立的小应用入口。这几个位置分别解决“什么时候写的”“写了什么”和“还有什么可以用”。
更新 02 · TL;DR，做成一张有纸张质感的知识卡片
先看最后留下来的卡片：上方是带细内框的邮票纸，下方接一幅风景版画。后面的每次取舍，都围绕这个“上文下图”的结构展开。
① 卡片下沿平直接图，细内框约束文字区域；② 文章编辑后显示更新时间。
🖼️ 配图这条线：先看见方向，再筛选素材。
最初我先让 AI 画，得到了一张北欧森林湖景。色彩和氛围接近想象，但越看越觉得“精细得太假”。这张当时的页面截图保留了那个起点，图片后来已经弃用。
随后，我补了小红书《灵感 + Prompt 收集 07｜博物馆杂志》的参考图，指出“上面的小框参考背景图，下面的一排参考样式和图片”。这比一句“北欧风”具体得多：要的是松枝、黄绿蓝的天空、版画的平涂与纸张颗粒，不是照片般的森林。
下面是当时提供的参考图，以及据此调整后的第二版配图。参考图上的红框是当时就有的，分别指向色彩气氛和邮票卡片。
我同时给出了这段风格 prompt（当时提供的原文）：
text
Create a premium editorial digital design inspired by contemporary museums and art magazines. Use elegant serif typography combined with modern sans-serif fonts, large whitespace, refined grid layout, curated image galleries, archive-style information hierarchy, and luxury cultural branding aesthetics. The visual language should feel like a digital museum archive, featuring sophisticated typography, subtle colors, minimalist UI components, and a timeless editorial atmosphere.
这段描述管的是整体气质。落到配图时，还要把“松枝从左上进入”“黄绿过渡到蓝色天空”“主体放在中间以适应横幅裁切”等构图要求补进去，才能避免只得到一张泛泛的艺术海报。
🔍 接着我换了策略：“帮我搜罗一些这种风格的图片，而不是生成，给我来 10 张。”于是有了下面这组馆藏候选，来源是东京富士美术馆的作品页面；它们是现成版画，不是再次生成的图片。
✅ 我选了 1、2、4、8、10，分别是木崎湖、铃川、武藏野、春日岚山和从天草望云仙岳，再加上第二版松枝图。筛选还没有结束：木崎湖右边裁掉，武藏野去掉边，铃川向上一点，第 10 张把船移到画面大致中央。选择一幅作品与选择它在卡片里的构图，是两次判断。
邮票纸这条线：从口述到参数，再到可视化调节。
一开始，我用自然语言描述上方纸张：“邮票长度可调”“淡暗黄、有皮革纹理”；然后把风格 prompt 与结构要求交给 AI。等页面出来，再逐项指出颜色、纹理和齿边的问题。下面几组原话记录了这条收敛路径。
🔎 以下是与 Codex 对话的原话节选，省略中间回复与其他话题，按调整对象排列。
“之前的上面的邮票纸颜色有点深了，现在的又太浅、没有纹理”
“之前的纸边缘锯齿好。”
这一轮同时涉及色值和纹理强度两个变量。仅仅调浅底色，会把纸张变成一块近乎纯白的平面。后来把它们拆开，分别用纸色 #faf7ee 和纹理强度 0.09 控制，预览页再留出调节入口。
“邮票纸下面一圈不应该有锯齿、影响下面的图。”
“加一圈很细的内框（初版那种），不要现在‘淡松枝印记’”
这一轮是在确定组件边界：顶部和两侧保留邮票齿，下沿必须平直，才能和图片接起来；纸面用内框收束文字，不再额外叠装饰。最终内框内缩 18px，透明度 0.24，齿的尺寸为 3.6px。这些数字不是放之四海而皆准的美学公式，而是这张卡片在当前字号、宽度下的取舍。
“不是固定图。图随机，只看其他配置”
“北欧森林湖景这张丢弃。”
这一轮把样式和素材选择解耦：示例 HTML 中出现的图片 ID 不应变成全站固定图；“精细但太假”的森林湖景被弃用，素材库留下版画与馆藏风景。这里最容易被 AI 误解的，恰恰是示例中的偶然细节。我要说清哪些值是约定，哪些只是当时展示的一张图。
现在每篇可以随机选图，也能指定某一张；纸张跟着摘要自然伸长。桌面上放到标题右侧，先把文章的大意交代清楚。
🎛️ 来回描述到这里，继续只靠“浅一点、再浅一点”效率很低。我提出：“上面颜色浅一点，在预览页里给我若干配置的手柄。”于是有了可视化调试页：纸色、纹理、内框、留白、邮票齿、图片高度和卡片宽度，都能边拖边看。
这张是中间调试状态，滑块上的数值不是最终配置。最后我把确认的值贴回对话，明确“图随机，只看其他配置”：
css
--tldr-paper-color: #faf7ee;
--tldr-texture: 0.09;
--tldr-frame-opacity: 0.24;
--tldr-frame-inset: 18px;
--tldr-padding: 35px;
--tldr-bottom: 35px;
--tldr-tooth: 3.6px;
--tldr-art-height: 205px;
--tldr-width: 780px;
这一步把审美偏好变成了可以保存、重放的配置。自然语言负责提出方向，可视化手柄负责比较相邻方案，最终 token 负责把结论交回代码。三种方式接力，才不用每次从“我想要一种感觉”重新开始。
更新 03 · 图片裁切，做成自己也能操作的后台功能
✂️ 图片的构图不是每次都想靠一句话来回改。于是把 TL;DR 样式编辑接进本机后台，给纸色、纹理、内框等参数留出调节入口，并支持上传图片和重新裁切。
① 裁切比例固定为 14:5；② 保存裁切后再用到文章。 原图留在本机，裁切件进入素材库。展示窗口的高度仍可调节，最终构图要回到文章里再看一遍。
更新 04 · 长文阅读，处理表格、代码和目录的实际摩擦
📐 后台曾经显示四列都是 25,25,25,25，实际宽度却不一样。原因有两个：输入框没有读取真实列宽，前台又强制把表格压进容器。
下面左图是当时的失败截图，右图将同一份历史正文和已记录列宽，放入当前组件重新渲染。重点看“怎么用”和“效果”两列：不再为了挤进一屏，把字压成竖排。
后来改为保留表格总宽度，超出部分横向滚动；输入框读取实际比例。代码块补上行号、语法高亮和左上角复制按钮，超过 15 行默认渐隐，可展开。目录则可以隐藏，让正文居中。
代码块也要对照看：下面用同一段配置演示基础展示与当前组件的区别。左侧是基础 <pre> 的重建示意，并非当时实拍；右侧是当前组件的实际渲染。
左上角复制得到完整内容，底部展开只改变展示高度。 横向滚动保留代码原始换行；纵向收起避免长配置占满几屏。二者解决的是不同的问题。
更新 05 · 编辑先有安全边界，发布再减少无意义等待
🔐 登录首先解决的是谁有权修改文章。 公开阅读与主人编辑不能是同一套权限：如果写接口暴露到公网却没有认证，知道地址的人就可能修改内容。
本站当前的实际边界是：公开页面只供阅读，“主人编辑”跳到自己电脑上的后台；服务监听本机地址，并在编辑和保存接口检查登录。本机监听限制可访问范围，登录认证再确认编辑者身份。
密码登录补上了编辑权限校验。勾选“保留登录”后，14 天内无需再输入密码；默认不勾选，只在当前页面有效，再次打开或刷新需重新登录。修改密码会让旧登录失效。
另一个痛点是发布等待。 当时我的反馈是“上传很慢，希望能计算 diff，只传 diff，服务器处理”。只改几行文字，却把没变化的图片和其他静态文件再传一遍，等待既长又没有意义。那次没有留下可靠的秒级计时，所以不能写成“从几分钟缩短到几秒”。
⚡ 解决方案是把“构建整站”和“传输整站”分开：本机照常构建，上传时校验差异，只传变化内容；服务器复用没变的文件，组装好新版本后再切换。
| 核验场景 | 有记录的数据 | 能说明什么 |
|---|---|---|
| 静态站总体积 | 约 353MB | 全量重传的负担 |
| 内容未变，重复发布 | 文件内容 0 字节；清单约 60KB | 未变化内容不再重复上传 |
| 修改三篇页面 | 实际差异内容约 2.2KB | 修改少量正文不必带着整个素材库传输 |
| 前后端到端耗时 | 当时未计时 | 不据此宣称几倍加速 |
减少传输量解决了已确认的浪费；完整耗时还包含构建、校验、网络往返和服务器切换，应该另行计时，而不能拿字节数代替时间。
5. 把协作经验留下来：留下判断，不只留下步骤
左图把协作画成从草图到成品、再到档案的过程；右图把本节的四个判断摊开：先跑通、再精修，让偏好变成约束，按判断能力分工，并让经验改变下一次行动。
回头看，“确定做什么 → 找 repo → 定制 → 微调 → 上线”当然没错，但它和“备料、下锅、出菜”一样，说明了顺序，却没交代火候。真正值得留下来的，是每一步在消除什么不确定性，以及凭什么判断可以往下走。
先做一条完整链路，再加枝叶
找仓库时，最容易被功能清单吸引。可对这个站而言，更早需要回答的是：我的真实文章能不能被正确显示，能不能从本地送到自己的域名？
🧪 因此，第一篇搜狗排障记录不只是内容，也是试金石。它带着实际的标题、图片、代码和操作说明，能暴露空模板看不到的问题。只有一篇真实文章完成了预览和发布，“这个架子适合我”才开始有依据。
这可以理解为“先立其本”。起步阶段追求的是链路完整，随后才是局部精致。 如果连发布都还不通，先纠结纸张纹理，后续换架子时很可能推倒重来；链路跑通以后，再认真调那 0.09 的纹理，才有落脚之处。
模糊的偏好，通过反馈逐渐变成约束
我最初能说出“像博物馆杂志”“有纸张感”，却未必能直接给出边框和间距。看到页面以后，才知道“这个太白”“底边的齿切断了图”。这不是需求表达失败，而是设计本来就有一个从感受到辨别的过程。
🎯 关键在于，每轮反馈都应该缩小下一轮的自由度。说“还是不好看”，AI 可以向任意方向重画；说“保留顶部与两侧的齿，下沿平直”，就确定了一个以后不必反复争论的边界。
TL;DR 的多轮对话最后留下的，不应只有成品截图，还应包括四层约定：气质是暖纸与版画，结构是上文下图，参数是颜色、纹理和间距，素材则是可替换的图库。下次更换配图，只动素材层；想调整纸张，只动参数层。把这些层次分清，局部修改才不至于牵一发而动全身。
人和 AI 的分工，应围绕“谁能判断”来划分
AI 能很快改出几个版本，但“是不是我想要的”并不在代码里。我更了解自己的阅读习惯：表格宁可横向滚动，也不要挤到一行一个字；知识卡片可以有装饰，长文正文则要克制。
与此同时，我也不能把“看起来没问题”当成全部验收。列宽是否保存、复制是否拿到完整代码、窄屏有没有溢出，这些可以交给 AI 用明确条件检查。我负责提供价值判断，AI 负责把判断落成实现和可重复检查；最后仍要回到真实页面相互校准。
用实用主义的眼光看，一个想法是否有效，要看它在使用中产生了什么后果。对应到这里，“做出了开关”只是实现，“隐藏目录后正文确实居中、阅读更顺畅”才是效果。这个区分，比多写几句“高质量、精美”更有用。
一次修改可以结束，一条经验应该改变下一次行为
🧭 沉淀最怕只存了一堆文件，却没有减少下一次的重复解释。
我会用一个问题检验规则是否值得留下：如果没有它，下次会不会再次做错，或再次来回解释？ 比如“图片标注用红色且只标必要位置”能改变下一篇文章的交付；“今天把边框改了一次”通常只能留在本次记录里。
因此，BLOG_SOUL.md 保存稳定的写作偏好，设计 token 保存视觉约定，错误索引保存会复发的问题，README.md 负责告诉下一次协作从哪里开始。它们各司其职，避免同一条约定散落在几个文件里、改了这里又忘了那里。
源码用 Git 管，博客正文、图片和视频作为数据另行保存，也是同样的分界：程序可以迭代，内容应当持续拥有。这个做法与在业务场景里留下背景、流程和错误相通；而从真实困扰走向 AI 自动化讨论的是另一面——当一项动作反复发生，怎样让经验成为可以执行的工作流。
总结：快在借力，稳在判断
Important
💡 先借现成仓库跑通真实内容，再用具体反馈把个人判断落成可复用的约定。AI 缩短实现的距离，人要守住目标、取舍和验收。
这次建站，现成仓库省去了通用功能的起步成本，AI 缩短了从想法到页面的距离。但速度之外，更有价值的是把“我喜欢什么、怎么才算改好”一点点说清楚，并留下来。
如果重新来一次，我仍然会先拿一篇真实文章跑通发布，再定制影响阅读的结构，最后下探到纸色、裁切和交互细节。顺序可以粗，验收必须具体；该大处着眼时不被一个像素绊住，该小处着手时也不拿“差不多”糊弄自己。
这套方法适合我这样的个人站：需求可以边使用边澄清，修改成本较低，作者能亲自检查成品。它不能直接替代多人系统里的权限设计、业务验证和团队协作约定。
本站最终留下的不只是一个页面：搜狗的答案有了出处，工具有了入口，下一次想法也有了可以接着生长的地方。借 AI 之力，把自己的判断留在作品里，也留给下一次协作。