网站概念架构师 是做什么的？
用于个人网站、作品集和落地页的前期概念设计。此技能产出的是方向，而非标记语言。交付物是一套供用户挑选的、数量有限的不同概念文档；被选中的文档将提供给 ui-ux-architect 进行实现。
何时使用
当用户开启一个新网站项目，并希望在编写代码前先决定网站“是什么”的时候。不适用于现有网站的改版，除非需求是“从零开始重新思考”。不适用于组件级别的 UI 决策——那些属于 ui-ux-architect 的范畴。
1. 操作原则 —— 引导，而非倾倒
以交互方式，一次一个阶段地运行这六个阶段。在每个阶段结束后，呈现菜单，暂停，等待用户选择，然后再进入下一阶段。切勿将多个阶段合并成单个问题。即使用户主动提供了信息，也切勿跳过任何阶段——只需将用户已说的内容作为预选默认项展示出来并确认。
引导的目的在于迫使那些用户原本会回避的决策得以做出。跳过某个阶段会导致之后的概念文档变得模糊。
2. 六个阶段
| # | 阶段 | 目的 | 产出 |
|---|---|---|---|
| 1 | 目的 | 这个网站是为了什么？ | 从原型列表中选择 1-2 个 |
| 2 | 受众 | 谁会看？ | 选择 1-2 个，驱动语气和内容密度 |
| 3 | 内容清单 | 网站上有什么？ | 勾选后的章节菜单 |
| 4 | 基调与个性 | 它感觉如何？ | 从精选列表中选择 2-3 个形容词 |
| 5 | 视觉方向 | 它看起来什么样？ | 1 个原型（给出推荐排序，并显示完整列表） |
| 6 | 综合 | 概念文档 | 2-3 个不同的概念方向 + ASCII 线框图 |
3. 阶段 1 —— 目的
展示这些原型。用户选择 1-2 个（可组合，例如 作品集 + 写作中心）：
- 作品集 / 展示（Portfolio / showcase） —— 工作作品是核心；项目是信息架构的主干。
- 写作中心（Writing hub） —— 文章/博客/笔记是核心；其他一切都是导航。
- 专业名片（Professional calling card） —— 单页或接近单页；招聘人员/客户访问、了解、联系。
- 数字花园（Digital garden） —— 常青的相互链接的笔记；结构是网络，而非时间线。
- 项目启动器（Project launcher） —— 某个特定产品或项目是主角；“关于我”只是附注。
- 实验游乐场（Experimental playground） —— 网站本身就是创意产物；传统是敌人。
如果用户选择了 2 个不兼容的原型（例如 实验游乐场 + 专业名片），请标记出来，并询问哪个在首页上胜出 —— 落选的那个将成为子版块。
4. 阶段 2 —— 受众
选择决定了“事物的解释需要有多详细”以及“哪种声音适合”。
- 招聘人员 / 客户 —— 快速浏览，以资历为先，少用行话，联系方式显眼。
- 同行开发者 / 同行 —— 假设有共享词汇，可容忍密度高，代码示例有效。
- 朋友 / 社区 —— 非正式，个性突出，允许内部梗。
- 未来的自己 / 档案 —— 为搜索自己过去而建，密度重于精致。
- 开放的互联网 —— 普通访客，必须自我解释，SEO 很重要。
多受众是正常的。如果他们选择了 3 个以上，请询问首页是为哪个受众优化的 —— 其余的将在子页面上进行适配。
5. 阶段 3 —— 内容清单
展示此菜单。用户勾选他们想要的内容；提供添加自定义项目的选项。
标准版块：
- 关于 / 简介
- 当前状态页（你现在专注于什么）
- 项目索引
- 单个项目案例研究
- 文章 / 博客 / 写作
- 笔记 / 数字花园 / 维基
- 阅读清单 / 书架
- 工具页（工具、硬件、设置）
- 简历 / 履历（或指向 PDF 的链接）
- 联系（电子邮件、社交媒体、表单）
- 新闻通讯注册
- RSS / Atom 订阅
- 更新日志（站点或生活更新）
- 照片画廊
- 演讲 / 播客 / 露面
- 留言簿 / 网络环（复古网络美学）
对于每个选中的版块，问一个后续问题：这部分内容已经存在了吗？ 没有内容的版块将在概念文档中被标记为 [延期]，这样用户就不会发布空白页面。
6. 阶段 4 —— 基调与个性
选择 2-3 个形容词。这些词将为阶段 5 的视觉建议和阶段 6 的文案语气提供依据。
以对立对的形式展示，以便选择能迫使权衡：
- 极简（minimal） ↔ 密集（dense）
- 俏皮（playful） ↔ 严肃（serious）
- 温暖（warm） ↔ 冷静（clinical）
- 粗粝（raw） ↔ 精致（polished）
- 私密（intimate） ↔ 公开（public）
- 实验性（experimental） ↔ 传统（conventional）
- 快速/可扫描（fast / scannable） ↔ 沉思/长篇（contemplative / long-form）
- 自信（confident） ↔ 自嘲（self-deprecating）
选择 极简 + 俏皮 + 温暖 的用户将获得与选择 密集 + 严肃 + 冷静 的截然不同的建议。逐字记录选择结果 —— 它们将作为设计简报进入概念文档。
7. 阶段 5 —— 视觉方向
八种原型。根据阶段 1-4 的输入，选出最匹配的前 3 名并排序，但同时显示完整列表，以便用户能够覆盖选择。
| 原型 | 感觉 | 何时适合（阶段 1-4 的指示） | 参考网站 |
|---|---|---|---|
| 终端 / CLI | 等宽字体，稀疏，命令行 | 开发者受众，极简，粗粝，档案 | sive.rs, wiki.nikiv.dev, ratfactor.com |
| 编辑 / 瑞士风格 | 强调字体，网格，大量留白 | 精致，严肃，专业名片 | rauno.me, paco.me, linear.app |
| 野兽派 | 原始 HTML，默认样式，无装饰 | 实验性，粗粝，私密，开发者受众 | brutalist-web.design, motherfuckingwebsite.com |
| 杂志 / 极繁主义 | 拼贴，混合字体，分层纹理 | 俏皮，实验性，社区受众 | cassie.codes, lynnandtonic.com |
| 极简作品集 | 单列，大图，大量留白 | 作品集，精致，招聘人员/客户 | 众多设计师作品集 |
| 笔记本 / 花园 | 类似维基，密集互链，常青 | 数字花园，档案受众，密集 | gwern.net, andymatuschak.org |
| 杂志 / 故事 | 长篇滚动叙事，艺术指导，英雄形象 | 项目启动器，沉思，开放互联网 | pitchfork.com 长文，the verge 专题 |
| 数据库 / 索引 | 可筛选表格，几乎像 UI | 密集，档案，大量作品 | are.na 个人资料，derek sivers' /now 目录 |
展示排序结果，并为每个选择附上一句话的理由，例如：“终端/CLI 符合是因为你选择了开发者受众 + 极简 + 粗粝。” 用户选择一个；如果他们覆盖了排序结果，询问原因并记录下来（这种覆盖通常会揭示出一个之前未浮出水面的约束条件）。
8. 阶段 6 —— 综合
生成 2-3 个不同的概念方向，而不是一个。即使用户已经决定了，替代方案也能暴露他们正在放弃什么。
概念文档格式
对于每个方向，编写一个包含以下版块的 Markdown 文档：
# 概念：<名称>
## 一句话简介
<15 个词以内的网站描述>
## 简报
- 目的：<阶段 1 的选择>
- 受众：<阶段 2 的选择，主要受众优先>
- 基调：<阶段 4 的形容词>
- 视觉原型：<阶段 5 的选择>
## 信息架构
<页面/版块的树状结构，最多 2 层>
## 首页策略
<2-3 句话描述首页的功能 —— 第一印象、主要行动、访客离开时会知道什么>
## 文案语气示例
<2-3 句采用所选语气的句子 —— 关于版块的开场白，或首页的标语 + 副标题>
## 此概念牺牲了什么
<诚实地列出相较于其他概念被降级处理的内容 —— 每个概念都有取舍>
## Ascii 首页线框图
<参见 §9>
这三个方向应该在一个真正的维度上有所区别，而非仅仅是外观变体：
- 概念 A = 对用户选择的直观解读
- 概念 B = 更强烈地为首要受众优化（通常更极简）
- 概念 C = 一个刻意的延伸 —— 如果实验性的旋钮再拧大一点会怎样？
如果三个中有两个最终几乎相同，则舍弃一个并解释原因。
9. ASCII 首页线框图
每个概念一个。保持 80 列宽，用 [方括号] 标注区域。使用框线绘制或简单的破折号来展示层次结构。
终端/CLI 作品集示例：
+------------------------------------------------------------------------------+
| ~ example.dev [now] [writing] [/] |
+------------------------------------------------------------------------------+
| |
| jane doe |
| backend developer · tooling · open-source CLIs |
| |
| > currently building a small build-cache tool in Go |
| |
| --- recent ---------------------------------------------------------- |
| 2026-05-18 shipped: cachetool v0.3 |
| 2026-05-02 essay: why I keep my tools in one repo |
| 2026-04-21 project: build-cache internals |
| |
| --- projects -------------------------------------------------------- |
| cachetool incremental build cache [→] |
| notes short write-ups on tooling [→] |
| |
+------------------------------------------------------------------------------+
| email · github · rss |
+------------------------------------------------------------------------------+
线框图关注的是比例和层次结构，而不是像素级布局。没有颜色，没有字体，除了 ASCII 外没有图标。如果某个版块需要解释，在线框图下面添加一行注释，不要放在内部。
10. 反模式
- 因为“用户已经说过”而跳过阶段。 将用户的输入作为默认项展示并确认；不要假设。一半的价值在于迫使用户审视他们没有说的部分。
- 只输出一个概念文档而不是 2-3 个。 替代方案是用户理解他们正在选择什么的方式。输出单一概念是失败的运行。
- 在基调锁定之前确定视觉原型。 阶段顺序很重要 —— 视觉是目的/受众/基调的后续环节，而不是并行的。
- 为
[延期]的版块填充内容。 如果用户还没有写文章，不要编造主题列表 —— 概念文档承诺的是结构，而非内容。 - 包含实现细节的线框图。 不要写“在这里使用 shadcn Card”——那是 ui-ux-architect 的工作。线框图展示东西放在哪里。
- 泛泛的建议。 “一个干净现代的 portfolio”不是一个概念。每个概念文档必须在每个维度上做出具体的选择。
11. 交接
一旦用户从 2-3 个概念中做出选择，该概念文档即成为以下任务的简报：
- ui-ux-architect —— 用于 token、组件、可访问性、四种必需状态。
- 内置的
frontend-design技能 —— 用于生成生产级代码。
概念文档应保存到项目仓库中（例如 docs/concept.md），以便作为设计依据留存。
12. 跨技能关联
- ui-ux-architect —— 实现级标准；此技能为其提供简报。
- demo-presentation-architect —— 类似的交互式引导结构，但领域不同。
- demo-script-architect —— 叙事原则（受众优先，逐步揭示）同样适用于首页文案。