AI-powered UI generation with 100 design genomes
Motif generates production-grade, single-file HTML interfaces from natural language prompts. Instead of generic templates, every output is shaped by a genome — a complete design philosophy defining colors, typography, spacing, motion, editorial voice, and anti-patterns. The result is UI that feels intentionally designed, not AI-generated.
100 handcrafted design genomes, each encoding an opinionated visual language:
| # | Genome | Aesthetic |
|---|---|---|
| 01 | lab_manual.80s |
Clinical swiss-style, red/white/black |
| 02 | modern_studio.pro |
Sleek minimalist, violet/chartreuse |
| 03 | neo_brutalist.zine |
Bold editorial, asymmetric layouts |
| 04 | underground_terminal.crt |
CRT amber/black, glitch effects |
| 05 | handheld_gb.dmg |
Game Boy 4-color, pixel-perfect |
| 06 | panavision.70s |
Warm cinematic, orange/cream |
| 07 | scientific_calc.hp |
Calculator interface, monospaced |
| 08 | biosequence_lab.gen |
Biotech, sequence visualizations |
| 09 | signal_void.cc |
Dark signal processing aesthetic |
| 10 | gallery_foyer.institution |
Museum gallery, curated whitespace |
| ... | ||
| 48 | constructivist_poster.agit |
Propaganda-inspired, angular |
| 49 | abyssal_bloom.deep |
Deep-sea bioluminescence |
| 50 | chalkboard_lesson.edu |
Chalkboard handwritten feel |
| ... | ||
| 100 | and 50 more | See api/src/genomes/ |
Each genome defines color palettes with distribution ratios, typography stacks, border rules, component patterns, interaction states, motion specifications, atmosphere effects, and explicit anti-patterns.
Shuffle mode blends two genomes per variant — primary dominates colors and voice, secondary influences layout rhythm and motion.
Generate 1–8 UI variants in parallel from a single prompt. Each variant streams in real-time via SSE, with live iframe previews updating as code arrives.
Pick up the visual style from one generation and apply it to another's content. A WebGL2 shader overlay renders an iridescent glow with chromatic aberration and ripple distortion as you hover targets.
Iteratively refine any generation with natural language instructions. The LLM applies edits while preserving the original genome's design language. Parent-child lineage is tracked across edits.
Inspect any generation across viewport sizes — Mobile (375px), Tablet (768px), Laptop (1280px), Desktop (1920px), or Full — with metadata and raw HTML side panels.
Automated responsive audit that renders each generation at four viewport widths and scores layout quality. Flags overflow, tiny text, fixed-width issues, and other breakpoint problems.
Multi-genome blending beyond simple shuffle. Pick 2+ genomes and assign each a weight and a design aspect (colors, typography, layout, borders, motion, atmosphere, or voice). The weighted blend config is passed to the LLM for fine-grained style mixing.
Inspect and debug transitions and animations inside any generation. Slow-motion playback (0.25x–1x), highlight all transitioning elements, and trigger pseudo-states (hover, focus, active, focus-visible) on demand.
Generate variations of an existing design. Adjust batch size and variation strength, then produce new variants that riff on the original while preserving its core identity.
Side-by-side A/B comparison. Enter a prompt once and generate it with two different genomes simultaneously, streaming both panels in real-time. Save either result to your library.
Like Compare View but scaled up — pick multiple genomes and generate the same prompt across all of them in parallel for rapid genome evaluation.
Visual tree diagram of a generation's edit history. See the full parent-child chain from the original through every iterative edit, with click-to-preview on any node.
Extract and save reusable components from any generation. Browse your saved components with live previews, copy HTML, or delete entries you no longer need.
Export any generation to React, Vue, or Svelte component code via LLM conversion. Also extract design tokens in CSS custom properties, JSON, or Tailwind config format.
Save frequently used prompts as reusable templates with {{variable}} placeholders. Fill in variables at generation time for consistent, repeatable workflows.
Usage analytics showing generation counts over time, most-used genomes, model usage breakdown, and daily activity charts.
Conversational editing interface — refine a generation through a threaded chat with the LLM while preserving the genome's design language.
Upload a screenshot or design image and generate matching HTML/Tailwind code, shaped by the selected genome.
motif/
├── api/ # Express 5 backend
│ └── src/
│ ├── index.ts # Server entry, routes
│ ├── db.ts # SQLite setup + migrations
│ ├── openrouter.ts # LLM proxy (streaming)
│ └── genomes/ # 100 genome markdown files + base prompt
│ ├── _base.md
│ ├── 01_lab_manual.80s.md
│ └── ...
├── web/ # React 19 + Vite 8 frontend
│ └── src/
│ ├── App.tsx # Root layout + tab routing
│ ├── store.ts # Zustand state (app + settings)
│ ├── api.ts # SSE streaming client
│ └── components/
│ ├── TopBar.tsx
│ ├── PromptBar.tsx
│ ├── ChatSidebar.tsx # Conversational editing
│ ├── MasonryGrid.tsx
│ ├── VariantCard.tsx # Lazy-loaded iframe with texture caching
│ ├── StreamingCard.tsx # Live preview during generation
│ ├── PreviewView.tsx # Full-screen detail + viewport switcher
│ ├── CompareView.tsx # Side-by-side A/B genome comparison
│ ├── BatchCompareView.tsx # Multi-genome batch comparison
│ ├── BlendStudio.tsx # Multi-genome weighted blending
│ ├── AnimationPlayground.tsx # Transition/animation inspector
│ ├── ResponsiveChecker.tsx # Automated responsive audit
│ ├── ComponentLibrary.tsx # Saved component browser
│ ├── LineageView.tsx # Edit history tree visualization
│ ├── ExportModal.tsx # Framework export + token extraction
│ ├── TemplateModal.tsx # Prompt template manager
│ ├── AnalyticsModal.tsx # Usage analytics dashboard
│ ├── VaryPopup.tsx # Variation generation controls
│ ├── SettingsView.tsx # Configuration modal
│ ├── GenerationProgress.tsx
│ └── ShaderOverlay.tsx # WebGL2 dropper effects
├── shared/
│ └── types.ts # Shared TypeScript interfaces
├── .claude/
│ └── skills/
│ └── genome-authoring/ # Claude Code skill for creating genomes
│ ├── SKILL.md # Full authoring guide (9 layers, quality checklist)
│ └── references/ # Layer reference docs
└── package.json # Monorepo root (concurrently)
| Layer | Technology |
|---|---|
 Frontend |
React 19, Vite 8, Tailwind CSS 4 |
 API |
Express 5, better-sqlite3 |
 Language |
TypeScript 5.9 (strict) |
 LLM |
OpenRouter (Claude, GPT-4, etc.) |
| State | Zustand with shallow selectors |
| Icons | Bootstrap Icons |
| GPU | WebGL2 custom shaders |
- Node.js 18+
- An LLM provider — one of:
- OpenRouter API key (openrouter.ai) — access to Claude, GPT-4, Gemini, etc.
- Ollama running locally (ollama.com) — free, fully offline
- LM Studio running locally (lmstudio.ai) — free, fully offline
git clone https://github.com/oshtz/motif.git
cd motif
npm install # installs root + api + web dependencies automaticallynpm run devThis starts both servers concurrently:
| Service | URL |
|---|---|
| Frontend | http://localhost:4388 |
| API | http://localhost:4389 |
The Vite dev server proxies /api requests to the backend automatically.
Open the app and click the gear icon to set:
- Provider — OpenRouter, Ollama, LM Studio, or a custom endpoint
- API Key — your provider token (not needed for local providers)
- Model — select from available models (searchable)
- Temperature — creativity dial (0–2)
- Batch Size — variants per generation (1–8)
- Genome — pick a specific genome or leave on auto-select
- Shuffle — blend two genomes per variant
- Custom System Prompt — bypass the genome system entirely
All configuration is stored locally in the SQLite database — no .env files needed.
| Method | Endpoint | Description |
|---|---|---|
GET |
/api/settings |
Retrieve all settings |
PUT |
/api/settings |
Update settings |
GET |
/api/models |
List available LLM models via OpenRouter |
GET |
/api/genomes |
List all genomes with metadata |
GET |
/api/genomes/recommended |
Get recommended genomes for a prompt |
POST |
/api/genomes/reload |
Force reload genomes from disk |
GET |
/api/motifs |
List saved motifs (project folders) |
POST |
/api/motifs |
Create a new motif |
PATCH |
/api/motifs/:id |
Update a motif |
DELETE |
/api/motifs/:id |
Delete a motif |
GET |
/api/generations |
Fetch all saved generations |
GET |
/api/analytics |
Usage analytics (genome usage, daily counts) |
POST |
/api/generate |
Generate UI variants (SSE stream) |
POST |
/api/generate-from-image |
Generate UI from an uploaded image (SSE) |
POST |
/api/edit |
Edit an existing generation with instructions (SSE) |
POST |
/api/vary |
Generate variations of an existing design (SSE) |
POST |
/api/style-drop |
Apply style from one generation to another (SSE) |
POST |
/api/compare |
Side-by-side genome comparison (SSE) |
POST |
/api/compare-batch |
Multi-genome batch comparison (SSE) |
POST |
/api/compare/save |
Save a compare result as a generation |
POST |
/api/reorganize |
Reorganize/restructure a generation (SSE) |
PATCH |
/api/generations/:id/favorite |
Toggle favorite |
PATCH |
/api/generations/:id/css |
Update generation CSS |
PUT |
/api/generations/:id/thumbnail |
Update generation thumbnail |
DELETE |
/api/generations/:id |
Delete a generation |
POST |
/api/generations/:id/export |
Export to React/Vue/Svelte |
POST |
/api/generations/:id/extract-tokens |
Extract design tokens |
GET |
/api/generations/:id/lineage |
Get edit lineage tree |
GET |
/api/components |
List saved components |
POST |
/api/components |
Save a component |
DELETE |
/api/components/:id |
Delete a saved component |
GET |
/api/styles |
List saved styles |
POST |
/api/styles |
Save a style |
GET |
/api/templates |
List prompt templates |
POST |
/api/templates |
Create a prompt template |
PUT |
/api/templates/:id |
Update a prompt template |
DELETE |
/api/templates/:id |
Delete a prompt template |
This repo includes a Claude Code skill for authoring new genomes. If you have Claude Code installed, just ask it to create a new genome:
> create a genome inspired by art deco movie palaces
The skill (.claude/skills/genome-authoring/SKILL.md) guides Claude through the full authoring workflow:
- 9 required layers — surface, color distribution, component patterns, interaction language, motion & feedback, atmosphere, editorial voice, cursor & selection, anti-patterns
- Deduplication check — compares against all existing genomes across 7 dimensions to avoid overlap
- Quality checklist — 15-point verification before the genome is finalized
- Auto-discovery — new genome files dropped into
api/src/genomes/are picked up at runtime
See the skill file and its references/ directory for the complete specification.
Prompt → Expand → Select Genome → Generate HTML → Stream to Client
↓
┌──────────────┐
│ 100 Genomes │ ← Color, type, spacing, motion,
│ (markdown) │ voice, anti-patterns
└──────────────┘
- Prompt expansion — the LLM transforms a short prompt into a detailed UI specification
- Genome selection — auto-selects the best-matching genome (or uses explicit choice)
- Code generation — LLM produces single-file HTML with Tailwind, shaped by the genome's system prompt
- Streaming delivery — chunks arrive via SSE, rendered in live iframe previews
- Post-processing — Tailwind CDN injection, bare hex color fixes, HTML extraction from markdown fences
# Frontend
cd web && npm run build # → web/dist/
# API
cd api && npm run build # → api/dist/
cd api && npm start # Production server