living-stage：引导式设置

Living stage：引导式设置

你正在帮助用户创建自己版本的此网站：一个拥有独立生命、手臂随着滚动打印页面、用自己的话讲述故事的墨水角色。引擎已经正常工作。你的任务是复制模板、进行访谈、填写五处内容。不要编写引擎代码。

属于用户的五处内容

内容	文件
文字：名称、标语、章节、行动号召、彩蛋	src/content/site.ts
链接树中的链接	src/content/links.ts
角色的外观	src/content/character.tsx（预设位于 src/art/looks.tsx）
调色板、字体、动效	design/tokens.json，镜像于 src/styles/tokens.css
分享图片和图标	npm run og（根据上述内容生成）

你还将访谈的决策写入 docs/STORY.md，并可以读取 src/art/looks.tsx 将预设外观复制到 src/content/character.tsx。

其他所有内容（src/art/、src/audio/、src/components/、src/sections/、src/App.tsx）都属于引擎。不要为了完成本任务而读取它们；它很大，你不需要它。读取 docs/CHARACTER.md 了解外观和标题规则，以及在接触令牌之前读取 docs/DESIGN_SYSTEM.md。仅在检查失败且错误指向那里时，才打开引擎文件。

第 0 步：获取代码（快速，无需生成）

如果当前文件夹已经是模板的副本（包含 src/content/site.ts 和 .claude/skills/living-stage/），跳到第 1 步。

否则，询问新网站应存放的位置（一个文件夹名），然后复制模板（不带历史记录）并安装：

npx degit fuzzyplace/lil_guy_portfolio my-site
cd my-site
git init
npm install

然后启动开发服务器（npm run dev，或使用你的预览工具）并向用户展示示例网站，以便他们了解要制作的内容。如果你无法运行或查看开发服务器，请改用截图：npm run build && npm run verify 会生成 screenshots/verify-desktop-hero.png（英雄区域，表演中）和相关图片，而 npm run looks 会生成每个预设的近距离特写。（首次运行：npx playwright install chromium。）用两行话告诉他们接下来会发生什么：一次简短的访谈，一次问一个问题，然后你构建、检查并在征得同意后部署。

第 1 步：访谈

如何决策（这一点最重要）

自上而下地决策，一次只处理一层，在上一层级锁定之前，绝不要询问更低的层级。如果在故事和声音确定之前就完成视觉，会导致文案不连贯。

1. 意图： 网站的目标受众是谁，他们应该感受到什么，以及最后应该做什么。
2. 故事： 从上到下滚动的故事弧。
3. 文案风格： 语气、句子结构、框架手法。
4. 结构： 板块（章节、弹出式、联系方式）及其各自的作用。
5. 台词： 实际文字，先写标语。
6. 角色： 他的外观。
7. 调色板、字体和动效。
8. 链接： 链接树和行动号召。

将每个锁定的层级写入 docs/STORY.md 的“LOCKED”部分（替换示例角色的条目）。以下所有内容都必须追溯到此。如果后续想法与已锁定的层级矛盾，请说明情况并在更改前征询意见。

如何提问

• 一次只问一个问题，使用纯聊天文本。不要使用多问题表单或对话框。
• 在问每个问题之前， 用一行说明它决定了什么以及它会在页面上改变什么。
• 展示，而非描述。 对于风格和外观问题，给出 3 或 4 个选项，每个选项都基于真实内容写出来：每次都用相同的三个场景（开场、一个章节、结局）。对于角色，展示预设（开发服务器上使用 ?look=beanie|bun|hood|bot，或使用 npm run looks 获取特写）。对于调色板，展示带有背景上文本颜色的色板。
• 推荐一个选项并说明原因，用一句话。用户可以选择、混合或反对。
• 在每次回答后， 用一行重述当前锁定的内容，写入 docs/STORY.md，然后提出下一个问题。
• “你的决定” 意味着你来做决定，将其记录在 docs/STORY.md 的“Decisions”部分，然后继续。
• 保持对成本的持续认知：不要重新读取已经读过的文件，不要为每个回答重新生成整个网站，只编辑发生变化的行。

要问什么，按层排列

1. 意图。 目标受众是谁（招聘经理、客户、合作者、朋友）？他们应该感受到什么？他们最后应该做的唯一一件事是什么（发邮件、预约通话、关注、什么都不做）？
2. 故事。 先询问原始素材（他们过去做过什么、现在在做什么、下一步想做什么、是否有副业项目），然后提出 2 或 3 个故事弧，每个用一句话描述。默认弧线是：过去、现在、弹出式（包含贯穿线）、未来、联系方式；章节和弹出式的任何顺序都适用。
3. 文案风格。 提供 3 或 4 种基于用户自己素材渲染的语气，例如：安静的第一人称；实验笔记本；现场笔记；终端日志；或者混合。推荐一种。
4. 结构。 板块列表，每个板块用一句话说明其作用，以及哪些板块出现在顶部导航中。必须有一个联系方式板块。
5. 台词。 以锁定的语气起草每一行台词，然后在上下文中一起展示给用户（在写入 site.ts 后的开发服务器中）。先让标语正确：阅读 docs/CHARACTER.md 中的“Headlines”部分（2 到 4 个短行，第一行一个实词，高字母挨着矮字母，行尾有逗号；每行最多 24 个字符）。还有：眉毛、导语、页脚彩蛋、控制台彩蛋、两行信任文案、404 行。草稿文案即可；未经用户批准，不会发布任何内容。
6. 角色。 展示四个预设。如果没有合适的，要求用一句话描述（头发或帽子、衣服、吸引光线的一个特征），并通过复制最接近的预设到 src/content/character.tsx 并一次更改一个形状来绘制自定义外观。遵循 docs/CHARACTER.md 中的框、关节和填充规则。除非是用户自己的照片且用户要求，否则绝不要描摹照片或真实人物的肖像。预设共享 parts.NECK 和 parts.SKULL（从 src/art/looks.tsx 导出）。使用 npm run looks 显示结果（screenshots/look-current.png）。
7. 调色板、字体和动效。 提供 3 个调色板作为色板（默认的墨水灰色，以及两个符合其故事的），强调色，以及是否保留默认字体。先编辑 design/tokens.json，将每个更改的颜色镜像到 src/styles/tokens.css（只有灰色渐变那里有 --md-ref-gray-* 变量；其他每种颜色直接位于其 --md-sys-color-<role> 上），然后运行 npm run tokens:contrast：它会检查文本对比度（4.5:1）以及两个文件是否一致。雾气（fog-light、fog-mid、fog-deep、fog-edge）承载调色板的情绪：全部四个都要着色。将强调色保持为低语（docs/DESIGN_SYSTEM.md）。动效：默认持续时间或更平静（更长）的持续时间。
8. 链接。 询问每个链接及其去向（Connect、Work、Play 或重命名的组）。仅使用真实 URL：用户尚未拥有的内容为 href: null, status: 'soon'（开发模式下显示，生产模式下隐藏）。然后是行动号召：预约链接、电子邮件或个人资料链接。

第 2 步：构建和检查

1. 根据已锁定的内容编写内容文件。将 site.url 设置为网站将托管的位置（https://host，末尾不含斜杠）。尚未确定域名：使用主机地址（例如 https://their-site.vercel.app）并稍后更新。
2. 运行 npm run check（类型检查、测试包括复制规则、对比度和令牌漂移、构建）。修复失败的内容。如果 site.url 仍指向模板的演示地址（lil-guy-portfolio.vercel.app）或行动号召指向 example.com，构建会发出警告。复制规则：不允许使用 em 或 en 破折号、感叹号、库存填充词。
3. 运行 npm run og 生成分享卡片和图标。
4. 运行 npm run build && npm run verify（首次运行：npx playwright install chromium）。它会在 1440 和 375 宽度下，在有和没有减少动效的情况下检查：加载时角色是否出现、是否执行入场和标题特技、滚动时是否保持在屏幕上、以及是否没有错误。如果没有特技播放，说明标语没有给他提供立足点：与用户一起重新审视它。
5. 向用户展示截图（screenshots/verify-desktop-hero.png 和 verify-mobile-hero.png 显示英雄区域特技中，verify-desktop.png 和 verify-mobile.png 显示页面末尾）以及开发服务器，并询问需要更改的内容。循环直到他们满意。node scripts/shots-sections.mjs 为每个章节生成一张截图。
6. 隐私审查。 再读取一次 src/content/ 中的每个字符串。标记任何用户可能不希望公开的内容：家庭地址、未选择分享的个人电话或电子邮件、家庭或健康信息、未获得许可的雇主或客户。移除示例角色的残留："Pim Lanternby"、"PIM"、"The Quiet Hour"、台灯和收音机台词，以及任何用户未自行提供的 example.com、example.org 或 example.net 链接，以及演示地址 lil-guy-portfolio.vercel.app。

第 3 步：部署

部署会发布用户的网站，因此在执行前请征询用户意见。遵循 docs/DEPLOY.md（默认为 Vercel；Netlify 和 GitHub Pages 也可用）。网站上线后，打开 URL，使用已部署的 og.png 检查分享卡片，并向用户提供链接。

最后提供简短摘要：哪些已上线、哪些仍是 "soon"，以及用户表示稍后会发送的任何内容。