# Open Design

> Generate brand-constrained, quality-gated visual artifacts instead of freestyle output. Use when the user asks for a web prototype, landing/marketing page, SaaS dashboard, mobile mockup, slide deck, email template, or any HTML visual artifact that must look professional and stay on-brand. Composes from a design-system library with a structured intake and self-critique gate.

- Skill: `dreamlab-ai/open-design` (Agent Skill, multi-file: 150 files)
- Install (CLI): `npx skillmds@latest add dreamlab-ai/open-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dreamlab-ai/open-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: dreamlab-ai (https://skillmd.com/u/dreamlab-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dreamlab-ai/open-design

---


# Open Design — Production Design Pipeline

Generate professional visual artifacts constrained by brand specifications, quality gates, and structured workflows. Not freestyle generation — compositional design from validated parts.

## Routing Trigger

Route to this skill when the user asks for UI mockups, visual documentation, design system generation, slide decks, landing pages, dashboards, or any quality-gated HTML visual artifact. Agent count: 1 (single-agent pipeline with self-critique gate).

**Not a replacement for the setup wizard SPA.** The setup wizard (`PRD-012 / ADR-024`) is a browser-based first-boot configuration tool. Open Design generates brand-constrained visual artifacts; it has no role in agentbox configuration or provisioning.

## When To Use This Skill

- Web prototypes, landing pages, marketing pages
- SaaS dashboards, admin panels, analytics views
- Mobile app mockups (iOS/Android frame-accurate)
- Slide decks, presentations, pitch decks
- Email marketing templates
- Social media carousels, posters
- Any HTML artifact requiring brand consistency

## Prerequisites

- A design brief (what to build, for whom)
- Optional: a DESIGN.md brand specification (see `design-systems/` for the ready-made brand library — count in Design System Library below)
- If no brand spec provided, the skill generates one using the structured intake

---

## Workflow

### Phase 1 — Structured Intake

Ground the work in these five dimensions before generating. They are the highest-leverage
step — a weak intake is the usual root cause of generic output — so resist the urge to skip
straight to HTML.

| Dimension | Question | Why |
|-----------|----------|-----|
| **Surface** | What are we building? (landing, dashboard, mobile, deck, email) | Routes to correct layout library |
| **Audience** | Who sees this? (developers, executives, consumers, designers) | Sets information density and tone |
| **Tone** | What aesthetic direction? (see Tone Library below) | Prevents generic output |
| **Brand** | Existing design system? Logo/colors/fonts? | Enforces token consistency |
| **Scale** | How many screens/sections? One-shot or system? | Scopes the deliverable |

If the user's brief already covers all five, proceed. Otherwise ask a couple of concise
questions to fill the gaps rather than guessing — generating on thin context is how you end
up reworking. For a fast throwaway or an explicit "just show me something" request, it is fine
to pick sensible defaults and note the assumptions instead of blocking on questions.

### Phase 2 — Design System Resolution

Resolve a DESIGN.md before writing any HTML/CSS:

1. **Named brand exists** → Load from `design-systems/{brand}/DESIGN.md`
2. **User provides tokens** → Generate a DESIGN.md following the schema in `references/design-system-schema.md`
3. **No brand specified** → Use one of five default visual directions:
   - **Editorial** — serif display, generous whitespace, magazine grid
   - **Modern Minimal** — Inter/system-ui, strict whitespace, single accent
   - **Tech Utility** — mono accents, dense but legible, dashboard-native
   - **Brutalist** — raw structure, harsh contrast, exposed grid
   - **Soft Warm** — rounded forms, warm neutrals, approachable

### Phase 3 — Compose (Not Generate)

Select a surface archetype and compose from its layout library:

| Surface | Layout Source | Sections |
|---------|--------------|----------|
| Landing/Marketing | `references/layouts-web.md` | hero → features → proof → pricing → cta → footer |
| Dashboard | `references/layouts-dashboard.md` | sidebar + topbar + KPI grid + charts |
| Mobile | `references/layouts-mobile.md` | 6 archetypes: Feed, Detail, Onboarding, Profile, Checkout, Focus |
| Deck/Presentation | `references/layouts-deck.md` | title → agenda → content slides → summary |
| Email | `references/layouts-email.md` | header → hero → body → cta → footer |

**Hard rules during composition:**
- All colors from DESIGN.md tokens via CSS variables — no raw hex outside `:root`
- Display font for headings, body font for text — never override
- Accent used at most twice per screen (eyebrow + primary CTA)
- No emoji as icons — use inline SVG or monospace glyphs
- No filler copy — real, specific content or labeled placeholders
- Semantic HTML (`<header>`, `<main>`, `<section>`, `<footer>`)
- `data-od-id` on every top-level `<section>` for targeting
- Mobile reflow works at ≤920px without horizontal scroll

### Phase 4 — Five-Dimensional Critique (Quality Gate)

Before emitting the artifact, self-score across five dimensions:

#### 1. Philosophy Consistency (0–10)
Does the artifact pick one clear direction and maintain it through every micro-decision? One coherent design thesis, no conflicting styles.

#### 2. Visual Hierarchy (0–10)
Can a stranger identify what to read first, second, third? Type scale, weight, and semantic font choices guide attention without instruction.

#### 3. Detail Execution (0–10)
The 90/10 stuff: alignment, leading, kerning, image framing, baseline work. Magazine-grade precision in spacing.

#### 4. Functionality (0–10)
Navigation works, click targets are adequate (≥44px mobile), readability at viewing distance, edge cases handled (mobile, print, paste).

#### 5. Innovation (0–10)
Does this push past the median? Unexpected layout or typographic moves that earn their place within the design thesis. Generic output scores 5.

**Scoring discipline:**
- 0–4: Broken | 5–6: Functional | 7–8: Strong | 9–10: Exceptional
- Lowest sustained band becomes the score — don't average away failures
- Cite specific elements as evidence
- Conservative production work may legitimately score 5 on Innovation

**Gate**: Treat ≥6 on every dimension as the bar for finished work — a dimension scoring ≤5
is a signal to fix it before emitting, not a rule to game. Innovation is the one dimension
where a deliberate, conservative 5 can be the right call (see the scoring note above); the
others rarely should be. If you ship below the bar, say why in the one-line summary.

### Phase 5 — P0/P1/P2 Checklist

#### P0 — Must Pass
- [ ] No raw hex outside `:root` token block
- [ ] All headings use declared display font
- [ ] Accent appears at most twice per screen
- [ ] No purple/violet gradient backgrounds (unless brand-specified)
- [ ] No emoji as feature icons
- [ ] No invented metrics or unsourced claims
- [ ] No filler copy or lorem ipsum
- [ ] Mobile reflow works (single column ≤920px, no horizontal scroll)
- [ ] All text is content-meaningful

#### P1 — Should Pass
- [ ] One decisive visual flourish (not multiple competing flourishes)
- [ ] Section rhythm alternates (no consecutive identical patterns)
- [ ] Headlines under 14 words
- [ ] CTA buttons specify outcomes ("Start free" not "Get Started")
- [ ] Hover states present on all interactive elements
- [ ] Numerics use monospace/tabular setting
- [ ] One image style per page (consistent framing)

#### P2 — Nice to Have
- [ ] `text-wrap: pretty` / `balance` on headings
- [ ] `color-mix()` for derived tones (no token proliferation)
- [ ] Sticky nav with `backdrop-filter: blur()`
- [ ] System-first font loading with web font enhancement

### Phase 6 — Anti-Slop Gate (deterministic + judgment)

**6a. Deterministic scan (no LLM).** Run the static detector over the emitted
source before judging it by eye:

```bash
slop-detect path/to/artifact.html --min-severity warn
```

It flags the CLI-layer signals in `references/slop-rules-catalog.md`
(overused-font, purple→blue gradient, gradient-text, gray-on-color, tiny-text,
bounce-easing, layout-transition, side-tab, nested-cards, skipped-heading, …) and
honours inline `/* slop-disable <rule> */` suppressions. Exit code = finding
count, so it doubles as a CI gate. Fix every `warn`/`error` or record a justified
exception (see Memory below).

**6b. Browser layer.** For computed-layout rules (line-length, low-contrast,
cramped-padding, flat-type-hierarchy, monotonous-spacing) render with the
`browser` sidecar and measure — these can't be seen statically.

**6c. Judgment layer.** Apply the LLM-only rows of the catalogue. If the output
resembles generic AI startup pages:
1. Replace one feature cell with product-specific content (screenshot, concrete example, actual output)
2. Remove one accent color use
3. Check: would a designer be embarrassed to claim this? If yes, redo Phase 3.

**Explicit slop blacklist:**
- Inter/Roboto/Space Grotesk as display font on a marketing page
- Generic SaaS blue (#3B82F6) with purple gradient hero
- Glass morphism cards floating over abstract mesh gradients
- Cookie-cutter 3-card feature grids with generic iconography
- "10x faster", "loved by thousands", unsubstantiated social proof

### Phase 7 — Emit

```
<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
<!doctype html>
<html>...</html>
</artifact>
```

One sentence before the artifact describing what's delivered. Nothing after.

Claude Code only: the `<artifact>` tag is a Claude/Claude-Code affordance. On Codex / GPT-6 Astra: write the HTML to a file and report its path instead of emitting an `<artifact>` block.

---

## Tone Library (26 Directions)

| Tone | Character |
|------|-----------|
| Brutally minimal | Stripped essence, bold type, vast whitespace |
| Retro-futuristic | Vintage meets sci-fi, nostalgic tech |
| Organic/natural | Soft edges, earthy colors, nature textures |
| Editorial/magazine | Strong hierarchy, asymmetric layouts |
| Brutalist/raw | Exposed structure, harsh contrasts |
| Art deco/geometric | Bold patterns, metallic, symmetric |
| Neo-Swiss Grid | Rigorous grid, restrained palette |
| Anti-Grid Experimental | Intentional misalignment, art-school energy |
| Monochrome High-Contrast | Black/white only, graphic punch |
| Duotone Pop | Two-color system, poster impact |
| Kinetic Typography | Type as motion, warped letterforms |
| Glitch/Digital Noise | Scanlines, chromatic offsets |
| Y2K Cyber Gloss | Chrome gradients, gel buttons |
| Vaporwave Nostalgia | Neon dusk, faux-3D, retro mall |
| Synthwave Night Drive | Magenta/cyan, grid horizons |
| Memphis Playful | Squiggles, confetti geometry |
| Bauhaus Modernism | Primary colors, functional clarity |
| Constructivist | Diagonals, bold blocks, commanding |
| Cinematic Noir | Moody shadows, grain, spotlighting |
| Clay/Soft 3D | Rounded forms, matte materials |
| Data-Driven | Dense but legible, charts as hero |
| Scientific/Technical | Annotations, thin rules, lab precision |
| Startup Crisp | Clean UI, bold CTA, vibrant accent |
| High-Fashion | Ultra-thin type, dramatic photography |
| Museum Exhibition | Quiet typography, gallery placard |
| Nordic Calm | Pale neutrals, soft contrast, warmth |

---

## Design System Library

138 brand specifications available in `design-systems/` (one directory each, all carrying a `DESIGN.md`). Each follows the schema defined in `references/design-system-schema.md`. This is the single source of truth for the count — other sections point here rather than restate it.

**Usage:** Specify a brand name to load its tokens:
- "Use the Linear design system" → loads `design-systems/linear-app/DESIGN.md`
- "Use the Stripe design system" → loads `design-systems/stripe/DESIGN.md`
- "Minimal modern feel" → uses `design-systems/default/DESIGN.md` (Neutral Modern)

See `references/brand-index.md` for the complete catalog with categories.

---

## Integration with Other Skills

This skill composes with the existing design skill suite:

| Existing Skill | Relationship |
|---------------|-------------|
| **ui-ux-pro-max-skill** | Provides the 97 palettes, 57 font pairings, 50 styles data — use for discovery/inspiration before locking a DESIGN.md |
| **bencium-creative** | Handles the `--build` implementation with shadcn/Tailwind stack — hand off when moving from prototype to production components |
| **bencium-controlled-ux-designer** | Enforces WCAG 2.1 AA — invoke for accessibility validation pass |
| **design-audit** | Runs the 14-dimension post-build audit — invoke after delivery for polish |
| **typography** | Enforces Butterick rules — invoke on any text-heavy artifact |
| **daisyui** | Component library for Tailwind builds — use when implementing in Tailwind ecosystem |
| **relationship-design** | Agentic UX patterns — use when building AI-facing interfaces |

### Recommended Pipeline

```
1. /open-design (this skill) → structured intake + brand + prototype
2. /bencium-creative --build   → production component implementation
3. /typography                  → typographic enforcement pass
4. /design-audit               → 14-dimension quality review
```

---

## Reference Files

- `references/design-system-schema.md` — DESIGN.md authoring schema (9 sections)
- `references/layouts-web.md` — 8 web section layout skeletons
- `references/layouts-dashboard.md` — Dashboard layout patterns
- `references/layouts-mobile.md` — 6 mobile screen archetypes
- `references/layouts-deck.md` — 7 slide-deck layout skeletons
- `references/layouts-email.md` — table-based email skeleton (header → hero → body → cta → footer)
- `references/critique-dimensions.md` — Extended scoring rubric with examples
- `references/brand-index.md` — Complete catalog of the brand specifications (count in Design System Library above)
- `references/anti-slop-rules.md` — Fast 12-signal slop checklist + remediation
- `references/slop-rules-catalog.md` — Full 3-layer (CLI/browser/LLM) anti-pattern catalogue, adapted from impeccable
- `slop-detect` — Deterministic slop scanner (the CLI layer); a baked binary on `PATH`, no runtime needed

## Memory (not flat config files)

Impeccable records project context in flat `PRODUCT.md`/`DESIGN.md` files and
slop exceptions in `.impeccable/config.json`. We keep `DESIGN.md` (it is the
brand spec), but persist *decisions* and *exceptions* to RuVector instead:

```javascript
// Confirmed-intentional slop exception (impeccable's ignoreValues equivalent)
mcp__claude-flow__memory_store({namespace: "project-state", key: "design-slop-exceptions",
  value: "<rule> intentional in <file>: <reason>"})
// Recall before re-scanning so prior exceptions aren't re-flagged as new
mcp__claude-flow__memory_search({query: "design slop exceptions", namespace: "project-state", limit: 10})
```

Inline `/* slop-disable <rule> */` handles file-local suppression; memory handles
cross-session intent.