LLM Design Engine
A TypeScript design compiler that makes product and visual decisions explicit before a coding agent writes frontend code. It transforms a brief into domain interpretation, creative directions, an approved design specification, deterministic previews, brand assets, quality checks, and a portable implementation handoff.
Project facts
- Role
- I defined the product, artifact contract, creative pipeline, interfaces, and monorepo architecture, then built the MCP, CLI, renderer, provider adapters, Studio, and validation workflow.
- Timeline
- July 2026 · Open-source developer tool
- Team
- Independent project · 1 developer
The Challenge
Coding agents can implement interfaces quickly, but vague design prompts repeatedly converge on generic layouts, decorative gradients, glass cards, and visuals unrelated to the product. The challenge was to preserve creative reasoning while producing deterministic, machine-readable artifacts that another agent can execute.
Key decision
Separate provider-backed creative reasoning from a stable design artifact contract so local deterministic mode and AI-assisted mode produce the same executable handoff.
Approach
Built a staged compiler workflow: brief, four creative directions, selection, design specification, preview, refinement, approval, brandkit, anti-slop lint, and export. A local STDIO MCP server exposes the workflow directly to Claude Code, Codex, OpenCode, and Oh My Pi, while the CLI writes portable .design Markdown and JSON artifacts into any repository. Zod-backed contracts keep the design AST valid, and deterministic renderers make previews reproducible without an API key.
Key Highlights
- End-to-end MCP and CLI workflow for coding agents
- Four distinct creative directions before implementation begins
- Portable .design artifacts with implementation-ready EXPORT.md
- Deterministic local mode that works without an AI key
- Anti-slop linting for generic visual patterns and unexplained design choices
- OpenAI-compatible reasoning and image-provider adapters
Architecture
- TypeScript and pnpm monorepo with isolated compiler packages
- STDIO MCP server with tools, resources, and reusable prompts
- CLI and local Hono API for repository-bound workflows
- Zod-validated design AST with Markdown and JSON serialization
- Deterministic HTML, CSS, and SVG preview renderer
- Provider seams for local mock and OpenAI-compatible reasoning
Outcome
A complete local-first design workflow that agents can run without credentials, then extend with reasoning and image providers without changing the artifact contract or implementation handoff.