Design Extension

The Design Extension is a design-first toolkit that elevates the agent's visual output by enforcing structured workflows, curated design systems, and quality guidelines. It ensures that even models with weaker design instincts produce polished, professional-looking results.

The Problem It Solves

AI-generated designs often suffer from:

Generic defaults — "Inter + blue button" syndrome
Inconsistent tokens — colors, spacing, and typography don't form a system
Slop patterns — repeated visual clichés that scream "AI-generated"
No workflow — the model jumps straight to code without design thinking

The Design Extension fixes all four by providing systems, skills, and guidelines.

Three Pillars

1. Design Systems

Curated design system tokens from iconic products:

System	Vibe	Best For
Apple	Clean, minimal, Human Interface	Developer tools, macOS apps
Stripe	Technical, trustworthy, blue gradients	SaaS, fintech
Linear	Dark, focused, monospace accents	Productivity, developer tools
Vercel	Geometric, modern, black+accent	Platform, infrastructure
GitHub	Pragmatic, accessible, muted	Open source, documentation
Notion	Clean, typographic, minimal	Knowledge bases, docs
Spotify	Bold, colorful, rounded	Creative tools, media

Each system provides CSS custom properties for colors, typography, spacing, and component tokens. The agent maps these onto :root before writing any component code.

2. Design Skills

Structured workflows for specific design artifacts:

Skill	What It Produces
web-prototype	Interactive HTML/CSS prototypes
saas-landing	SaaS landing pages (hero, features, pricing, CTA)
slide-deck	Presentation decks as HTML
mobile-app	Mobile app UI prototypes
dashboard	Data dashboards and analytics views
social-carousel	Social media carousel designs

Each skill includes:

Pre-flight reading — what to understand before starting
Seed templates — starting HTML/CSS skeletons
Section composition patterns — how to arrange content
Self-check checklists — quality gates before finishing

3. Design Guidelines

Anti-slop rules and a 5-dimension self-critique framework:

Typography hierarchy — is the information architecture clear?
Color cohesion — do colors form a system or feel random?
Spacing rhythm — consistent or scattered?
Component authenticity — real design patterns or AI clichés?
Content realism — lorem ipsum or meaningful content?

The Discovery Protocol

When the agent detects a design-related prompt, it automatically injects the Design Discovery Protocol — a pre-flight step that forces the agent to ask clarifying questions before writing any code:

Clarify the brief — what kind of artifact? What design system?
Load the design system — map tokens before building
Build — follow the skill workflow exactly

This prevents the most common AI design failure: jumping straight to code without understanding what to build.

Tools

Tool	Purpose
`designer_list_systems`	List available design systems
`designer_get_system`	Get full CSS tokens for a chosen system
`designer_list_skills`	List available design workflows
`designer_get_skill`	Get the full workflow guide for a chosen skill
`designer_get_guidelines`	Get anti-slop rules and quality framework

Weaker Models Produce Great Results

The Design Extension is especially valuable when using smaller or faster models. The systems, skills, and guidelines provide structure that compensates for weaker design instincts — the model just has to follow the recipe, not invent it.

Integration with PDF Generator

The Design Extension pairs naturally with the PDF Generator:

Use designer_get_system + designer_get_skill to create polished HTML
Use pdf_generate to render it as a PDF
Refine the HTML and pdf_render to iterate

When to Use

Landing pages — get design-system-backed pages that don't look generic
Dashboards — structured data display with proper hierarchy
Presentations — slide decks with consistent visual language
Prototypes — quick, polished prototypes for stakeholders
Any visual output — when you want it to look intentional, not AI-generated