UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录

文档文章

平台与维护
网站概述功能开发与版本更新记录关于协作
Template 库
Prompt 看板Style 看板
Agent 工作流
Agent 深度解析项目创作页与 Agent 工作流Agent 输出链路Prompt Agent EvalsDesign System PanelsKnowledge Base GuideDeepSeek Agent 故障复盘
UI DESIGN LAB文档中心

公开阅读 Markdown 文档，管理员可进入编辑页维护。

Prompt 看板

Prompt 看板

Prompt tab 的模板结构、内容来源、功能目标和复用方式说明。

返回文档中心

章节预览

绑定约定目标看板结构1. Original Input / 原始输入2. Full Prompt / 完整 Prompt3. Style Prompt / 风格 Prompt4. Design System Prompt / 设计系统 Prompt5. Turn To Skill / 转为 Skill模板规则功能契约

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 看板按顺序包含五张卡片：

  1. Original Input / 原始输入
  2. Full Prompt / 完整 Prompt
  3. Style Prompt / 风格 Prompt
  4. Design System Prompt / 设计系统 Prompt
  5. 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。

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