Prompt 看板

Prompt 看板是已生成作品页面中 Prompt tab 的文档模型。它的目标不是把一整段超长 prompt 直接堆给用户，而是解释系统如何把用户原始需求转化为可复用的生成证据、代码生成指令、风格说明、设计系统提取内容，以及未来可沉淀为 Prompt Skill 的材料。

绑定约定

Prompt 看板与已生成作品页的 Prompt tab 绑定。

UI 来源：src/components/work-design-system-board.tsx，Prompt tab 面板。
文档来源：docs/PROMPT_BOARD.zh.md。
阅读路由：/zh/docs/prompt-board。
同步规则：当 Prompt tab 的结构、卡片顺序、字段名称、空状态或功能行为变化时，必须在同一次改动中更新本文档。
反向同步规则：当本文档改变 Prompt 看板模板或功能契约时，也必须同步更新 Prompt tab 实现。

目标

Prompt tab 应帮助用户回答五个问题：

用户最初给 Agent 的材料是什么？
最终用于代码生成的完整 prompt 是什么？
哪些风格摘要可以作为紧凑的创意 brief 复用？
哪些设计系统 prompt 可以从 full prompt 中提取为 MD 和 JSON？
哪些证据可以转化为可复用的 Prompt Skill？

这样，已生成作品页不只是结果查看器，也会成为未来生成项目分析的模板。

看板结构

Prompt 看板按顺序包含五张卡片：

Original Input / 原始输入
Full Prompt / 完整 Prompt
Style Prompt / 风格 Prompt
Design System Prompt / 设计系统 Prompt
Turn To Skill / 转为 Skill

每张卡片承担不同任务；合在一起形成从原始输入到可复用系统知识的可追溯链路。

1. Original Input / 原始输入

Original Input 记录 Agent 转换之前的用户原始生成材料。

它应支持：

用户输入的 prompt 文本
上传图片或视觉参考
用户粘贴或附加的现有代码
文档、PDF、Markdown 文件或其他源材料

当前样例项目中，已捕获输入主要是 prompt 文本。图片、代码和文档区域仍以明确空状态呈现，用来描述完整的预期模板。

2. Full Prompt / 完整 Prompt

Full Prompt 是 Agent 处理后的指令包，用于生成最终 HTML 或代码输出。

它应组合：

用户原始需求
Remix 方向与约束
已选择的 Skill 指令
素材要求
设计语言或 design.md 来源
输出格式要求
来源页面或来源模板参考
最终生成目标

这张卡片有意保持详细。它是解释生成代码为什么呈现当前结构和行为的审计线索。

3. Style Prompt / 风格 Prompt

Style Prompt 是从项目中提炼出的紧凑风格卡片，用于快速复用，而不是完整审计。

它应展示：

项目或风格名称
一句简短风格描述
标签，例如 dashboard、animated、webgl、threejs、cta、bento、charts、billing 或自定义标签
Generate 操作，用于重新生成或刷新风格摘要
Add 操作，用于扩展标签

当用户需要可复用的风格 brief，而不是阅读完整 full prompt 时，使用这张卡片。

4. Design System Prompt / 设计系统 Prompt

Design System Prompt 从 Full Prompt 中提取结构化设计系统证据。

它不应从截图或无关示例中编造文字。每个内部 section 都应来自 Full Prompt 中匹配的内容。如果 Full Prompt 对某个 section 没有证据，该 section 应显示明确空状态。

推荐内部 section：

Overview / 概览
Colors / 色彩
Typography / 字体
Layout / 布局
Elevation & Depth / 层级与深度
Shapes / 形状
Components / 组件
Do's and Don'ts / 应做与避免
Motion / 动效
WebGL
ThreeJS

同一组提取内容应提供两种模式：

MD：给人和 prompt 作者阅读的 prompt 块。
JSON：给自动化、校验、存储和未来再生成使用的结构化数据。

预期提取模式：

{
  "source": "fullPrompt",
  "sections": [
    {
      "id": "colors",
      "title": "Colors",
      "evidence": {
        "colors": "content extracted from fullPrompt"
      }
    }
  ]
}

5. Turn To Skill / 转为 Skill

Turn To Skill 说明当前项目如何变成可复用的 Prompt Skill。

它应收集：

Style prompt 证据
Code 证据
缩略图或预览证据
值得保留的实现模式
用户对保留、泛化或强化内容的方向
可见性选择，例如 private 或 shared
Create Skill 操作

这张卡片是一件生成作品通往可复用 Skill 资产的桥梁。

模板规则

构建或维护 Prompt tab 时遵守以下规则：

保持五张卡片在 Prompt tab 中可见。
保留从原始输入到 Skill 创建的链路。
区分审计内容和可复用摘要内容。
使用空状态，不编造内容。
Design System Prompt 内容必须从 Full Prompt 证据中提取。
保持 MD 和 JSON 模式同步。
复制操作应靠近对应卡片或 section。
代码块和 prompt 块应可滚动。

功能契约

Prompt 看板完整的条件：

Original Input 展示原始 prompt 和附件状态。
Full Prompt 展示处理后的生成 prompt。
Style Prompt 总结风格和标签。
Design System Prompt 暴露基于 Full Prompt 证据生成的 MD 和 JSON 视图。
Turn To Skill 描述如何把当前项目转化为可复用 Skill。

这个契约让已生成作品页成为可复用分析模板，而不是孤立的生成结果。