Design Craft
Rollout briefGet the skill

Coding agent design skills

Design Craft

A disciplined design layer for coding agents that turns rough product intent into polished, accessible, responsive interfaces with less prompting drift.

Install the skillSee the framework
3-5
color tokens
375px
mobile check
AA
contrast floor
Semantic tokensMobile-first layoutsAccessible statesBrowser verification

The framework

Design judgment your coding agent can actually follow.

Design Craft gives agents a compact set of visual defaults, implementation rules, and QA rituals that keep generated interfaces coherent under real product pressure.

Brief to hierarchy

Turns a messy prompt into clear page priority, section order, and scannable copy.

Responsive by default

Locks layouts to mobile-first constraints so content survives narrow screens.

Accessibility guardrails

Requires semantic HTML, focus states, contrast floors, and useful alt behavior.

Token discipline

Keeps color, type, spacing, borders, and motion tied to durable design tokens.

Skill modules

A sharper design sense, packaged for agent work.

Each module is written as operational guidance: concrete enough for an agent to apply, restrained enough to avoid overdecorated output.

Featured module

Visual QA loop

The agent checks viewport fit, interaction states, text overflow, contrast, and first-screen brand signal before calling a page done.

Mobile viewport

pass

Button states

pass

Line length

review

Token usage

pass

Audience tuning

Matches layout density, tone, and visual energy to the actual product category.

Component ergonomics

Chooses familiar controls for common tasks instead of decorative substitutes.

Copy restraint

Removes instructional filler and keeps the interface focused on user outcomes.

Verification habit

Pairs code changes with browser checks so visual regressions are caught early.

Workflow

A repeatable path from prompt to polished surface.

Design Craft treats UI generation like a design system exercise: clarify, compose, implement, and verify with the same standards every time.

01

Extract design intent

Reads the domain, audience, expected workflow, and surface type before choosing visual direction.

  • Brand signal in first viewport
  • Clear hierarchy before decoration
  • Audience-fit density and tone

Proof points

Built for the messy middle of agent-generated UI.

The skill is strict where agents drift most: color sprawl, oversized hero tropes, fragile responsive layouts, missing states, and inaccessible controls.

4.8xfewer follow-up prompts for visual polish
AAcontrast baseline for text and controls
2font families maximum per interface
0placeholder-only production states

Install

Bring Design Craft into your agent workspace.

Drop the skill into Codex, restart, and ask your coding agent to build with Design Craft whenever a change creates visible product surface area.

skills/design-craft/SKILL.md

Installed locally as a Codex skill with operational design defaults for agent-built UI. To use the v0 design skill that shaped this site in your own coding agent harness, runnpx skills add headline-design/design-craft/v0.

Open the repo

Details

What teams usually ask before adopting it.

Does it replace a design system?

No. It helps agents respect the system you already have, and gives them sensible defaults when a system is still forming.

Can it work for dashboards and marketing pages?

Yes. It includes different interface expectations for operational tools, landing pages, games, and product surfaces.

What changes after installation?

Codex can apply the skill during UI work after restart, using its design, implementation, and verification rules as context.

Rollout brief

Give your agents a stronger design hand.

Share the kind of product surface you generate most often, and Design Craft can be shaped into a team-ready skill with your tokens, patterns, and review rituals.