How do I install the Design System skill?

Run npx skillmds@latest add ippollo/design-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design System safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design System?

Ippollo (@ippollo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design System by ippollo — Agent Skill

Name: Design System
Author: Ippollo

Design System

Use when choosing color palettes, typography, or UI styles for a new project, designing landing pages or dashboards, or implementing accessibility requirements. Generates full design systems with searchable styles, font pairings, and stack-specific guidelines. For implementation code patterns, see frontend-design.

Ippollo df89f77 31 files · 516.2 KB Updated Sep 17, 2026

File contents

Design System - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks.

When to Apply

Designing new UI components or pages
Choosing color palettes and typography
Building landing pages or dashboards
Implementing accessibility requirements

Quick Start

Generate a full design system (REQUIRED first step):

python3 skills/design-system/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

Example:

python3 skills/design-system/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

Priority Categories

Priority	Category	Impact
1	Accessibility	CRITICAL
2	Touch & Interaction	CRITICAL
3	Performance	HIGH
4	Layout & Responsive	HIGH
5	Typography & Color	MEDIUM
6	Animation	MEDIUM

Essential Rules (CRITICAL)

Accessibility

Minimum 4.5:1 color contrast for text
Visible focus rings on interactive elements
Alt text for images, aria-label for icon buttons

Touch & Interaction

Minimum 44x44px touch targets
Add cursor-pointer to clickable elements
Disable buttons during async operations

Performance

Use WebP images with lazy loading
Check prefers-reduced-motion
Reserve space for async content

Available Domains

Domain	Use For
`product`	Product type recommendations
`style`	UI styles, colors, effects
`typography`	Font pairings, Google Fonts
`color`	Color palettes by product
`landing`	Page structure, CTA
`chart`	Chart types, libraries
`ux`	Best practices

Domain search:

python3 skills/design-system/scripts/search.py "<keyword>" --domain <domain>

Available Stacks

html-tailwind (default), react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

Stack guidelines:

python3 skills/design-system/scripts/search.py "<keyword>" --stack html-tailwind

Persist Design System

Save for hierarchical retrieval across sessions:

python3 skills/design-system/scripts/search.py "<query>" --design-system --persist -p "Project Name"

Creates design-system/MASTER.md as global source of truth.

Additional Resources

For detailed documentation, see:

REFERENCE.md - Full examples, anti-patterns, checklists
Vercel Guidelines - Web interface compliance

---name: design-systemdescription: Use when choosing color palettes, typography, or UI styles for a new project, designing landing pages or dashboards, or implementing accessibility requirements. Generates full design systems with searchable styles, font pairings, and stack-specific guidelines. For implementation code patterns, see frontend-design.---# Design System - Design IntelligenceComprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks.## When to Apply- Designing new UI components or pages- Choosing color palettes and typography- Building landing pages or dashboards- Implementing accessibility requirements## Quick Start**Generate a full design system (REQUIRED first step):**```bashpython3 skills/design-system/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]```**Example:**```bashpython3 skills/design-system/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"```## Priority Categories| Priority | Category | Impact || -------- | ------------------- | -------- || 1 | Accessibility | CRITICAL || 2 | Touch & Interaction | CRITICAL || 3 | Performance | HIGH || 4 | Layout & Responsive | HIGH || 5 | Typography & Color | MEDIUM || 6 | Animation | MEDIUM |## Essential Rules (CRITICAL)### Accessibility- Minimum 4.5:1 color contrast for text- Visible focus rings on interactive elements- Alt text for images, aria-label for icon buttons### Touch & Interaction- Minimum 44x44px touch targets- Add `cursor-pointer` to clickable elements- Disable buttons during async operations### Performance- Use WebP images with lazy loading- Check `prefers-reduced-motion`- Reserve space for async content## Available Domains| Domain | Use For || ------------ | ---------------------------- || `product` | Product type recommendations || `style` | UI styles, colors, effects || `typography` | Font pairings, Google Fonts || `color` | Color palettes by product || `landing` | Page structure, CTA || `chart` | Chart types, libraries || `ux` | Best practices |**Domain search:**```bashpython3 skills/design-system/scripts/search.py "<keyword>" --domain <domain>```## Available Stacks`html-tailwind` (default), `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`**Stack guidelines:**```bashpython3 skills/design-system/scripts/search.py "<keyword>" --stack html-tailwind```## Persist Design SystemSave for hierarchical retrieval across sessions:```bashpython3 skills/design-system/scripts/search.py "<query>" --design-system --persist -p "Project Name"```Creates `design-system/MASTER.md` as global source of truth.---## Additional ResourcesFor detailed documentation, see:- [REFERENCE.md](file:///c:/Projects/specwright/skills/design-system/REFERENCE.md) - Full examples, anti-patterns, checklists- [Vercel Guidelines](https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md) - Web interface compliance

Frequently asked questions