design-dna-skill

Enforce design-dna.json tokens for colors, typography, spacing, and patterns.

2|2|Updated Dec 16, 2025

Search Tags:#tokens #enforcement #design-system #design-dna

Ready to run

npx skills add https://github.com/adilkalam/orca --skill design-dna-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-dna-skill
Source: https://github.com/adilkalam/orca/tree/main/skills/design-dna-skill
Command: npx skills add https://github.com/adilkalam/orca --skill design-dna-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a shared design-dna vocabulary to enforce tokens, spacing, and patterns across lanes.

Core Features & Use Cases

Design-dna encoding: Tokens for color, typography, spacing, and curated patterns.
Enforcement gates: Ensure inline styles and arbitrary values are avoided when tokens exist.
Use Case: Gate UI changes to tokens before merging.

Quick Start

Load design-dna and map tokens to components in your current project workflow.

Frequently Asked Questions about design-dna-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I enforce design tokens across my UI project?▼

Enforce design tokens by loading design-dna.json to define and validate color roles, typography scales, spacing grids, and patterns across components. This prevents inline styles and arbitrary values, ensuring consistent token usage before code merges.

What is a design system token enforcement gate?▼

A token enforcement gate validates UI changes against your design-dna vocabulary before merging. It blocks inline styles and non-compliant values, providing governance signals for token violations and evolution.

Can I use design tokens with Next.js and Expo projects?▼

Yes. Design-dna tokens apply across implementation agents including nextjs-builder and expo-builder, enabling consistent token enforcement and pattern validation across web and mobile lanes.

How do I structure color roles and typography in a design-dna file?▼

Define design-dna scopes for color roles (primary, secondary, accent, surface), typography scales (display, heading, body, caption), spacing grids, and named patterns like cards and layouts to standardize UI token references.

What happens when a component uses an undefined token?▼

Token enforcement gates detect violations when components reference undefined tokens or use inline styles instead of design-dna values. The gate reports violations and provides governance signals for correcting token usage.

Do I need design system architecture knowledge to apply tokens?▼

No. Design-dna tokens work with design-system-architects and implementation agents alike. Load the design-dna.json file into your workflow to map and enforce tokens across components without requiring deep architecture expertise.