Interface Lab
Login
Design System Panels

Design System Panels

Design-system panel, token, trace, and prompt-template reference rules.

Design System Panels

The creation workflow now treats design system output as structured assets, not a single markdown blob.

Structure

designSystemProfile stores the system name, use case, mood, principles, and anti-rules.

designSystemPanels is an ordered panel array. Each panel contains:

  • id
  • kind
  • title
  • status
  • summary
  • tokens
  • rules
  • evidenceRefs
  • previewSpec
  • qaIssues

Registered v1 panel kinds:

  • brand-mood
  • color
  • typography
  • spacing-layout
  • surfaces-depth
  • components-states
  • motion
  • accessibility
  • implementation

designSystemTokens is the machine-readable token layer used by implementation.

designSystemTrace records whether a rule came from user input, assets, skills, agent assumptions, or user confirmation.

UI

The creation canvas shows these panels inside Design System Hub, while the saved-work Style board reads the same structure first and falls back to DESIGN.md parsing when panel data is absent.

Prompt Template

The Full Prompt must reference concrete panel output: color roles, type levels, layout grid, component states, motion rules, accessibility constraints, and implementation tokens.