omp-designer — Autonomous AI Design System (v4.1)

A /designer extension for oh-my-pi that turns your AI coding agent into a UI/UX design specialist.

omp install npm:omp-designer

Then /designer → DESIGNER MODE ON.

---

How it works

User: "build me a website about AI"
         │
         ▼
┌─────────────────────────────────────────────┐
│  STEP 1: INTERACTION MODE                    │
│  Guided / Adaptive / Autonomous / Batch      │
│  Batch never waits; Autonomous asks 1 emotion│
└─────────────────┬───────────────────────────┘
                  ▼
┌─────────────────────────────────────────────┐
│  STEP 2: PRODUCT.md + EVIDENCE.md            │
│  Write brief + claim tracking before design  │
└─────────────────┬───────────────────────────┘
                  ▼
┌─────────────────────────────────────────────┐
│  STEP 3: PLAN (MANDATORY)                    │
│  7-section plan with MCP research log        │
│  Approval behavior follows selected mode     │
└─────────────────┬───────────────────────────┘
                  ▼
┌─────────────────────────────────────────────┐
│  STEP 4: MCP RESEARCH                        │
│  designmd, ui-layouts, 21st-dev, browser     │
│  Fallback: web_search if MCPs unavailable    │
└─────────────────┬───────────────────────────┘
                  ▼
┌─────────────────────────────────────────────┐
│  STEP 5: DESIGN TOKENS                       │
│  CSV palette default; user brand wins        │
│  Typography from typography.csv              │
│  DESIGN.md written before any component      │
└─────────────────┬───────────────────────────┘
                  ▼
┌─────────────────────────────────────────────┐
│  STEP 6: BUILD                               │
│  Components following approved plan          │
│  generate_image for hero visuals             │
└─────────────────┬───────────────────────────┘
                  ▼
┌─────────────────────────────────────────────┐
│  STEP 7: POST-BUILD SELF-CHECK (MANDATORY)   │
│  fix-ai-slop.mjs + analyze-layout.mjs        │
│  npm run build + impeccable detect            │
│  Section viewport screenshots                │
└─────────────────┬───────────────────────────┘
                  ▼
┌─────────────────────────────────────────────┐
│  STEP 8: ANTI-SLOP VERIFICATION              │
│  Substitution test + rationale test          │
│  Anti-overcorrection check                   │
│  Shipping readiness vs slop risk             │
└─────────────────────────────────────────────┘

Interaction modes

Mode	Trigger	Questions	Approval
Guided	User asks to be asked or wants a guided process	3-5 multiple-choice	Wait after plan
Adaptive	Normal brief with a few missing facts	Only decision-critical	Wait after plan
Autonomous	"surprise me", "impress me", "i trust you"	One emotion question	Continue after plan unless user asks for approval
Batch	omp -p, "do not wait", "build it now", "no approval"	None; document assumptions	No wait

---

The 12 Skills

Skill	When Agent Reads It	What It Contains
designer-master	First (workflow contract)	8-step workflow, palette table, plan template
ai-slop	During planning	Canonical anti-slop definition, substitution test, rationale test, 14 evaluation dimensions
product-md	Before design work	PRODUCT.md format, EVIDENCE.md template, "never invent facts"
taste-skill	During planning + after building	Brief inference, dials, AI tells checklist, pre-flight check
design-md	Before building	DESIGN.md format, Tailwind v4 notes, motion notes
ui-ux-pro-max	During planning	How to pick from CSV data files (161 palettes, 57 font pairings)
reference-study	During planning	How to study real websites before designing
copywriting	Before building	Human copy rules, banned words, validation checkpoint
scroll-choreography	Before building	Narrative motion patterns, mobile fallbacks
animate	During building	Animation patterns, easing, timing
visual-critique	After building	Screenshot evaluation, mobile QA, reveal-trigger protocol
review-skill	After building	Post-build audit, dimension-based evaluation, anti-overcorrection

---

MCP Servers

Server	What It Provides	When Used
21st-dev-magic	Component inspiration, SVG logos	During planning
ui-layouts	60+ real React/TSX components	During planning + building
chrome-devtools	Headless browser screenshots	During planning + review
designmd	Design system references	During planning

---

Anti-Slop System

Canonical reference

• ai-slop.md (679 lines) — the single source of truth for what constitutes AI slop

Deterministic validators

• fix-ai-slop.mjs — read-only by default (--check); catches em-dashes, buzzwords, fake numbers, stock photos, unsupported EVIDENCE.md claims, overused fonts, commerce claims. Use --fix only for deterministic em-dash cleanup.
• analyze-layout.mjs — read-only; catches off-palette source colors, motion timing issues, missing tablet breakpoint coverage for complex layouts, layout problems, CSV palette validation, and allows user-provided brand colors/documented derivations.
• Automatic session-stop gate — in omp, designer mode runs both validators automatically before the final assistant response when the current directory looks like a generated project. Blocking issues force an internal continuation instead of shipping.

Evaluation framework

• 14 dimensions scored 0-4 (product grounding, truthfulness, specificity, narrative, composition, system coherence, copy, imagery, motion, accessibility, responsiveness, functional completeness, distinctiveness)
• Shipping readiness — pass/fail on blocking defects
• Slop risk — weighted score from 0-100

Observability

• Run trace — when designer mode is enabled, the omp extension writes JSONL events to ~/.omp/agent/designer-traces/<cwd-hash>.jsonl.
• Traced events — prompt injection, skill discovery, agent start/end, tool calls/results, automatic validation start/pass/fail, validator/build command kinds.
• Phase tracking — the extension tracks workflow phase (idle → planning → building → reviewing → validated) based on tool call patterns. Phase is stored in ~/.omp/agent/designer-phases/<cwd-hash>.json and reported by /designer-doctor. Session-stop validation failures include the current phase.
• Doctor command — /designer-doctor writes source/install/skill/MCP/trace/phase health into the editor.

Regression suite

• Golden corpus — eval/prompts.jsonl contains 20 fixed prompts across landing pages, e-commerce, redesign/edit, dashboards, forms, content, checkout, multi-page, mobile, reduced motion, and adversarial asks.
• Eval harness — node scripts/eval-suite.mjs validate checks corpus coverage; commands prints reproducible omp -p runs; score <output-root> runs deterministic validators over generated outputs.
• Trace audit — node scripts/audit-trace.mjs <trace.jsonl> --strict verifies prompt injection, skill discovery, automatic validation, explicit validator calls, and build calls.
• 30 regression tests — npm run test:validators (11), npm run test:layout (5), npm run test:trace (3), npm run test:prompt (8), npm run test:eval (corpus).

---

Files

omp-designer/
├── extension/index.ts           # omp extension (PROMPT_INJECT, MCP toggling, trace, doctor)
├── extensions/designer.ts       # Pi extension
├── skills/                      # 12 design skills
│   ├── ai-slop.md               # Canonical anti-slop reference (NEW)
│   ├── designer-master.md       # Workflow contract
│   ├── taste-skill.md           # Anti-slop rules + AI tells
│   ├── product-md.md            # Brief capture + EVIDENCE.md
│   ├── design-md.md             # DESIGN.md format
│   ├── ui-ux-pro-max.md         # CSV data usage
│   ├── reference-study.md       # Reference study guide
│   ├── copywriting.md           # Human copy rules
│   ├── scroll-choreography.md   # Motion patterns
│   ├── animate.md               # Animation patterns
│   ├── visual-critique.md       # Screenshot evaluation
│   └── review-skill.md          # Post-build audit
├── data/
│   ├── ui-ux-pro-max/           # 1.7MB design database (CSVs)
│   └── scroll-templates.tsx     # Reusable scroll patterns
├── scripts/
│   ├── fix-ai-slop.mjs          # Read-only anti-slop validator; --fix mutates
│   ├── analyze-layout.mjs       # Layout + palette + motion validator
│   ├── check-release.mjs        # Version + secret hygiene release gate
│   ├── eval-suite.mjs           # Golden prompt corpus validator/scorer
│   └── audit-trace.mjs          # JSONL run trace auditor
├── eval/
│   ├── prompts.jsonl            # 20-prompt regression corpus
│   └── fixtures/                # Existing-app fixtures for redesign/edit tests
├── test-output/                 # Test projects
├── docs/problems.md             # Known issues + fixes
└── loop.md                      # Improvement loop

---

Quickstart

omp install npm:omp-designer
omp
/designer                        # DESIGNER MODE ON
/designer-doctor                 # Optional: verify install, skills, MCPs, trace path
/designer-reset                  # Reset skill gate after ordering violation
"Build me a SaaS landing page"   # Agent asks questions first
# Answer the questions
# Agent shows plan with MCP research log
# Type "accept"
# Agent builds
# Agent runs fix-ai-slop --check + analyze-layout
# Agent takes section screenshots
# Agent reports substitution test + rationale test

Platform support

Feature	OMP (oh-my-pi)	Pi (pi.dev)
Pre-execution tool blocking	Yes	No (prompt-only)
Skill read tracking	Yes	No
Session-stop validation	Yes	No
Trace logging	Yes	No
Doctor command	Yes	No

For guaranteed skill-reading enforcement, use OMP. Pi relies on model compliance with prompt instructions.

---

Best Model

MiniMax M3 (opencode-go/minimax-m3:high) — best design taste. DeepSeek V4 Flash also good for testing.

---

License

MIT.