Design systemsLocal editorial record

Design code

Generate production-ready, accessible, token-driven component code for ANY framework , React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutte

Catalog record

Installable source artifact

This page explains the direction locally, then links to the exact upstream artifact and its verified install command.

What this gives you

A clearer brief for the agent.

Turns design intent into reusable tokens, components, states, and constraints.

Expected result

A UI language that stays consistent while the product grows.

Use it when

You are defining foundations or fixing repeated UI drift across screens.

Source repository stars

502

Source repository · verified 2026-08-17

Install status

Installable source artifact

design-code · Skills CLI

Install this skill with one command.

This exact source artifact can be installed in your project with the Skills CLI.

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-code

Skill name: design-code · installs into the agent directory selected by the CLI.

Open source SKILL.md Read install guidance

Related directions

Continue inside DesignMD.

Theme factoryToolkit for styling artifacts with a theme.Design systemToken architecture, component specifications, and slide generation.Apply aestheticApply a visual direction , an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, m Design componentDesign a UI component spec to the house quality bar , anatomy, variants, sizes, the 8 states, token mapping, and accessibility.