Open Design: Local AI UI via Existing Coding Agents
Open Design runs locally, plugs into your Claude Code or Codex CLI setup, and uses 19 skills + 71 design systems to generate structured prototypes, dashboards, and decks without new subscriptions.
Leverage Skills and Design Systems for Consistent AI Outputs
Open Design structures AI design generation around 19 composable skills—like SaaS landing pages, dashboards, pricing pages, docs, blog posts, mobile apps, decks, PM specs, invoices, Kanban boards, and OKRs—and 71 pre-built design systems inspired by Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Raycast, Lovable, Mistral, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, and ClickHouse. Each skill enforces templates and rules (e.g., data-dense admin UIs for dashboards, not generic marketing pages), while DESIGN.md files specify color, typography, spacing, layout, components, motion, voice, brand rules, and anti-patterns. This prevents generic AI slop like purple gradients, emoji icons, random rounded cards, fake metrics, or overused decorations by providing stable constraints upfront.
Start with a discovery form that captures audience, tone, context, scale, and constraints before generation—saving 30 minutes of iterations by avoiding bad initial directions. Pick from five visual directions (editorial modern, minimal, tech utility, brutalist, soft warm) for deterministic palettes and fonts if no brand exists. Prompts include a five-dimensional critique (design philosophy, hierarchy, execution, specificity, restraint) and per-skill checklists (P0/P1/P2 rules) to ensure quality. Outputs render in a sandboxed iframe and export as HTML, PDF, ZIP, Markdown, or PPTX.
This setup turns vague prompts ("make a nice page") into reliable artifacts because models fail without visual systems, checklists, and reasons to avoid repetition—skills and DESIGN.md provide that source of truth, persisting across refinements.
Run Locally with Any Coding Agent, No Extra Costs
Clone the Apache 2.0-licensed repo, run nvm use, corepack enable, pnpm install, and pnpm devall to start the Vite/React/TS frontend (port 5173) and Node/Express daemon with SQLite storage (port 7456). It auto-detects installed CLIs like Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, or Qwen Code from your PATH, using them as the design engine in a real working directory under .ood for file I/O. Falls back to Anthropic API with your key if none found.
The daemon spawns the agent per project, enabling versioned, editable workflows—teams can fork skills or add custom DESIGN.md for internal dashboards. Costs match your existing agent (e.g., Claude Code fees or free local OpenAI setups), avoiding separate design subscriptions. Streaming works best with Claude Code's structured JSON; others use line buffering.
Trade-offs: Early Stage, Agent-Dependent Quality
Output quality hinges on your agent's model—stronger models excel with these constraints, but weak ones won't magically improve. Treat as prototype starter: review code, fix responsiveness, accessibility, and refine manually. Not production-ready for teams yet; lacks full comment mode, surgical edits, or AI tweaks panel (roadmap). Security note: daemon spawns agents with directory access, so curate skills carefully.
Ideal for indie hackers/students with one coding tool: quick landing pages, internal dashboards, decks, visual experiments. Combines existing agents + file-based skills + design systems for local, versionable design—superior to locked chatboxes, pushing AI UI toward inspectable, structured generation over random prompting.