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
Verification
- MCP tests drive a real child-process client through all 13 tools, prompts, resources, file output, and error contracts
- Unit suites cover the design AST, provider-output validation, deterministic rendering, and all 12 anti-slop rules
- GitHub Actions runs typecheck, lint, build, Vitest, MCP integration tests, Playwright, and screenshot checks
Current limitations
- The default mock provider is local-first; provider-backed reasoning requires separate OpenAI-compatible credentials
- Preview output validates composition and layout rather than pixel-complete typography, imagery, or motion
- Repository implementation verification, multi-page route graphs, and team review remain deferred
Outcome
An operational v0.1 local-first compiler with tested MCP and CLI contracts. It produces portable design artifacts and deterministic previews, while deliberately stopping short of claiming autonomous frontend verification or final visual fidelity.