TWISTEdBRACKETS

Skill

Design System

Define design foundation: brand identity, design tokens, colour palette, typography, spacing, and component standards.

// ui-design;

Behaviour

What it does

  • Establishes semantic design tokens for colours, typography, and spacing
  • Defines component creation vs. extension decision framework
  • Creates single source of truth for all UI decisions
  • Maps design decisions to source requirements with ownership tags
  • Prevents component proliferation through clear standards
  • Ensures brand consistency across the application

When to use

Good fits

Once per project before any UI work

When establishing design standards for component development

Before component-library setup

When brand guidelines need to be translated into tokens

Development harness

Design foundation

Part of the design-to-ship pipeline: brainstorming → technical-documentation → conformance-check → reconciling-changes → planning → project-setup → executing-plans → shipping. Install the full set for structured feature work.

Test-Driven DevelopmentEnd-to-End TestingComponent DevelopmentComponent Testing
View full harness

Install

Get this skill

Uses Agent Kit via npx; no global install required.

Quick install

sh
npx @levi-putna/agent-kit@latest add levi-putna/skills --skill design-system

Global (Cursor)

sh
npx @levi-putna/agent-kit@latest add levi-putna/skills --skill design-system --global --agent cursor

Global (Claude)

sh
npx @levi-putna/agent-kit@latest add levi-putna/skills --skill design-system --global --agent claude

Project install

sh
npx @levi-putna/agent-kit@latest add levi-putna/skills --skill design-system --project

Interactive install

sh
npx @levi-putna/agent-kit@latest add levi-putna/skills

Uninstall

sh
npx @levi-putna/agent-kit@latest remove design-system

Example

Example prompt

Design System

Define the design system including brand colours, typography, and component standards.

Flow

How the skill works

  1. Gather brand assets and requirements
  2. Define semantic colour tokens and palette
  3. Establish typography and spacing scales
  4. Create component decision framework
  5. Document component audit process
  6. Map decisions to source with ownership tags