Files
bi-agents/_bmad/wds/workflows/7-design-system/workflow-import.md
Cassel 647cbec54f docs: update all documentation and add AI tooling configs
- Rewrite README.md with current architecture, features and stack
- Update docs/API.md with all current endpoints (corporate, BI, client 360)
- Update docs/ARCHITECTURE.md with cache, modular queries, services, ETL
- Update docs/GUIA-USUARIO.md for all roles (admin, corporate, agente)
- Add docs/INDEX.md documentation index
- Add PROJETO.md comprehensive project reference
- Add BI-CCC-Implementation-Guide.md
- Include AI agent configs (.claude, .agents, .gemini, _bmad)
- Add netbird VPN configuration
- Add status report

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 13:29:03 -04:00

2.1 KiB

name, description
name description
import-design-system Import an existing design system into the WDS format

Import Design System

Goal: Bring an existing design system into WDS — from a URL, file export, or Figma project.


INITIALIZATION

Design Log

Read {output_folder}/_progress/00-design-log.md. Check Current and Backlog for context.

Steps

Step 1: Identify Source

Ask the user for the design system source:

  • URL — Public design system documentation (e.g., Material UI, Chakra, custom)
  • File — Exported tokens file (JSON, CSS custom properties, SCSS variables)
  • Figma — Figma design system file (via Figma MCP or export)
  • Code — Existing codebase with component library

Step 2: Extract Tokens

Read the source and extract design tokens:

  1. Colors — Primary, secondary, semantic, neutrals
  2. Typography — Font families, sizes, weights, line heights
  3. Spacing — Scale values, named spacing tokens
  4. Shadows — Elevation levels
  5. Borders — Radius values, border styles
  6. Breakpoints — Responsive breakpoints
  7. Motion — Transition durations, easing curves

Present extracted tokens to user for review. Mark any ambiguous mappings.

Step 3: Extract Components

Identify reusable components from the source:

  1. List all components found
  2. For each: name, props/variants, token dependencies
  3. Map to WDS component template format
  4. Flag components that don't map cleanly

Present component list for user approval.

Step 4: Generate Design System Files

Create the WDS design system structure:

  1. design-tokens.md — All extracted tokens in WDS format
  2. components/*.md — One file per component
  3. component-library-config.md — Configuration and metadata

Step 5: Validate Import

Run validation:

  • All tokens referenced by components exist
  • No orphaned tokens (defined but never used)
  • Naming conventions consistent
  • Component variants complete

Present validation report. Fix issues interactively.


AFTER COMPLETION

  1. Update design log
  2. Suggest running [B] Browse Design System to explore the import
  3. Return to Phase 7 Activity Menu