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.6 KiB

Raw Permalink Blame History

name, description

name	description
browse-design-system	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:

{output_folder}/D-Design-System/design-tokens.md — All tokens
{output_folder}/D-Design-System/components/*.md — All components
{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:

Log desired changes (rename token, add variant, fix inconsistency)
On exit, present action list
Route to appropriate activity: [C] Create, [E] Edit, or [V] View

AFTER COMPLETION

Update design log
Stop localhost server, discard generated app
Return to Phase 7 Activity Menu

2.6 KiB Raw Permalink Blame History