Design Systems Engineering

What this skill does

• Creates and audits design systems, components, tokens, branding, typography, iconography, and spacing systems.
• Improves UI and UX, TUI, dashboard, publishing, marketing, game and film, HUD, and XR interaction flows, states, overlays, captions, and motion.
• Produces structured handoffs for design-to-code, code-to-design, spatial and XR, CAD and CAM, and manufacturing workflows.
• Strengthens accessibility, ergonomics, controller, hand-tracking, and gaze interaction quality, and scene legibility, without degrading human usability.
• Handles charts, dashboards, decks, diagrams, covers, publishing layouts, campaign assets, on-screen graphics, and visual reporting systems.
• Covers 2D and 3D deliverables including CAD and CAM, XR, 3D printing, fabrication-ready specs, and immersive-media overlays.
• Chooses the design context strategy for an environment: a static portable file, on-demand MCP or skill context, a component registry, or a hybrid.
• Authors agent-facing design context: a DESIGN.md in the Stitch format, a design.md guidance file in the Vercel genre, and an OKF v0.2 knowledge bundle with provenance, trust tiers, and attested computations.
• Drives distinctive AI-assisted design through a deliberate-choice protocol and an agent-adapted Double Diamond: seed strings, a critic in a fresh context, and subtraction first.
• Sets up an eval harness with frozen scenarios, a rubric, a deterministic check, and a six-step loop.

Why it is different

Most design skills stop at polished taste or generic UX advice. This one pushes outputs toward ship-ready structure and verifiable context:

• assumptions and constraints made explicit
• validation steps, release gates, and mechanical checks
• domain-specific artifacts such as state matrices, KPI dictionaries, token tables, fit and tolerance tables, safe-area checks, and checklist-driven handoffs
• human-first ergonomics plus additive agent affordances
• a method that never prescribes a palette, a font, or a layout, so it cannot become the next generic default

New in 3.0.0

• Design context engineering reference: four context strategies, an evidence table drawn from Atlassian's published test, a CHI 2026 registry finding, and a five-question decision rubric.
• DESIGN.md authoring: token schema, fixed component properties, mandatory section order, consumer rules for unknown content, and the doctrine that a specific reference beats a list of adjectives.
• design.md authoring in the Vercel genre: reader-first framing, a six-item priority order, two reading speeds, squint and text-mask tests, and bounded vocabulary.
• OKF v0.2 design-knowledge bundles: concept types, trust tiers from the verified list, provenance and lifecycle keys, reserved filenames, and Attested Computation.
• Anti-slop creative direction: distributional convergence, the second-order slop trap, era-aware tells for 2022 to 2024 and 2025 to 2026, the deliberate-choice protocol, and the agent-adapted Double Diamond.
• Four template areas: DESIGN.md, design.md, a conformant OKF v0.2 bundle, and a starter eval harness.
• Four more domain references: print production (process and spot colour, bleed and trim, imposition, paper, finishing, dielines, proofing, a print-ready file QA checklist), brand identity systems (logo and wordmark, identity tokens, brand voice, application grids, maintenance), cinematography and storytelling (shot grammar, camera movement, composition, lighting, storyboards, animatics), and diagrams and technical illustration (taxonomy, Mermaid and Graphviz, density, illustration style).
• A deliverable catalog of 13 genre patterns, expanded from four: resumes and CVs, cards and invitations, marketing materials, portfolios, landing pages, diagrams, documentation, and pitch decks.
• Deepened the 14 existing references with new sourced material, including agent-ready surfaces and AX, the DESIGN.md context pipeline, evidence-led decision pages, the mechanical check loop, and the decision page pattern.

Best for

• AI agents working on real product design work rather than moodboard aesthetics
• founders, indie hackers, freelancers, and product teams that want stronger design outputs from agents
• teams that already own a design system and need to make it legible to agents without rewriting it
• mixed design and engineering workflows where accessibility, implementation realism, immersive interaction quality, publishing rigor, fabrication, or manufacturing handoff matters

Not for

• pure backend or business-logic tasks with no visual or interaction artifact
• copywriting-only requests where no design surface exists
• narrow single-tool tutorials that do not need a cross-domain design systems framework
• anyone looking for a preset theme, a palette pack, or a finished design system to download

Deliverables included

• SKILL.md at version 3.0.0
• 18 references: design context engineering and anti-slop creative direction, the cross-domain set, and the four added domains (print production, brand identity, cinematography and storytelling, diagrams and illustration)
• templates: DESIGN.md authoring template, design.md guidance-file template, an OKF v0.2 bundle, and an eval harness
• accessibility, design systems, motion and interactions, data visualization, UX research and IA, design QA, design-to-code, and 3D and spatial references
• premium deliverable patterns, including the decision page pattern
• two runnable Python checks and a JSON scenario file