Design System Workflows

VibePro includes Design System commands for UI modernization and design governance.

These commands are meant to keep visual decisions tied to product semantics, route evidence, and Story/Spec context. They are not a replacement for design judgment.

Initialize a Design System artifact

Use init when the product needs a Design System artifact but code evidence is not available yet.

vibepro design-system init /path/to/repo \
  --id <ds-id> \
  --product "<product name>"

This creates a valid but evidence-light artifact with gates that still need real product and code evidence.

Derive from code

Use derive when routes, styles, tokens, and product context exist.

vibepro design-system derive /path/to/repo \
  --id <ds-id> \
  --product "<product name>" \
  --routes "/,/settings" \
  --brief "Quiet operational SaaS UI for repeated expert use" \
  --from-code

Validate against a story

vibepro design-system validate /path/to/repo \
  --id <ds-id> \
  --story-id <story-id>

Validation checks whether the Design System artifact is consistent with the Story/Spec/Architecture context and whether drift or missing evidence should block PR readiness.

Modernization planning

For existing UI modernization, use the Design System artifact as input to a modernization plan.

vibepro design-modernize plan /path/to/repo \
  --id <story-id> \
  --product "<product name>" \
  --routes "/,/settings" \
  --design-system-id <ds-id>

Generated visual plans are hypotheses. The current code, story, spec, design-system gate, and Gate DAG remain the source of truth.