This is a design system power that separates the rules and guidance of a design system from the technology underneath it. The power contains all guidelines information needed for Kiro to construct front-end experiences in ShadCN — styles, patterns, paradigms, accessibility, and composition rules — without the need to manage and maintain an underlying technology stack. This ensures standards are met: consistency, centralized solutions to common problems, and more efficient execution against user needs, without the UI framework overhead. This is a prepackaged version of the design system scaffold using a curated set of rules and standards. If you would like to build off of these standards with your own rules, standards, and technologies check out our design system power builder.
Use it for prototyping, development, or as a stand-in for the design-oriented aspects of a design system.
Install as a Kiro Power:
cp -r design-system-scaffold/ ~/.kiro/powers/design-system-scaffold/Or install via Kiro UI: Command Palette → "Powers: Configure" → "Install from folder".
Create a new color theme with all the tokens your components need. The agent walks you through each variable group or accepts bulk imports from design tools or CSS files.
Trigger: "generate a new theme" or "create a theme."
Set up a complete Storybook with stories for every installed component, pattern, and template. Includes theme switching and light/dark mode in the toolbar.
Trigger: "generate a storybook" or "set up storybook."
Describe what you need and the agent composes it from design system components using the active theme's CSS variables and design heuristics.
Trigger: Describe the UI you want to build.
Ask about any component's behavior, API, variants, accessibility requirements, or CSS variables.
Trigger: "how does the accordion work" or "what props does button have."
Get WCAG 2.2 compliance guidance for any component or layout. Each component spec includes WAI-ARIA pattern references, ARIA roles, keyboard interaction rules, and contrast requirements.
Trigger: "check accessibility for dialog" or "what are the a11y requirements for tabs."
| Technology | How it's used |
|---|---|
| shadCN | Component library. All component specs are based on shadCN's API, variants, and composition patterns |
| Tailwind CSS | Utility-first CSS framework. Theme variables map to Tailwind utilities via @theme inline |
| Radix UI | Headless primitives underneath shadCN components. Referenced for accessibility patterns |
| Storybook | Component development environment. The power can generate a full Storybook from component specs |
| Motion | Animation library. Used when CSS transitions aren't sufficient |
| Lucide | Icon library (shadCN default). Icon semantics are consistent across themes |
design-system-scaffold/
├── POWER.md — Power metadata and overview
├── README.md — This file
└── steering/
├── design-system.md — Parent record and indexes
├── components/ — 57 component specs
├── patterns/ — Data Table, Date Picker
├── templates/ — Calendar, Dashboard, Login, Sidebar
├── default-theme.md — New York base theme (light + dark)
├── design-guidelines.md — Design heuristics
├── ui-guidelines.md — UI composition rules
├── copy-guidelines.md — Voice, tone, writing standards
├── glossary.md — Terminology
├── technical-guidelines.md — Architecture, theming, Tailwind
├── shadcn.md — shadCN setup
├── storybook.md — Storybook configuration
├── motion.md — Motion animation library
├── lucide.md — Lucide icon library
├── mcp.md — MCP server setup
└── workflows.md — Generate Theme and Generate Storybook
Components reference CSS variables (var(--foreground), var(--border)) — never hardcoded color values. The default theme (New York) holds the resolved values. Create additional themes via the Generate Theme workflow.
You don't need a design tool to use this power. If you use Figma, shadCN recommends several compatible component libraries — see design-system.md → Design Tool Libraries for the current list.
MIT