| 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)
- 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.
- 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.
- Layout Generator: Compiles Layout trees and applies mutations (such as converting sidebars to navigation bars for mobile profiles, or applying AR desaturation overlays).
- 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:
bun apps/design/src/server.ts --prompt --color
