风格这一步很容易被忽略，但它一旦错了，后面页面写得再完整，也会很像模板。

我觉得个人网站和普通产品页面最大的区别在于，它带着很强的个人气质。一个个人博客如果只是好看，但看不出它属于谁，那其实是不够的。

所以 Idea2Site 的第一层是 方向发现。这一步看起来像是在聊审美，其实是在决定后面的结构怎么长。

这一层主要由两个 skill 负责：

search-blog-theme
find-style-references

它们看起来都在做“找风格”，但职责不一样，这里如果不拆开，Agent 很容易把“找参考”和“直接复刻”混在一起。

search-blog-theme 负责从模糊偏好里提出几个可能的主题方向。

find-style-references 负责把选定方向落到真实网站和可执行设计 brief 上。

如果类比一下：

search-blog-theme：帮用户想清楚“我可能想要什么”
find-style-references：帮 Agent 想清楚“这个方向具体怎么做”

1. 为什么方向发现要单独做？

最开始我以为，用户给几个关键词就够了，毕竟“安静一点”“技术感一点”听起来挺明确的。

比如：

安静一点
技术感一点
适合写研究笔记
视觉低调一点

但是对 Agent 来说，这些词其实很危险。

因为“安静”可以有很多种，不同理解最后会生成完全不一样的网站。

可以是极简白底黑字； 可以是自然杂志感； 可以是研究主页的低噪声排版； 可以是 Obsidian 数字花园； 也可以是旧档案柜一样的个人资料库。

如果不先把方向说清楚，Agent 很容易回到自己最熟悉的模板：

顶部 nav
大 hero
一句 slogan
三张卡片
项目 grid
蓝紫渐变

这就是我最想避免的东西。它看起来完成了，但气质很飘。

因为个人网站和 SaaS 官网有明显区别，它的第一屏最好直接承载个人身份、内容入口和写作气质。

我更希望它一打开就能看到有用的信息：

  • 这个人是谁；
  • 最近在写什么；
  • 做过什么项目；
  • 这个站适合怎么浏览；
  • 它为什么和别的网站不一样。

所以方向发现层的目的在于先确定这个网站的叙事方式。先确定这个站像一本笔记、一个档案柜、一个研究主页，还是一个项目仓库，后面的布局才有方向。

2. search-blog-theme：把模糊审美变成主题方向

search-blog-theme 的定位是主题发现和审美塑形。说简单点，就是先帮用户想清楚“我到底想要一个什么样的网站”。

这一层先把问题收窄到一个点：

用户到底适合什么样的个人站方向？

它的输入可以很松散，这一点很适合真实用户，因为大部分人一开始也说不出完整设计稿：

  • 用户身份；
  • 网站用途；
  • 内容类型；
  • 受众；
  • 喜欢的关键词；
  • 截图、URL、Figma、v0、GitHub theme；
  • 对某些风格的排斥。

它的输出是 3-5 个主题方向，以及一个更推荐的方向。

2.1 为什么要区分概念方向和真实模板？

这里有一个很重要的原则：

概念方向要诚实标注，真实模板要带 URL。

比如用户说想要“自然一点的技术博客”，Agent 如果随手编一个模板名：

推荐使用 Forest Dev Notes 主题。

这个主题如果查不到，后面的实现就会建立在一个虚假的参考上。

所以 search-blog-theme 里明确区分：

Verified reference：有 URL 的真实参考
Conceptual direction：根据用户偏好推导出的概念方向

这点我觉得很关键。因为很多 Agent 推荐类任务的问题就在于，它把“我觉得可以这样做”伪装成“我找到了一个现成东西”，这会让后面的实现直接建立在一个虚假的参考上。

在这个项目里，概念方向可以存在，但要诚实地说它是概念方向；如果说是某个模板或网站，就必须有 URL。

2.2 主题方向要超过风格标签

search-blog-theme 里还有一个我很喜欢的规则：

当用户想要“独特一点”“有记忆点”的网站时，主题方向需要超过宽泛标签。

比如：

弱：terminal portfolio
强：一个旧电脑档案馆，用来存放研究日志和项目文件

弱：minimal blog
强：一本实验田野笔记，记录阅读、实验和项目痕迹

弱：dark developer site
强：一个私人操作系统仪表盘，管理文章、构建记录和公开日志

也就是说，一个好的方向应该有一个“世界”。这个“世界”不需要很复杂，但至少要让 Agent 知道内容应该怎么摆。

如果只停在这些词上：

极简
复古
暗色
学术
像素风

我更希望它变成：

个人操作系统
研究档案柜
实验笔记本
野外观察手册
小型项目仓库
数字花园地图

这个变化很小，但对后续建站非常重要。

因为只说“极简”，Agent 很难知道首页该怎么组织。

但如果说“研究档案柜”，它就可以自然想到：

  • 最近记录；
  • 项目抽屉；
  • 标签索引；
  • 归档列表；
  • 低对比度分隔线；
  • 密度较高但不乱的排版。

2.3 候选主题家族

这个 skill 里内置了几个候选主题家族，作为启发，避免固定模板化。

包括：

方向适合内容
Minimal Notebook技术笔记、学习记录、轻量主页
Developer Portfolio项目展示、GitHub 工作、求职协作
Research Homepage研究兴趣、论文、项目、CV
Digital GardenObsidian 笔记、长期知识网络
Personal Operating System开发者、研究者、实验型个人主页
Archive Or Field Notes项目历史、阅读笔记、长期学习
Playful Personal Site更表达个人性格的数字小空间

这里的意思是提醒 Agent：个人站有很多叙事方式，避免只剩下“作品集模板”这一条路。

2.4 search-blog-theme 的成功标准

这个 skill 做完之后，应该达到一个状态：

用户或后续 Agent 已经知道要往哪个方向做。

具体来说：

  • 有 3-5 个候选方向；
  • 推荐方向足够具体；
  • 如果提到真实参考，就有 URL；
  • 知道应该借鉴什么；
  • 也知道哪些东西要避开；
  • 可以交给 find-style-references 或 make-personal-site。

这一步如果做不好，后面再强的建站 skill 也会偏。

因为它可能会精确地执行一个错误方向。

3. find-style-references：把方向落到真实参考

如果说 search-blog-theme 是帮用户定方向，那么 find-style-references 就是帮 Agent 做设计研究。

它解决的问题是：

这个方向到底长什么样？
哪些真实网站可以参考？
哪些设计语言可以借？
哪些东西需要避开？
最终交给 make-personal-site 的 brief 应该怎么写？

我觉得这个 skill 的存在很有必要。

因为很多时候，方向虽然定了，但还是太抽象。

比如：

自然技术博客
安静研究主页
复古终端档案
粗粝 brutalist portfolio

这些词直接交给建站 Agent，它还是可能自己脑补。

所以需要在建站前找真实参考。

3.1 多搜索角度

find-style-references 的搜索要分成几路。

比如方向是“自然技术博客”，它应该从多个角度搜索：

natural developer personal website
calm technical blog personal site
digital garden nature inspired design
research homepage personal website minimal
personal blog template notes projects

这样做的目的在于避免被第一批结果带偏。

一个词搜出来的参考可能都属于同一种审美，而多个角度能看到不同可能性。

3.2 真实参考服务于抽象

这个 skill 里有一个明确边界：

它和 copy-website-style 分工不同。

如果用户给了一个具体 URL 并且想高保真复刻，那应该走 copy-website-style。

find-style-references 的任务是找多个参考，然后抽象出可复用设计语言。

所以这种说法会出问题：

我们就照着 A 网站做。

应该说：

A 的导航层级不错；
B 的文章列表密度合适；
C 的项目展示方式适合你；
D 的移动端处理值得借鉴；
但是它们的个人身份、文章内容、素材和品牌要留在原站。

最后产出的是 build brief。

3.3 浏览器检查

这个 skill 要求优先用真实浏览器观察参考网站。

因为搜索结果和截图只能看到表面，很多关键体验必须打开页面才知道：

  • 第一屏到底显示什么；
  • 滚动时有没有 sticky nav；
  • 移动端导航怎么折叠；
  • 文章页宽度和行高是否舒服；
  • 卡片 hover 是否影响阅读；
  • 是否有主题切换；
  • 页面是否过度依赖动效；
  • 内容密度在移动端是否崩。

缺少浏览器工具时，就把限制说明白，再用截图 / 源码 / 搜索结果作为 fallback。

这其实又回到这个项目的一个基本态度：

验证状态要诚实。

3.4 设计 brief 应该包含什么

find-style-references 最重要的输出是给 make-personal-site 的 brief。

这个 brief 需要具体，简单写成下面这样还不够：

风格简洁、安静、有技术感。

它应该具体到可以实现。

比如要包括：

  • site identity：这个站一句话像什么；
  • page scope：首页、博客、文章页、项目页、关于页等；
  • first screen：第一屏先显示什么有用内容；
  • layout：导航、列宽、列表、侧栏、卡片；
  • visual system：颜色、字体、间距、边框、图片、图标；
  • interactions：主题切换、过滤、搜索、hover、copy button；
  • responsive behavior：移动端优先展示什么；
  • avoid list：原站身份、资产和品牌痕迹。

这样的 brief 才能把“审美研究”变成“工程输入”。

4. 两个 skill 的配合关系

我觉得这两个 skill 的关系可以这样理解：

search-blog-theme
  解决：我想要什么方向？
  输出：主题方向和推荐路径

find-style-references
  解决：这个方向具体怎么落地？
  输出：真实参考和 build brief

如果用户完全没有想法：

search-blog-theme -> find-style-references -> make-personal-site

如果用户已经有方向：

find-style-references -> make-personal-site

如果用户给了具体网站要复刻：

copy-website-style

这里最重要的是分清场景。

把一个具体网站当作 loose reference，可以； 但是如果用户要求“就像这个网站一样”，那就应该进入复刻逻辑。

反过来，如果用户只是喜欢某类气质，直接复刻某个站会把问题带歪，最后很容易生成一个缺少用户自己的东西。

5. 一个例子

假设用户说：

我想做一个适合放研究笔记和项目记录的个人博客，不想太营销，最好有一点档案感。

search-blog-theme 可能会给出几个方向：

1. 研究档案柜
2. 极简学术主页
3. 数字花园笔记站
4. 个人操作系统

然后推荐“研究档案柜”。

接着 find-style-references 会去找真实参考，观察它们的：

  • 首页结构；
  • 文章列表；
  • 项目展示；
  • 侧栏；
  • 字体和留白；
  • 移动端处理；
  • 交互是否克制。

最后给到 make-personal-site 的 brief 可能是：

做一个低噪声的研究档案式个人站。
首页第一屏直接展示身份、最近笔记和项目入口。
整体使用高可读 serif/sans 混排，弱边框，较高信息密度。
博客列表按时间归档，文章页保持窄列阅读。
项目页像档案卡片，营销式大卡要收住。
移动端保留最近文章和项目入口，导航收缩为简洁菜单。

这时候再开始写网站，结果会比直接根据“安静、技术感”生成靠谱很多。因为 Agent 已经知道自己要模仿的是一种内容组织方式，几个很空的形容词已经被落到具体结构里了。

6. 这一层解决的核心问题

方向发现层解决的是一个很容易被忽略的问题：

Agent 经常卡在方向判断，页面语法只是其中一小部分。

跳过这一层时，后面大概率会出现：

  • 风格泛化；
  • 第一屏无用；
  • 个人站被写成产品 landing page；
  • 参考网站只学到表面；
  • 用户身份和内容承载方式不匹配。

有了这一层之后，后面的建站 skill 不需要从零想象，它可以按照一个更明确的方向实现。

这也是为什么 Idea2Site 没有直接从 make-personal-site 开始。

写代码之前，先知道要写什么。

这听起来很朴素，但对 Agent 来说非常重要。