skills.rest
amirbiron
amirbironCOMMUNITY
Explore all skills by this author →
GitHub

design-system-md

Applies brand design systems from DESIGN.md files to UI generation using the getdesign CLI.

Updated Aug 5, 2026
Search Tags:#typography#branding#landing page#design system#design tokens#ui design#getdesign
One-click install
npx skills add https://github.com/amirbiron/claude-skills --skill design-system-md-amirbiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-md
Source: https://github.com/amirbiron/claude-skills/tree/main/skills/design-system-md
Command: npx skills add https://github.com/amirbiron/claude-skills --skill design-system-md-amirbiron

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires getdesign.

What problem does it solve? Building interfaces without a defined design system leads to inconsistent colors, fonts, and spacing. This Skill pulls professional design systems from 58 leading brands (Apple, Stripe, Notion, and more) as a DESIGN.md file and applies them consistently to every UI you create. ## Core Features & Use Cases - Brand Design System Retrieval: Fetches complete design systems (colors, typography, spacing, components) via the getdesign CLI as a DESIGN.md file. - Guided Brand Selection: Recommends brands by project type — premium (Apple, Ferrari), SaaS dashboards (Linear, Stripe, Vercel), finance (Coinbase, Revolut), and more. - Custom Design Systems: Supports creating a tailored DESIGN.md by modifying a base brand's palette, fonts, and component styles. - Use Case: When building a pricing page for a SaaS product, pull Stripe's design system with npx getdesign@latest add stripe, then generate the page so every color, font, and spacing value matches the DESIGN.md specification. ## Quick Start Ask the AI to create a landing page in the style of Apple by pulling the Apple design system with getdesign and applying its DESIGN.md to the interface.

Frequently Asked Questions about design-system-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply a brand design system to my UI project?▼

Run npx getdesign@latest add <brand> in your project root to fetch the brand's DESIGN.md file, then reference it in CLAUDE.md so all interface work follows its colors, fonts, spacing, and component styles.

What brands are available in the getdesign CLI?▼

The getdesign CLI offers 58 brands including Apple, Stripe, Notion, Linear, Vercel, Figma, Coinbase, and Ferrari. Run npx getdesign@latest list to see the full catalog organized by use case.

How do I choose the right design system for a SaaS dashboard?▼

For SaaS dashboards, the Skill recommends Linear, Stripe, Vercel, or Supabase. Choose based on your audience and product positioning rather than visual preference alone.

Can I customize a DESIGN.md with my own brand colors?▼

Yes. Pull a base brand's DESIGN.md, then replace only the Color Palette with your brand colors, adjust Typography fonts, and tune Component Stylings. Save the customized version as a separate file without overwriting the original.

Can I combine multiple brand design systems in one project?▼

You can merge at most two brands by pulling both with the --out flag into separate reference files and comparing them. Combining more than two brands breaks visual consistency and is not recommended.

Related Skills

Explore More Design & Creative Skills→
HDeiblerHDeibler
6

archetypes

Translate emotional personality patterns into brand, product, and onboarding design choices.

Community
Intermediate
Oruga420Oruga420

awesome-design-md

Generate brand-specific DESIGN.md files with full design tokens for frontend generation.

Community
Intermediate
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
lintendolintendo
152

implement-design

Translate Figma designs into UI code with design tokens.

Community
Advanced