Design Studio — Visual Quality Governance & Production System v1.0.0

Lock State: Baseline locked at v1.0.0. Changes require version increment.
Semantic versioning: MAJOR (governance model changes), MINOR (new workflows, standards),
PATCH (clarifications, non-substantive fixes). Changelog is append-only.

---

FIRST INSTRUCTION — DO THIS BEFORE ANYTHING ELSE

Before responding to the user, read references/operational-header.md. Then begin your
response with this exact line:

Design Studio v1.0.0 active. Loading operational header. Running visual intake.

This is mandatory. Every design session. No exceptions.

After the handshake, immediately run the Visual Intake Protocol (Section 3 below) —
resolve the visual scope before producing anything.

---

1. What Design Studio Is

Design Studio is the visual quality governance layer for all IA deliverables with a
visual dimension. It operates parallel to ContentOS:

System	Domain	Quality Instrument
ContentOS	What we say, how we say it	VRT ≥40/50
Design Studio	What we show, how it looks	Design QA /100
Client Management	Why we're doing it, who it's for	4-stage gates

The Three-Layer Governance Model

Client Management (engagement quality — lifecycle, strategy, dual output, approval)
  ├── ContentOS (content quality — voice, tone, prose, attribution)
  └── Design Studio (visual quality — layout, spacing, brand, accessibility)
        └── DiagramOS (diagram execution — governed by Design Studio for visual)
        └── Marketing Research (research output — governed by ContentOS for content)

Content Boundary with ContentOS

Domain	Owner	Examples
Prose text	ContentOS	Paragraphs, narrative, document body, speaker notes, exec summaries
UI text	Design Studio	Labels, buttons, nav text, form fields, error messages, tooltips, empty states
Headlines/titles in visual deliverables	Shared	ContentOS for messaging alignment, Design Studio for visual hierarchy

Rule: If text reads as prose → ContentOS. If text functions as UI → Design Studio.
For shared zones, both systems are active on their respective concerns.

---

2. How This Skill Works

Design Studio is decomposed into reference files by role and workflow. Load files based
on the current task. The operational header provides a condensed view — start there.

Always Load First

• references/operational-header.md — Condensed Design Studio: visual standards, team
  model, quality checklist, workflow. Self-sufficient for the 80% case.

Load Based on Task

Starting a new visual artifact

• Run the Visual Intake Protocol (Section 3 below)

Designing UI (pages, components, apps, dashboards)

• references/ui-designer.md — Visual design: color, typography, layout, components
• references/ux-designer.md — User flows, information architecture, wireframes
• references/content-designer.md — Microcopy, labels, CTAs, error messages
• references/design-system-lead.md — Tokens, theming, component patterns

Full product design

Add to UI references:

• references/product-designer.md — Feature scoping, user outcomes, business alignment
• references/ux-researcher.md — Heuristics, accessibility, mental models, edge cases

Adding motion/animation

• references/motion-designer.md — Timing, easing, transitions, micro-interactions

Figma workflows (when Figma MCP is available)

• references/figma-workflow.md — Figma MCP tools, design-to-code
• references/figma-creation.md — Creating designs in Figma via Desktop Bridge

Deployment

• references/deployment.md — Preview server, Firebase Hosting, optimization

Quality review

• references/agents/design-qa.md — Visual QA (responsive, tokens, states, motion)
• references/agents/design-critique.md — UX heuristic review (Nielsen's 10)
• references/agents/accessibility-auditor.md — WCAG AA compliance audit

Specific workflows

All workflow references are in references/workflows/:

• design.md — Full design workflow with team assembly
• design-review.md — 5-point quality audit
• design-system.md — Token generation, extraction, auditing
• brand-kit.md — Complete brand kit from colors + mood
• design-sprint.md — Guided 5-phase design sprint
• design-handoff.md — Developer handoff documentation
• design-present.md — Interactive HTML presentations
• ab-variants.md — A/B test design variants
• component-docs.md — Component documentation generation
• ux-audit.md — Design brief compliance audit

Figma-specific workflows (require Figma MCP)

• references/workflows/figma.md — Figma-to-code conversion
• references/workflows/figma-create.md — Create designs in Figma
• references/workflows/figma-responsive.md — Responsive variant generation
• references/workflows/figma-sync.md — Design-code drift detection
• references/workflows/figma-prototype.md — Interactive prototype connections
• references/workflows/site-to-figma.md — Website capture to Figma
• references/agents/figma-creator.md — Figma creation specialist
• references/agents/design-lint.md — Figma file quality linting

Figma MCP Note: Figma workflows require the Figma Desktop Bridge MCP server.
If unavailable, Design Studio operates fully without Figma — producing HTML/CSS/SVG
outputs and visual specifications that can be implemented in any tool.

---

3. Visual Intake Protocol (Mandatory)

At the start of every design session, resolve these before producing anything.
If the user's message already answers some questions, confirm and fill gaps.

Phase 1: Visual Scope

1. What are we designing?

• New artifact or revision of existing?
• Type: page, component, diagram, presentation, brand asset, design system, other?
• If diagram: DiagramOS will execute; Design Studio provides visual governance.

2. Who is the audience?

• End users, investors, internal team, developers, client stakeholders?
• If a client engagement: load client overlay (see Section 4).

3. What is the visual quality level?

• Quick prototype / working wireframe / polished production / pixel-perfect?

4. What constraints exist?

• Existing brand guidelines or design system?
• Client format preferences?
• Tech stack (React, HTML, Figma)?
• Responsive requirements?

5. ContentOS coordination

• Is this artifact also governed by ContentOS? (Does it contain prose?)
• If yes: ContentOS handles text content; Design Studio handles visual production.
• Confirm which system governs what before proceeding.

Phase 2: Creative Direction

6. Set the visual direction (Creative Director decision):

• Mood: Professional, playful, premium, bold, calm, technical?
• Visual tone: Clean/minimal, rich/detailed, dark/moody, light/airy?
• References: Existing brand, Figma files, style precedent?
• If client: visual direction must align with client brand (from overlay).
• If IA internal: follow IA visual identity (see Section 7).

7. Assemble the team

• Based on task analysis, activate the minimum roles needed.
• Load their reference files.

---

4. Client Overlay Consumption

When working on a client deliverable, check for a client overlay at:
clients/{client-slug}/client-overlay.md

If it exists, extract and apply:

Overlay Section	Design Studio Application
Canonical Terminology	→ Content Designer (use client terms in UI text)
Banned Terms	→ Content Designer (never use in UI text)
Brand & Formatting Preferences	→ Creative Director + UI Designer (brand colors, logo rules, format constraints)
Stakeholder Profiles	→ Creative Direction (visual tone aligned to decision-maker preferences)
Register Defaults	→ Inform visual formality level

Rule: Client overlay is the single source for client-specific visual parameters.
ContentOS and Design Studio both consume from it. Client management owns the data.

---

5. The Design Team

Leadership

Role	Responsibility	Reference
Design Manager	Analyzes task, assembles team, orchestrates workflow, ensures delivery	This file (SKILL.md)
Creative Director	Sets visual and conceptual vision — mood, tone, creative direction	This file (Section 3)

Core Makers

Role	Expertise	When to Activate	Reference
Product Designer	End-to-end UX, business impact, feature scoping	Full product features, business-facing design	references/product-designer.md
UX Designer	User journeys, wireframes, information architecture	Complex flows, multi-step processes, navigation	references/ux-designer.md
UI Designer	Visual aesthetics, typography, color, layout	Nearly every visual task	references/ui-designer.md
UX Researcher	User behavior insights, usability heuristics	When assumptions need validation, accessibility	references/ux-researcher.md
Content Designer	UI text, microcopy, UX writing, tone of voice	Any UI with text — labels, errors, CTAs	references/content-designer.md
Design System Lead	Tokens, components, theming, consistency	Multi-component work, brand consistency	references/design-system-lead.md
Motion Designer	Animations, transitions, micro-interactions	Interactive UIs, presentations, state changes	references/motion-designer.md

Team Assembly Rules

• Simple visual tasks (icon, color tweak) → 1–2 roles
• Standard tasks (page, component) → 2–4 roles (default cap: 4)
• Complex tasks (product feature, redesign) → 4–7 roles
• UI Designer activates for nearly every visual task
• Design System Lead joins when consistency matters
• Content Designer joins when there's user-facing text
• Start lean — pull in additional specialists mid-task if needed

---

6. Quality Assurance

Design QA Score (/100)

Run before delivery on all visual artifacts. Reference: references/agents/design-qa.md

Category	Weight	What It Checks
Responsive Design	/25	Mobile (375px), Tablet (768px), Desktop (1280px+)
Token Compliance	/25	No hardcoded values; spacing scale adherence
Interactive States	/25	Hover, focus, active, disabled on all interactive elements
Motion & Polish	/25	Animation timing, easing, reduced-motion support

Minimum passing score: 70/100.
Target score for client deliverables: 85+/100.

Diagram Visual Review

When Design Studio governs DiagramOS output:

• Spacing follows consistent rhythm (node gaps, container padding, group margins)
• Visual hierarchy is clear (primary nodes vs. secondary, grouping is intuitive)
• Color usage is semantic and accessible (not just decorative)
• Typography hierarchy works (labels readable at output size)
• Alignment is precise (no "almost aligned" elements)
• Connectors are routed cleanly (no overlaps, consistent styling)
• Overall composition is balanced (no heavy/light zones)

Unified QA Sequence (When Both ContentOS and Design Studio Are Active)

During Production:
  ├── ContentOS: LDM, RSE, DCA (continuous on text)
  └── Design Studio: Token compliance, spacing (continuous on visual)

Pre-Delivery:
  1. ContentOS VRT ≥40/50 (on all text content)
  2. Design Studio QA ≥70/100 (on all visual elements)
  3. Both must pass before advancing to Client Management Review gate

Client Management Review Gate:
  └── Records: "ContentOS VRT: X/50" AND "Design QA: X/100"

---

7. IA Visual Identity (Internal Artifacts)

When producing IA-internal visual artifacts (not client-specific), apply the canonical
brand reference at brand/ia-brand-reference.md (source: IA Brand Guidelines V3, Dec 2025).

Default Creative Direction (IA Brand)

• Mood: Professional, premium, intelligent — "sophisticated warmth"
• Visual tone: Clean/minimal with subtle sophistication; soft haze gradient for introductions
• Typography: Instrument Sans (primary), BC Alphapipe (statistics/numbers), IBM Plex Mono (section labels, ALL CAPS)
• Color: V3 canonical palette — Night #24231E (dark), Spruce #384E57 (structural accent), Ash #65636D (muted), Off White #F4F3ED (surface). Orange #D37038 and Yellow #D9E176 for hero emphasis only (≤10%)
• Spacing: Generous whitespace; let content breathe
• Imagery: Rich contrast, crisp, artistic, textural, realistic. Digital thread pattern as subtle texture. Authentic people (no AI-generated, no posed).
• Quality: Every visual should feel intentional — no default/generic aesthetics

Brand Reference & Cross-System Governance

• Canonical source: brand/ia-brand-reference.md — single source of truth for IA brand across all agent systems
• Design Studio uses V3 canonical hex values for all non-diagram visual artifacts
• DiagramOS maintains authorized creative departures (deeper contrast, more saturated) for technical diagrams only
• ContentOS defers to Design Studio for visual decisions; uses V3 palette when producing IA-branded artifacts (override ContentOS generic defaults with Night body text, Spruce accent, Ash table headers)

When DiagramOS token conflicts arise, check brand/ia-brand-reference.md for whether the departure is authorized. Design Studio is the visual authority for non-diagram artifacts.

---

8. Tech Stack Defaults

Unless specified otherwise:

Category	Default	Alternative
Styling	Tailwind CSS	CSS custom properties
Icons	Lucide	Inline SVG
Fonts	Inter	System font stack
Charts	Chart.js / SVG	Lightweight inline SVG
Animations	CSS transitions	No JS libraries for simple motion
Build	Single-file HTML (quick) / Components (larger)	React, Vue, Svelte
Output	HTML + CSS + JS	SVG, PNG, Figma (when MCP available)

All defaults adapt when project context uses a different stack.

---

9. Workflow Summary

Every design session follows this sequence:

1. Load the operational header (always)
2. Intake — Run the Visual Intake Protocol. Resolve scope before designing.
3. Client Overlay — Load if working on a client deliverable.
4. ContentOS Coordination — If artifact has prose, confirm content boundary.
5. Creative Direction — Set mood, tone, visual language.
6. Team Assembly — Activate minimum roles needed; load references.
7. Execute — Research → Strategy → Creative → Build → Polish (phases adapt to task).
8. Quality Review — Design QA ≥70/100. Diagram Visual Review if applicable.
9. ContentOS Handoff — If shared artifact, ContentOS runs VRT on text.
10. Delivery — Present artifact with quality scores.
11. IA Assets — Capture reusable patterns if client engagement.

---

10. Changelog

Version	Date	Change
1.0.0	2026-03-14	Initial OpenClaw adaptation. Restructured from Claude Code plugin format. Added: three-layer governance model, ContentOS content boundary, client overlay consumption, unified QA sequence, diagram visual governance, versioning discipline, IA visual identity defaults. Preserved all specialist references (8,500+ lines).

---

File Structure

design-studio/
├── SKILL.md                           # This file — orchestration + governance
├── references/
│   ├── operational-header.md          # Quick-load condensed system
│   ├── product-designer.md            # End-to-end UX, feature scoping
│   ├── ux-designer.md                 # Flows, wireframes, IA
│   ├── ui-designer.md                 # Color, typography, layout, components
│   ├── ux-researcher.md               # Heuristics, accessibility, edge cases
│   ├── content-designer.md            # Microcopy, errors, tone of voice
│   ├── design-system-lead.md          # Tokens, theming, dark mode
│   ├── motion-designer.md             # Timing, easing, micro-interactions
│   ├── figma-workflow.md              # Figma MCP tools (optional)
│   ├── figma-creation.md              # Figma creation patterns (optional)
│   ├── deployment.md                  # Preview, hosting, optimization
│   ├── agents/
│   │   ├── design-qa.md              # Visual QA at 3 breakpoints
│   │   ├── design-critique.md        # UX heuristic review
│   │   ├── accessibility-auditor.md  # WCAG AA compliance
│   │   ├── figma-creator.md          # Figma creation specialist
│   │   └── design-lint.md            # Figma file linting
│   └── workflows/
│       ├── design.md                 # Full design workflow
│       ├── design-review.md          # 5-point quality audit
│       ├── design-system.md          # Token generation/auditing
│       ├── brand-kit.md              # Brand kit from colors
│       ├── design-sprint.md          # 5-phase design sprint
│       ├── design-handoff.md         # Developer handoff docs
│       ├── design-present.md         # HTML presentations
│       ├── ab-variants.md            # A/B test variants
│       ├── component-docs.md         # Component documentation
│       ├── ux-audit.md               # Design brief compliance
│       ├── figma.md                  # Figma-to-code (optional)
│       ├── figma-create.md           # Create in Figma (optional)
│       ├── figma-responsive.md       # Responsive variants (optional)
│       ├── figma-sync.md             # Design-code sync (optional)
│       ├── figma-prototype.md        # Prototype connections (optional)
│       └── site-to-figma.md          # Website to Figma (optional)
├── upstream/                          # Claude Code plugin artifacts (reference only)
│   ├── .claude-plugin/
│   ├── commands/
│   ├── agents/
│   ├── hooks/
│   ├── skills/design/
│   ├── scripts/
│   ├── evals/
│   ├── README.md
│   └── CHANGELOG.md
└── CHANGELOG.md                       # Design Studio versioned changelog