DesignMD Directory
TemplatesNEWSkillsDesign MD ExamplesPricingResources
⌕⌘K

DesignMD Directory

Visual references, skills, and source templates for AI coding agents.

♥ Support Itmeo

Products

  • Templates
  • Admin Panel Template
  • SaaS Dashboard Template
  • Design Skills
  • Design MD Examples
  • AI Studio
  • WebGradients
  • Free CSS Gradient Generator
  • Color Palette for Websites

Company

  • About
  • Blog
  • Manifesto
  • Donate

Explore

  • Changelog
  • Vercel Design MD
  • shadcn Design MD
  • GitHub Design MD
  • Design MD examples
  • llms.txt
  • ai.txt
  • Sitemap

Connect

  • Twitter / X
  • GitHub
  • DESIGN.md spec
  • dimabraven.com

© 2016–2026 Itmeo. All rights reserved.

PrivacyTerms

Explore

AllTemplates6Design MD Examples80+Design Skills230Guides16ToolsCLIPricing

For your agent

CursorClaude CodeCodexGoogle Stitch

Browse stack

shadcn/uiNext.jsTailwind CSS

Follow

X / TwitterSoonProduct HuntSoon
AllTemplatesExamplesSkillsGuidesToolsCLIPricing
← All skills
Design systems/Local editorial record

Design component

Design a UI component spec to the house quality bar , anatomy, variants, sizes, the 8 states, token mapping, and accessibility.

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-16

Install status

Installable source artifact

design-component · 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-component

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

Open source SKILL.mdRead install guidance

Related directions

Continue inside DesignMD.

View category
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, mDesign codeGenerate 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

Creator

Written by
Thientan Soparat
License
MIT
Repository
.claude/skills/design-component/SKILL.md