Site Craft

---
name: site-craft
version: 0.5.0
description: NoDesign 站点设计方法论 —— 静态站点（手写起步，CDN 库与构建按需），先把用户脑子里的感觉翻译成一个真实存在的风格名给他挑，再对齐一页的气质，然后铺开全站。含骨架推导、风格命名与翻译词典、排版与色彩系统、图像手法（抠图叠层）、中文排版基线、固定画幅页面（海报 / 笔记图 / 歌词页 / 演示，画幅按题材默认不先问）、反默认清单、构建道配方（React / vite / Tailwind / 组件库站点）。当用户要做网站 / 官网 / 个人站 / 落地页 / 作品集 / 博客 / landing page / 多页站点、海报 / 长图 / 演示 / 单页报告，或要做带功能的站（登录 / 列表 / 表单 / 后台 / 管理界面 / 可运行原型，数据用模拟的），或要"能发出去的一个地址"时使用。不用于 Word 文档（那是 docx-craft）。
---

# 核心守则：先定气质，再铺页

跟 deck 同一条路：**命名 → 试作 → 给看 → 改 → 用户说"就这个" → 锚定 → 铺开**。

命名是把他嘴里的形容词换成一个真实存在的风格名（下面单独一节），它决定试作往
哪个方向做；跳过它直接试作，等于拿模型均值去猜他的心思。

区别在试作做什么。deck 试作一页封面；站点试作**首页的上半屏加一段正文** —— 站点
的气质八成由正文排版决定，只做个漂亮 hero 给用户看，等铺到正文那天他会说"怎么
跟我想的不一样"。试作放**工作区根**的 `_drafts/<名字>.html`（不是站点文件夹里的），各自渲成卡并排给用户挑。

并排的那几份是**同一个名字的不同解法**，不是几种不同风格 —— 名字在上一步已经定了，
再摆三种风格等于推翻他刚点过的锚。例外：命名那轮没收敛（两个候选他都想看），那就
跳过选名字，每个候选各做一份真试作、文件名带上名字并排给他挑；真稿的判别力比
240×140 的小样高一个量级。

## 骨架从一个问题长出来

动手前先答：**访客带着什么来，你想让他带着什么走？**（做成一件事？记住一个印象？
读完一篇？玩明白一个东西？）答案定了，骨架自己会长出来 —— 要一个动作就把全站
收束到那个动作，要一个印象就让首页本身成为印象，要人读下去就把一切让位给正文。

几个常见答案长出来的样子，当参考不当分类：

- 「做一件事」→ 单页长滚动，一句话开场 → 证据 → 一个行动点，导航可以没有
- 「认识一个人」→ 首页是气质本身，作品/文章各一页；个性 > 信息效率
- 「读下去」→ 首页即目录（标题列表就很好），正文页才是全站核心
- 「弄清一件事」→ 概览 + 分主题子页，导航要清晰，不做无谓的技术展示
- 「在里面做事」（登录 / 列表 / 表单 / 后台）→ 数据是主角，走**应用道**：数据全用
  模拟的但要真的跑起来，配方 Read `patterns/mock-app.md`

不在这几种里的站（活动邀请 / 展览预告 / 互动玩具 / 纪念页……）多得是 —— 别硬套，
回到那个问题现推。骨架跟上面撞了是巧合，没撞是正常。用户没说清他要什么，
问一句，或按 brief 推两个不同答案做进试作里给他挑。

## 先给风格一个名字

骨架定了、动手之前，还差一步：**把他脑子里那个感觉，翻译成一个现实中真实存在的
风格名**。

用户说得出的是感觉（"高级一点""有质感""别太商务"），你能执行的是名字。形容词
只会把你推向模型均值 —— "温暖克制的现代感"做出来就是那张 AI 默认落地页；"粗野主义"
做出来立刻就有样子，因为它在现实里有实物、有做法、有可仿照的对象。反默认清单
说的是**别去哪**，风格名说的是**去哪**，这两件是一对。

这一步的产出：**一个用户点过头的名字**。

1. 从他的话里提取特征：他提到的东西、举的例子、否掉的东西，以及这个站点的用途
   （个人站 / 作品集 / 同人本宣传 / 长文阅读页各有自己的风格谱系）。
   ⭐ **题材自带视觉传统的，候选从那个传统里来**：站的主题是一首歌、一个 IP、
   一个品牌、一个年代或地域时，它多半有官方视觉 / 既成的粉丝审美 —— 先搜一眼
   它的官方视觉再命名（风格词条在你脑子里，**题材的视觉事实不在**）。
   此前有一次：仅凭词条印象给出的三个候选全部偏离，用户提出
   "要不要搜搜它的设计风格"，搜索后才发现主色是另一组 —— 这一步应由你主动提出
2. 翻译成 2-4 个候选名字（词典在下面，那是你的词汇量）
3. `AskUserQuestion` 给他挑：label 就是名字，`preview` 放一张 240×140 的 HTML
   小样（全 inline style，演示这个风格的字体 / 配色 / 版式关系）。小样比找张照片
   来得准 —— 照片是别人的作品，小样是**你打算怎么做**。
   ⚠️ 别把网上的图片网址塞进 `preview`：只有以 `.png/.jpg/.webp` 结尾的地址才会
   渲染成图，其余会**静默退成一行网址**，用户看到的就是一串链接
4. 他点中的名字就是锚，试作**照着这个名字的做法做**，不是凭形容词现编

**先联想，再搜一眼，再做**。用户的需求几乎总能对上一个现实里真实存在的创作传统：
艺术运动（Bauhaus / 构成主义 / 孟菲斯 / 装饰艺术）、印刷出版传统（risograph / 活版 /
小报 / 同人志）、屏幕时代的流派（Y2K / 像素 / vaporwave）、某个年代或地域的视觉
（昭和广告 / 港风霓虹 / 苏式宣传画）、某位设计师或某本刊物的手法 —— 往宽了想，词典里
那几行只是起手的词汇量。候选想出来之后**别只凭词条印象做**：搜一眼它 —— 代表作、
典型做法、常用的字体与配色（`web_search`，要看图就 `include_images: true`），让风格从
一个名词变成你看过的事实，小样和试作才有依据。用户点名的 IP、角色、真人、产品型号、
小众品牌这类**具体对象**更是非搜不可，搜到的图挑 1-2 张最切题的喂 `generate_image` 的
`referenceImages` 当锚，在生图之前做。节制在查询次数上：每张搜回来的图都占上下文，
单回合 2-3 次查询为宜，不必为一个风格名反复翻页。

⭐ **站点还要看参考站**：风格搜完知道它长什么样，**版面结构**（开场是刊物封面
还是 banner、正文页两侧的空白怎么用、滚动有没有惯性）只有进真站才看得到。
实际对比表明：仅读搜索结果的文字描述收效有限，直接看三个参考站十分钟即可定位到具体差距。

⭐ **想到活例子就提出来，深逛之前先征询一句**。命名或试作时想到某个真站 / 某类站
正是这个风格的活例子，应主动提出 —— 例如："需要我参考一下 XX 这类站点，把它的
配色、字体和动效整理出来作为依据吗？"（聊天里一句话就行，不用开卡片）。深逛要花几分钟，
先问再展开；他说不用就直接做，他丢了链接或参考图就直接用不再问。**提议是主动的，
展开是经他点头的** —— 完全不提，等于让用户自己去想到这条路径。

**怎么看**：搜索→打开→翻内页→一趟 `browser_batch` 采回来的流程在平台协议
「上网看东西」一节，这里只补站点特有的三条：

- ⭐ `browser_capture` 不只截图：**调色板**（带用途）、**字体**（字族 + 实际字号字重行高）、
  某一块的 **CSS 片段**、**结构三数**，以及 **动效清单**（`kinds:['motion']`：这站靠什么在动 ——
  @keyframes / transition / 滚动驱动动画 / scroll-snap / sticky / GSAP+ScrollTrigger 每个
  trigger 的 start·end·scrub / Lenis 劫持 / 哪些元素滚动入场）。想看它**动起来的样子**用
  `browser_screenshot { frames:[…], scrollBy: … }`（格数 2~30：6~10 看细节、12~16 看整段、
  20~30 看长滚动的节奏）出一张胶片条 + 元素探针。"看全"一个参考站 = 版面（截图）+
  用料（palette/fonts/css）+ 骨架（skeleton）+ 动效（motion + 胶片条），四样齐了再下手。
- ⭐ 结构三数正好是下面「用户说无聊的时候」那节要数的三样。**拿参照站的数字跟你
  正在做的那个站比**：「这个站 6 种节的形状，你现在的站 1 种」比「我觉得有点单调」
  能落地得多。（那三个数是启发式，当对照不当真相。）
- 遇到人机验证无法通过时用 `browser_request_help` 请用户协助确认 —— 但先想清楚是不是
  真需要：部分校验依据的是服务器 IP，用户重复操作同样无法通过，那就换一个参考站并跟用户说明。

三条红线：

- **形容词不是名字**。"温暖克制的现代风"是三个形容词摞在一起，不是锚。
- **自造词作废**。名字得是**公认的** —— 你说得出它的实例、指得出现实里的作品。
  "新中式赛博风"这种当场拼出来的词没有共识，写进锚里等于没锚。
- **别把词典摊开当菜单让用户选**。名字是从他的话里翻译出来的；他该看到的是
  2-4 个带小样的候选，不是一张风格大全。摊开菜单就退回模板思维了。

他已经点了名字（"我要日式极简"）的，跳过前两步直接进试作；直接提供了参考图的，
读图读出那是什么风格、跟他确认一下名字，再进试作。名字定下来之后落锚进长期
记忆（一条 `type: project` 记忆，名字打头如「风格锚 = 杂志编辑风」，取值写进正文）；
项目级定案经用户点头后进根 `CLAUDE.md` 的「风格档案」节。参照图留在
`参考图/` 别删 —— 铺到第五页跑偏时靠它回锚。

### 翻译词典 —— 你的词汇量，不是给用户的菜单

第三列才是这张表的价值：名字得能立刻落到代码上，否则做出来的还是"那个名字的
均值版"。表外的风格多得是，照样现推。

| 他可能这么说 | 名字 | 落到代码上是哪几条 |
|---|---|---|
| 像杂志 / 有编辑感 / 高级 | **杂志编辑风 editorial** | 衬线大标题 + 无衬线正文、通栏与窄栏混排、首字下沉、图片出血、栏目名页码这类细节排版 |
| 干净 / 专业 / 别花哨 | **瑞士国际主义 / 网格派** | 单一无衬线字族、模块化栅格且元素严格落格、非对称排布、左对齐不居中、双色以内 + 大面积留白（具体色值仍走色彩节，别真用纯黑） |
| 安静 / 留白 / 想让人慢下来 | **日式极简** | 行高字距都拉开、正文宽收窄、近乎无彩色、层级靠留白不靠字号 |
| 复古 / 怀旧 / 像老印刷 | **risograph / 活版** | 2-3 套色叠印、故意错位、纸纹噪点、低饱和荧光色 |
| 手作感 / 有温度 / 像手账 | **拼贴 collage** | 微旋转 -3°~3°、`filter: drop-shadow` 不用 box-shadow、白边、元素骑线或探出边缘、纸纹底（深配方 Read `patterns/cutout-collage.md`） |
| 科技 / 未来 / 赛博 | **终端 / HUD**（不是紫蓝渐变） | 等宽字、扫描线、坐标刻度与标注线、深底上单一荧光色 |
| 可爱 / 二次元 / 谷子 | **贴纸风** | 圆角厚白边、高饱和、硬投影、元素堆叠遮挡 |
| 有冲击 / 反叛 / 别装精致 | **粗野主义 brutalist** | 系统默认字体、纯色硬边框、零圆角零阴影、故意的不对齐 |

风格名定的是气质，下面三节（排版 / 色彩 / 图像）定的是它在这个站上的具体取值 ——
名字选完，那三组数就有了判据，不用再凭空拍。

## 排版系统：气质的地基

**这三个数决定成败**（写进 `:root`，锚定时固化；**先定这三个数再配色**，反过来做
配色反复调整也难以对味）：

- **字距** `letter-spacing`：中文正文 0.02~0.04em；大标题 0 到 -0.01em
  （汉字本身方正，字距一松就散）
- **行高** `line-height`：中文正文 1.75~1.85，标题 1.3~1.5，比英文站需要的高
- **正文宽**按**每行字数**定：一行 36~42 个汉字最舒服。写成 `em` 不写 `px`
  （`--measure: 40em`），字号一变宽度跟着走；16px 正文下约 600~700px

配套：正文字号 **16px** 起（屏读中文 15px 偏小，长文 17px 更舒服）；字重正文
≥400、标题 500~600，300 只给装饰性小字。这三个数一改就是换气质，改配色只是换衣服。

**标题梯度**：两级够用（页题 + 节题），最多三级。相邻级差要明显（1.6× 以上），
差 20% 的两级读者分不出来，等于没有层级。标题跟正文拉开的方式不止字号 ——
字重、颜色深浅、上方留白，选一两个维度用足，比每级都放大一点有效。

**间距节奏是长页气质的另一半**：段间距 < 节内块间距 < 节间距，比例拉开
（比如 1 : 2 : 4~6）。节与节之间敢留大白 —— 长页的"呼吸感"几乎全靠节间距，
挤在一起的精致排版读起来还是喘不过气。全篇用一套间距刻度（如 8 的倍数），
不要每处临时定一个数值。

## 色彩方法

- **一个主色 + 一套中性灰**，够做绝大多数站点。主色用在链接、细线、选中态这些
  小面积使用才显质感；大面积铺主色是海报做法，不是网页
- **文字别用纯黑纯白**：深色文字往主色方向偏一点（比如 #1a1a1a 带一丝暖或冷），
  背景白也可以是米白 / 暖白。整站的"温度"就是这么来的
- **中性灰要成梯度**：正文、次要文字、注脚、分隔线、底色，各取一档，全站复用。
  灰是排版里用得最多的颜色，梯度乱了整站就脏
- 深浅模式不用都做，跟用户确认默认哪种就好

## 图像手法

三种用法，按页面角色选：

1. **全幅大图**：hero 或章节开场。图上压字时只压文字落脚的局部（局部渐变），
   别用整层半透明黑罩压全图
2. **抠图叠层（贴纸感）**：`remove_background` 抠出透明主体，当**版面元素**用而
   不是当"配图"——人物骑在分隔线上、吉祥物探出正文边缘、物件散落在标题周围。
   加一点微旋转（-3°~3°）和阴影就有手作拼贴的味道。个人站和产品页的差异化利器，
   具体配方 Read `patterns/cutout-collage.md`
3. **装饰性小元素**：小图钉、胶带、手绘箭头、纹理角标。少量、有主题一致性，
   跟站点气质同源（复古站用纸纹胶带，科技站用坐标刻度线）

生图走 `generate_image`（cookbook 首次调用时注入），抠图走 `remove_background`。
生成图落在**工作区根**的 `assets/generated/`，而站点住自己的文件夹 —— 要么把 webp
拷进 `<站名>/assets/` 再写 `assets/x.webp`，要么写 `../assets/generated/x.webp`
（导出时系统会归一）。没有合适的图时，大字排版本身就是视觉主角，
不要用 emoji 或通用免费图充数。

## 动效预算

CDN 库可按需引入（gsap / lenis / three / alpine / htmx），但动效是调味不是主菜：

- **一页最多两种动效语言**：比如"滚动淡入 + hover 微移"就是全部。首屏可以有
  一处大的（打字机 / 视差 / 3D 背景），后面全篇克制
- 滚动揭示别每个元素都做，按**节**做；时长 0.4~0.7s，缓动统一一个函数
- 需支持 `prefers-reduced-motion`，一条 media query 即可
- 动效永远不该让人等：进场动画挡住内容超过 1s 就是负资产

## 中文排版基线

- 标点跟**正文主体语言**走：中文正文用全角（，。：；？！……），半角逗号冒号在中文里会破坏版面一致性；
  英文正文用半角加一个空格，全角标点混进英文句子里同样破坏一致性。混排按主体那一种算
- 字体链每段 latin family 后面必须跟 CJK family：
  `'Inter', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif`
  少了 CJK 那段，换台机器中文就掉到系统默认字体
- 细字重（300 以下）在 13~15px 的汉字上会糊笔画。气质靠行高字距留白撑，
  不靠细体 —— 大标题（28px+）用细体没问题

## 响应式

一到两个断点通常够（`max-width: 860px` 单栏化是最常用的一个），复杂布局需要
第三个就加，别为档位而档位。**做完必须自己看过真实宽度**：
`screenshot_canvas { device: 'mobile' }` 是真的按 390px 渲染 —— 媒体查询有没有
生效只有这样才看得出来。抠图叠层在窄屏最容易出事（盖住正文），mobile 档重点看它。

## 工程形态

**站点住自己的文件夹**（按站名起，别把 index.html 直接放工作区根 ——
根是整个项目的桌面）。夹里**唯一硬要求是产物根上有 `index.html`**；多页同目录
加 `.html`，样式怎么组织你定（手写道常见全站一份 `style.css`，构建道是 `dist/`
里的分片）。简单站点到此即可，不必为其引入工程化。构建道（React /
打包器 / 生成脚本）什么时候值得上、如何配置才能与平台约束兼容（`base: './'`、
页=html 入口、build 节奏），配方在 `patterns/build-lane.md` —— **动手搭
package.json 之前先 Read 它**。硬约束不变：**产物必须是纯静态文件**
（落 `dist/`，系统自动认），SSR / 常驻进程不行。

**站点要有功能**（用户能登录 / 提交 / 筛选 / 管理）就进**应用道**：数据全用模拟的，
但要**真的跑起来**（四态齐全、写了刷新还在、失败路径真能触发），并且全部收在一层
`api/` 里 —— 那一层的函数签名就是用户未来后端的接口清单，他换真数据只改那一个目录。
配方 Read `patterns/mock-app.md`，**动手写第一个交互之前先看**（尤其 localStorage
命名空间那条：预览时所有任务同源，不带站名前缀会串数据）。
需要与用户对齐的口径：**本产品提供设计与交付，不提供托管运行** —— 交付物是完整前端，附一份
「需由您的后端实现的接口」清单。

样式建议集中在一份 CSS 里 —— 用户自己才改得动；utility class（Tailwind 等）
散在几百个标签上，改行高要改一百处。用户点名要就用。（构建道上的取舍不同，
立场见 `patterns/build-lane.md`。）

打算上**页面转场或客户端路由**（点站内链接不整页刷新那种）：脚本必须从
`boot` / `initPage` 两段起手，别写成单遍执行再回头改。配方
Read `patterns/page-transitions.md` —— **动手写第一个转场之前先看**。

## 固定尺寸的页面（海报 / 笔记图 / 歌词页 / 演示）

站点的页面默认是响应式的、可滚动的。有一类需求要的是**固定尺寸的一屏**：海报、社交平台的笔记图、歌词视觉页、单页报告、演示。它们仍然是站点里的页面，只是加了两个属性：固定的画幅，以及页与页之间按屏切换。不需要另一种产物形态。

**画幅按题材默认，不要先问用户。** 用户说"海报"就直接开工，第一版出来之后再问要不要换比例，这比开工前问卷快得多，也让用户先看到东西。默认值：

| 题材 | 默认画幅 |
|---|---|
| 海报、笔记图（小红书类）、歌词页 | 1080×1440（3:4 竖版） |
| 手机端宣发、竖版长图 | 1080×1920（9:16） |
| 演示、横版报告 | 1920×1080（16:9） |
| 用户明确说了尺寸或比例 | 按他说的 |

**写法**：一个 `.artboard` 容器给定 `width` / `height`，内部绝对布局或 grid，`overflow: hidden`，内容不允许溢出画幅。整块按视口等比缩放、居中，画幅本身的像素不变。**外层缩放骨架照抄 `patterns/fixed-canvas.md`，动手前先 Read**：外层必须是 flex 居中，写成 grid 会让画面在预览窗和全屏里偏到一角并被裁切。导出走站点的单页 HTML；用户要图片时 `screenshot_canvas` 出图。

**演示是多个画幅按顺序排列**：每一屏一个 `<section class="artboard">`，容器 `scroll-snap-type: y mandatory`，每屏 `scroll-snap-align: start`，键盘方向键和滚轮自然翻页。每屏装在单屏内，section 内部不滚动，信息多就拆屏。演示与普通站点的区别只在这一层，风格系统、字号、色彩方法与站点相同。

**固定画幅的字号跨度比网页大**。一屏是隔着距离看的：核心句 72 到 160px，正文 20 到 28px，注脚 14 到 16px。层级用字号、字重、颜色深浅三个维度一起做。块间距明显大于行间距，一屏的呼吸感靠留白，不靠缩小字号。

**图像**：全幅大图只压文字落脚的局部（`patterns/image-led-cover.md`）；`generate_image` 出的主体可以 `remove_background` 抠成透明叠层，人物半身像出血压边（`patterns/portrait.md`），物件散落在大字周围。抠图用 `filter: drop-shadow(...)` 贴地，不用 box-shadow。

**先做一屏给用户看，再铺其余**。海报只有一屏，做完直接给看；演示先做封面和一页典型内页，用户认可气质之后再铺开。铺完再改等于重做。

## 反默认清单

下面这些是 AI 生成网页的统计均值 —— 出现任何一条，说明那里**没有做设计决策**，
只是滑进了模型的默认输出。它们不是错，是平庸：

| 均值 | 它替代掉了什么思考 |
|---|---|
| 全宽 hero + 居中大标题 + 渐变背景 | 这一屏到底想让人记住哪句话 |
| 三张等高功能卡片平铺 | 这三件事真的同等重要吗 |
| emoji 当图标 | 这里需要图吗？需要的话是什么图 |
| box-shadow 卡片堆叠 | 内容之间的关系用线还是留白表达 |
| "Get Started" / "了解更多"按钮组 | 用户此刻真正想去哪 |
| 每段配一个渐变色块 | 主色到底是哪个、用在哪 |

写完扫一眼，命中的地方回去把那个被跳过的问题答了 —— 答案有时候恰好就是默认
形态，那也行，但要是选出来的，不是滑出来的。

## 用户说"无聊"的时候

本节来自一次实际案例：用户三次表达不满，前两次的处理方向都不完整。

1. "为什么不多加些超棒的特效" → 增加了滚动揭幕、hover 微动、胶片颗粒。**无效。**
2. "为什么不生成专用的图" → 补了角色一致的配图。有用，但不解决根本。
3. "太简单太无趣了" → 这次才诊断对：站是 3 页、1 篇文章、每一节都是"左图右字"
   的同一种节奏，读者三屏到底。

**"无聊"八成是骨架太薄，不是皮肤不对。** 而增加动效只是给薄骨架加装饰 —— 骨架的厚度
并没有变化。

诊断次序，先数三样可数的东西：

- **页数**：3 页和 8 页是两种体验。一页承载不了两个重心，强行合并只会失焦
- **"节的形状"种类**：全站有几种不同的版面节奏？如果每一节都是"左图右字"，
  那读者第三屏就知道后面长什么样了 —— 这是无聊的最常见来源
- **交互重心数**：每页有没有一件"值得动手"的事？拖拽前后对比、手风琴、
  三题自测、标签筛选、tab、侧边目录 + 阅读进度 —— 一页一个就够，但要有

三样都薄的时候，解法是**补结构**：扩页数、每页给一个自己的交互重心、
插一段深色内页打断连续的暖底。那一轮风格锚一个字没改，用户就满意了。

**动效是最后一步，不是第一步。** 骨架立住之后，动效才能让它更顺；骨架单薄时，
动效只是让单薄动起来。

## 铺开时

- 每一页只回答一个问题，导航里说得清它是什么
- 页与页之间用**相对链接**（`about.html`、`posts/x.html`），绝不用 `/about.html`
- 站内链接指向的文件必须真的存在 —— `list_pages` 会给断链清单，做完看一眼
- 铺到一半发现锚不对，停下来与用户确认，不要在无声中偏移

## 上线

用户明确说「发布 / 上线 / 挂到公网」时才动 `publish_site`（发公网是用户的决定，
不是你的）。要点：

- `publish_site({ task, action: 'publish' })` 发布或更新，返回永久 URL；重新发布
  地址不变，所以「改完更新一下线上」就是再调一次。
- 全新域名生效可能要一两分钟 —— 把这句话带给用户，别让他以为发失败了。
- 额度或权限被拒（试用账号 / 超出每人上限）就把错误原话转告，不要重试。
- 下线用 `action: 'unpublish'`，公网地址即刻失效。

---

> 起手：没有模板，从骨架和风格名自己写起（模板会让所有站点趋同，
> 已停用）。硬要求只有产物根上的 `index.html`；样式文件的拆法和名字按站定。两条让预览出错的硬规则 —— `<meta name="viewport">`
> 必须有、站内链接一律相对路径 —— 系统在你每次写站点页后自动 lint，违反会提醒。
> 目录约定、产物根、`_drafts/`、导出交付在站点技术参考（首次写站点 html 时注入）。
> 抠图叠层配方按需 Read 本 skill 目录下的 `patterns/cutout-collage.md`。
> 构建道（React / vite / Tailwind / 组件库）配方 Read `patterns/build-lane.md`。
> 板书交稿纪律在平台协议里，这里不另写一份。