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  --color