design

name	design
description	design (@aphrody/design) is a high-performance design compiler and prompt processing engine. It compiles raw natural-language briefs into Material Design 3 and Google Design compatible layouts and HCT-inspired tonal style sheets. Use this skill when generating UI layouts, building Material Design 3 templates, or compiling tonal color schemes.

@aphrody/design Compiler

@aphrody/design compiles design briefs into visual structures, exporting production-ready layout trees (React 19 / Lit) and HCT-based theme stylesheets.

Key Decoupled Components

Semantic Parser (parser.ts) -> HCT Palette (hct.ts) -> Layout Generator (generator.ts) -> REST Daemon/CLI (server.ts)

1. Semantic Parser: Automatically parses structural layout configurations (deck, prototype, dashboard, mobile, editorial), density (high, default, low), target viewport (ios, desktop-web), and primary colors from natural language prompts.
2. HCT Theme Compiler: Dynamic color generator matching Google's HCT (Hue, Chroma, Tone) space. Automatically generates 18 tonal steps for primary, secondary, tertiary, error, neutral, and neutral-variant keys.
3. Layout Generator: Compiles Layout trees and applies mutations (such as converting sidebars to navigation bars for mobile profiles, or applying AR desaturation overlays).
4. Self-Critique Engine: Conducts static analysis on UI results, grading them against Material Design 3 specs.

CLI Usage

Run prompt parsing and layout generation directly to console:

# Run design compiler from workspace root
bun apps/design/src/server.ts --prompt "Fais un deck sombre compact en bleu" --color "#0F52BA"

Start the HTTP REST server daemon (binds to port 3005):

bun apps/design/src/server.ts

REST API Endpoint

• Endpoint: POST /api/generate
• Payload:

  {
    "prompt": "Tableau de bord dense rouge",
    "seedColor": "#CE422B"
  }
  

• Response: Returns GenerationResult containing compiled layoutCode (React/Lit), themeCss (CSS Custom properties matching --md-sys-color-*), and critique review scores.