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.

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:

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:

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)

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:

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:

// 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.