initial commit

_bmad/wds/workflows/7-design-system/workflow-browse.md

@@ -0,0 +1,87 @@
+---
+name: browse-design-system
+description: Generate a disposable localhost app to explore tokens, components, and relationships
+---
+
+# Browse Design System
+
+**Goal:** Generate and serve an interactive localhost application for exploring the design system — tokens, components, relationships, and intent-based search.
+
+---
+
+## INITIALIZATION
+
+### Design Log
+Read `{output_folder}/_progress/00-design-log.md`. Check Current and Backlog for context.
+
+
+## Steps
+
+### Step 1: Load Design System Data
+
+Read all design system files:
+
+1. `{output_folder}/D-Design-System/design-tokens.md` — All tokens
+2. `{output_folder}/D-Design-System/components/*.md` — All components
+3. `{output_folder}/D-Design-System/component-library-config.md` — Config
+
+Parse into structured data: tokens with categories, components with dependencies, relationship graph.
+
+### Step 2: Generate Browser Application
+
+Build a single-page localhost app with four views:
+
+**Token Explorer**
+- Airtable-style table: filterable by category, sortable by name/value
+- Live preview column: colors show swatches, spacing shows bars, typography shows rendered text
+- Search: filter by name, value, or category
+
+**Component Catalog**
+- Grid of all components with thumbnail previews
+- Click to expand: all variants, all states, token dependencies
+- Filter by category (navigation, forms, content, layout)
+
+**Relationship Viewer**
+- Interactive graph: nodes are tokens and components
+- Click a component → highlight all tokens it uses
+- Click a token → highlight all components that reference it
+- "Show me what uses --color-primary" → highlights the chain
+
+**Intent Search**
+- Natural language input: "I need a background for warning messages"
+- Matches against token names, descriptions, categories, and component usage
+- Shows results with live previews and copy-ready token names
+
+### Step 3: Serve and Interact
+
+Start the localhost server and present:
+
+```
+Design System Browser running at http://localhost:XXXX
+
+Views:
+- /tokens     — Token Explorer
+- /components — Component Catalog
+- /graph      — Relationship Viewer
+- /search     — Intent Search
+
+Press any key to stop the server.
+```
+
+User browses freely. WDS stays available for questions about what they find.
+
+### Step 4: Capture Actions
+
+If the user identifies changes while browsing:
+
+1. Log desired changes (rename token, add variant, fix inconsistency)
+2. On exit, present action list
+3. Route to appropriate activity: [C] Create, [E] Edit, or [V] View
+
+---
+
+## AFTER COMPLETION
+
+1. Update design log
+1. Stop localhost server, discard generated app
+2. Return to Phase 7 Activity Menu