Concept Demo Design — 让理念先被看见

Demo 的工作，是把尚未适合直接产品化的问题变成可以亲眼判断的证据。页面、录屏和成片都是载体；真正决定做法的是它要回答什么问题，以及证据交给谁。

先路由

不要用正式产品工程代偿概念没想清。也不要拿一段剧本文字冒充可录屏的 Demo。

1. 先锁定唯一的判题

先选择 demo_kind，再写一句这个 Demo 必须回答的问题：

三个类型不是页面风格。一个可点击页面可能是概念叙事，也可能是体验 Gate；一段录屏也可能是在验证用户旅程。按要回答的问题分类，不按媒介分类。

开工前补齐两句话：

1. 这个 Demo 要作出的判断：看完后，谁能决定 ______。
2. 最小可见证据：如果结论成立，画面上必须亲眼看到 ______。

concept_story 还要写观众复述句：“我看到 ______ 变成了 ______，因为 ______。”

一支 Demo 只承载一个主判断。复杂理念可以有背景和护栏，不能让多个 feature 或抽象同时争当主角。

再选一帧“灵魂画面”：没有旁白时，这一帧仍能表达主张。先定灵魂画面，再倒推前因和后果。

2. 再定交付车道：家内还是对外

“目标观众是谁”还不够。画页面前必须把 Demo 的交付车道冻结进 Contract：

默认规则：只要 Demo 要在家里被体验、比较或据此拍板，就走 internal_product_gate；只有明确存在外部分发对象或传播场景时才走 external_showcase。不能仅因“录屏”二字自动走对外车道。

demo_kind 与 delivery_lane 是两个正交维度：前者定义判题，后者定义交付对象与视觉真相。用户旅程不是第三条观众车道——它既可以先在家里验证，也可以在验证后改编成对外 showcase。禁止把 journey_validation 塞成第三个 delivery_lane。

F284 Workspace Shell 属于 product_experience_gate × internal_product_gate：它要在家里原生壳中判断 Workspace 结构，而不是向外宣传未来界面。

同一理念确实需要内外两用时，保留同一状态模型，做两个入口或两支短 Demo：产品交互留在原生壳里，外部叙事另加展示框。不要折中成一个半产品、半宣传的混合壳。

Contract 必须记录：

• demo_kind：只能是上述三个值之一；
• delivery_lane：只能是上述两个值之一；
• visual_source_of_truth：具体页面、组件、截图或 worktree，而不是“参考家里风格”；
• native_elements：哪些产品结构必须原样保留；
• stylized_elements：哪些仅为讲解服务，且如何与产品界面分层；
• truth_label：观众怎样区分概念编排、功能原型和真实产品。

动工前做首帧检查：隐藏标题里的 F 号与开发控制条后，家内 Demo 是否仍像 Clowder AI 的自然一部分；对外 Demo 是否既让陌生观众看懂，又不会被误认为生产截图。

3. 选视角，必要时拆成两支

两个问题都重要时，做两支短 Demo。不要在同一画面里频繁切换受益者、操作者和裁判。

4. 先画信号路径

用一行箭头写清：

谁产生信号 → 系统在哪个界面/事件中看见 → 谁解释 → 谁决定是否采用 → 下一次哪里改变

逐箭头检查：

• 系统真的拿得到这份信号吗？拿不到的终稿、私下反馈和脑内偏好不能入戏。
• 中间人有没有独立判断价值？只负责转发的角色应被产品连接吃掉。
• 信号是测量，还是规约？读者能指出“没看懂”，作者仍拥有“想说什么”的主权。
• 冲突反馈如何拒绝、观察或降权？能拒绝诱人的假信号，是演示可信度的重要来源。

5. 声明诚实边界

按画面中的每个 claim 标一层：

概念编排负责让人懂，真实证据负责让人信。两者可以前后相接，不能用“机制真实存在”掩盖尚未自动化的链路。

6. 写 Demo Contract

复制 refs/demo-contract-template.md 填写。先按 demo_kind 选择场景证据，不要把下列内容当成必须补齐的统一清单。

concept_story

1. 新手导览：每个面板、指标、日志分别回答什么问题。
2. 变化前：观众先看懂正常世界。
3. 信号出现：明确谁、何时、为何触发；切换客户/时间段时加分隔。
4. 系统变化：把归因、规则 diff、资产更新或路由变化画出来。
5. 新世界验证：改完后用新样本、同题对照、灰度或真实后续行为证明有效。
6. 拒绝时刻：适用于自适应系统；展示它怎样拒绝坏尺子、越界反馈或虚假提升。

product_experience_gate

1. 安静默认态：没有相关工作时，界面能多克制。
2. 主动作：用户在真实产品语境中完成最关键的任务。
3. 折叠与召回：内容如何让位、如何稳定找回，状态是否保留。
4. 等待、空态、错误与恢复：不能只演 happy path。
5. 方案比较：只改变待裁决变量，其他状态保持一致。
6. Must-Preserve 回归：原有能力、锁定态、响应式、会话生命周期和持久化语义不因新壳丢失。

journey_validation

1. 起始状态与目标结果：用户为何开始，何时算真正完成。
2. 触发与每个 canonical handoff：人、Agent、工具、面板之间如何交接，不能用导览跳过真实导航。
3. 中断与恢复：刷新、折叠、切换、失败或权限阻断后如何继续。
4. 一个诚实失败路径：展示不能完成时，系统怎样解释并保留上下文。
5. 可判定终态：结果、剩余动作与证据在哪；不能只用“完成了”卡片收尾。

用户旅程可以跨多个 surface，但每一步必须落到真实事件、状态或契约。模型总结可以辅助讲解，不能替代 canonical 内容，也不能凭空补一条现实中不存在的捷径。

每一幕只新增一个概念。保留人物、原话和具体动作；压低抽象门槛时，不要把叙事压成 SOP 摘要。

7. 用最低成本做出“真的画面”

默认选择确定性的纯前端交互。只有核心 claim 依赖真实后端行为时，才增加后端。

• 先把 visual_source_of_truth 中列出的页面逐一打开，记录要复用的组件、token、布局与交互；只写“像家里”不算盘点。
• product_experience_gate 从当前产品壳、组件、token 和目标 worktree 开始；演示控制放在可隐藏的开发层，不能反过来让控制面板成为主 UI。
• journey_validation 可以串起多个真实 surface；transition edge、状态 owner、失败与恢复必须沿用产品事件或明确契约，禁止搭一条绕开真实入口的“观光路线”。
• 对外车道从品牌身份和陌生观众导览开始；可以搭叙事舞台，但产品交互镜头仍沿用真实交互语法，并显式标注原型边界。
• 用 SVG 图标保持一致性；不要用 emoji 代替正式 UI 图标。
• 提供播放 / 暂停、上一幕 / 下一幕、左右键与空格键。讲者必须能控场。
• 时间轴、字幕、弹层共用同一暂停语义；暂停后不能继续偷偷变化。
• 节奏按“现场边讲边放”设计。默认宁可慢，试讲后再加速。
• 画面状态应可确定重放；录屏前不依赖随机 LLM 输出。

8. 按 claim 选验证机制

自进化类 Demo 还要守住第五步：展示“改了”只证明发生了更新；外推成立后才有资格称为进化。

交付契约

• Demo Contract：判题类型、交付车道、观众、视觉真相源、视角、信号路径、灵魂帧、诚实边界、类型专属证据表。
• 可录屏交互前端：确定性播放、讲者控场、新手导览、原生视觉语言。
• 验证记录：自动检查、逐幕视觉检查、试讲或目标观众复述结果。
• 证据续接计划：Demo 后展示哪些真实截图、PR、轨迹或结果。

Common Mistakes

Pressure Test

冻结 Contract 前逐题过一遍；只看关键词、不看实际交付对象就算失败：

任一场景若无法从 Demo Contract 直接读出判题类型、交付车道、视觉真相源和诚实边界，不进入前端实现。

完整的两支 Demo 失败谱系与来源见 refs/lessons-from-two-demos.md。视觉 taste 还应读取 ../../docs/taste/vignettes/creative-craft-概念演示-mksdmh.md。

下一步

Contract 冻结后：交互实现走 worktree + tdd + browser-preview；需要正式成片时再交给 video-forge。