Files

Deploy to Production / Build and Deploy (push) Successful in 12s

Details

feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

2026-05-16 12:59:30 +00:00

2.1 KiB

Raw Permalink Blame History

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:

Colors — Primary, secondary, semantic, neutrals
Typography — Font families, sizes, weights, line heights
Spacing — Scale values, named spacing tokens
Shadows — Elevation levels
Borders — Radius values, border styles
Breakpoints — Responsive breakpoints
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:

List all components found
For each: name, props/variants, token dependencies
Map to WDS component template format
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:

design-tokens.md — All extracted tokens in WDS format
components/*.md — One file per component
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

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

2.1 KiB Raw Permalink Blame History