Design Code Skill: Token Driven Components

What is the design-code skill?

Thirteen checks stand between this skill and the word done. After writing a component, the agent must lint for hardcoded values, confirm every state exists, run the gate scripts and report their actual output instead of typing a percentage.

It is one of the skills in plugin87's ux-ui-agent-skills kit, which the README describes as a pure instruction and knowledge layer. The model loads design-code on its own when you ask for working UI code in a specific stack.

How it builds a component

1. Identify the target framework and styling method from your request.
2. Read the adapter protocol, the shared contract for token resolution, styling, dark mode and motion.
3. Load the concrete adapter. React with Tailwind, Next.js and SwiftUI have full references, ten others are concise, and a missing target gets one generated on the fly.
4. Pull the component spec and the ARIA pattern for the element.
5. Resolve every value to the token files, applying an aesthetic direction if you asked for one.

Rules the output must follow

• Tokens only, with no hardcoded colors, sizes, radii, shadows, durations or fonts.
• Accessibility wired into every interactive element, and all applicable states from Default through Selected.
• Dark mode handled at the semantic token layer, mobile first layout and a reduced motion fallback.
• Complete files with no placeholders, built on one shared theme and one reusable primitive per atom.

Who the design-code skill is for

Best for

• Developers who want a component or screen in a named stack, with the same token theme driving every page. design-token goes deeper on the token side.
• Projects that need states, dark mode and accessibility built in from the first draft. See component-spec for specification work.
• Teams on less common targets such as Flutter or Jetpack Compose, where the skill generates an adapter if none exists.

Not for

• Reading a Figma file. The skill works from your request and the kit's specs, and for Figma sources see figma-implement-design.
• Installing alone. Like its siblings it checks that the kit's token folder exists and stops with a KIT_MISSING message otherwise.
• Tailwind only setups that want token architecture advice. tailwind-design-system is a closer match.

Use it with UiChemy

This skill writes code in an app stack, not WordPress pages. To reach WordPress, design in Figma and convert with UiChemy Figma to WordPress, then refine in Composer. Click Get Started. Use the skill's token rules to keep the design file consistent.

How to install Design Code Skill: Token Driven Components

/plugin marketplace add plugin87/ux-ui-agent-skills

1. Add the marketplace

   In Claude Code, run /plugin marketplace add plugin87/ux-ui-agent-skills.

2. Install the plugin

   Run /plugin install ux-ui-agent-skills@ux-ui-agent-skills. The README says you get 25 skills and the design-critic agent, and design-code is listed among the skills the model loads on its own.

3. Use the whole kit

   The skill reads token files, framework adapters and scripts from the kit. A folder only copy lacks them, and the skill will stop and say so.

4. Alternative

   The README also documents brew install plugin87/tap/ux-ui-agent-skills followed by ux-ui-skills init. If skills do not appear, start a new session.

Check that it loaded

Ask your agent for a notification component in React with Tailwind, with all states and dark mode. With the skill loaded it should read an adapter, use token based classes and report the results of its verification scripts.

Read the official instructions on GitHub

Key features

• Any frameworkTargets React with Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components with Lit, React Native, Flutter, Jetpack Compose, vanilla CSS and CSS-in-JS.
• Adapter protocolA universal contract covers token resolution, the component contract, styling, dark mode, motion and output rules. Three adapters are full references and ten are concise.
• On the fly adaptersIf no adapter file exists for the target stack, the agent follows the protocol's checklist to author a new one.
• Tokens never hardcodedA lint script and a theme reference validator check that every color, size, radius, shadow, duration and font traces to a token, including raw Tailwind palette utilities.
• Eight statesDefault, Hover, Focus, Active, Disabled, Loading with aria-busy, Error and Selected must be present, or justified as not applicable.
• Token by intentA destructive action uses the destructive token and never the primary one. Secondary actions stay neutral, and the same action keeps the same variant everywhere.
• One shared primitive layerEach atom such as Button, Input, Modal and Badge is built once, and overlays reuse a single Modal with focus trap, aria-modal, Escape and focus return.
• Font loading rulesNever import web fonts in CSS. Use a framework loader or preconnect and preload with font-display swap, and take the family from a token.
• Real iconsUse an icon set, with lucide as the default, as inline SVG with currentColor. Emoji as icons is flagged.
• Run the gates, then reportThe agent runs state and accuracy scripts, including a dark mode pass, and reports actual output instead of an invented contrast number.

Frequently asked questions