UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin

Docs

Platform
Site OverviewDevelopment LogCollaboration Guide
Template Library
Prompt BoardStyle Board
Agent Workflow
Agent Deep DiveProject Workflow AgentAgent Output PathPrompt Agent EvalsDesign System PanelsKnowledge Base GuideDeepSeek Agent Incident Notes
UI DESIGN LABDocumentation

Read public Markdown docs; admins can maintain them in editor pages.

Prompt Board

Prompt Board

Template and function guide for the created-project Prompt tab.

Back to docs

Chapter preview

Binding ContractPurposeBoard Structure1. Original Input2. Full Prompt3. Style Prompt4. Design System Prompt5. Turn To SkillTemplate RulesFunctional Contract

Prompt Board

Prompt Board is the documentation model for the Prompt tab on a created project page. Its goal is not to expose one long prompt dump. It explains how the system turns a user's original request into reusable generation evidence, code-generation instructions, style documentation, design-system extraction, and future Prompt Skill material.

Binding Contract

Prompt Board is bound to the created-project Prompt tab.

  • UI source: src/components/work-design-system-board.tsx, Prompt tab panel.
  • Document source: docs/PROMPT_BOARD.md.
  • Reader route: /[locale]/docs/prompt-board.
  • Sync rule: when the Prompt tab structure, card order, field labels, empty states, or functional behavior changes, update this document in the same change.
  • Reverse sync rule: when this document changes the Prompt Board template or functional contract, update the tab implementation to match.
Prompt

Purpose

The Prompt tab should help a user answer five questions:

  • What did the user originally give the agent?
  • What final full prompt was sent forward for code generation?
  • What style summary can be reused as a compact creative brief?
  • What design-system prompt can be extracted from the full prompt as MD and JSON?
  • What evidence can be turned into a reusable Prompt Skill?

This makes the created project page useful as both a result viewer and a template for future generated-project analysis.

Board Structure

The board contains five cards in this order:

  1. Original Input
  2. Full Prompt
  3. Style Prompt
  4. Design System Prompt
  5. Turn To Skill

Each card has a different job. Together they form a traceable chain from raw input to reusable system knowledge.

1. Original Input

Original Input records the user's raw generation materials before the agent has transformed them.

It should support:

  • Prompt text typed by the user
  • Uploaded images or visual references
  • Existing code pasted or attached by the user
  • Documents, PDFs, markdown files, or other source material

In the current sample project, the captured input is mainly prompt text. Image, code, and document areas are still represented as explicit empty states so the interface describes the full intended template.

2. Full Prompt

Full Prompt is the agent-processed instruction package used to generate the final HTML/code output.

It should combine:

  • The original user request
  • Remix direction and constraints
  • Selected skill directives
  • Asset requirements
  • Design language or design.md source
  • Output format requirements
  • Source page or source template reference
  • The final generation target

This card is intentionally verbose. It is the audit trail for why the generated code looks and behaves the way it does.

3. Style Prompt

Style Prompt is a compact style card distilled from the project. It is designed for quick reuse, not exhaustive auditing.

It should show:

  • Project or style name
  • One short style description
  • Tags such as dashboard, animated, webgl, threejs, cta, bento, charts, billing, or custom tags
  • A Generate action for regenerating or refreshing the style summary
  • An Add action for extending tags

Use this card when the user wants a reusable style brief without reading the entire full prompt.

4. Design System Prompt

Design System Prompt extracts structured design-system evidence from the Full Prompt.

It should not invent text from screenshots or unrelated examples. Each internal section should be derived from matching content in the Full Prompt. If the Full Prompt has no evidence for a section, the section should show an explicit empty state.

Recommended internal sections:

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts
  • Motion
  • WebGL
  • ThreeJS

The same extracted content should be available in two modes:

  • MD: readable prompt blocks for humans and prompt authors
  • JSON: structured data for automation, validation, storage, and future regeneration

The expected extraction pattern is:

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

5. Turn To Skill

Turn To Skill explains how the current project can become a reusable Prompt Skill.

It should collect:

  • Style prompt evidence
  • Code evidence
  • Thumbnail or preview evidence
  • Implementation patterns worth preserving
  • User direction for what to preserve, generalize, or exaggerate
  • Visibility choice, such as private or shared
  • A Create Skill action

This card is the bridge from one generated project to a reusable skill asset.

Template Rules

Use these rules when building or maintaining the Prompt tab:

  • Keep all five cards visible in the Prompt tab.
  • Preserve the chain from original input to skill creation.
  • Separate audit content from reusable summary content.
  • Use empty states instead of fabricated content.
  • Extract Design System Prompt content from Full Prompt evidence.
  • Keep MD and JSON modes in sync.
  • Make copy actions local to each card or section.
  • Keep code and prompt blocks scrollable.

Functional Contract

The Prompt board is complete when:

  • Original Input shows raw prompt and attachment status.
  • Full Prompt shows the processed generation prompt.
  • Style Prompt summarizes the style and tags.
  • Design System Prompt exposes MD and JSON views generated from Full Prompt evidence.
  • Turn To Skill describes how to convert the project into a reusable skill.

This contract lets created project pages become reusable analysis templates instead of isolated generated results.