Design Md

Reference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography, components, layout, elevation. Use when the user wants UI, a landing page, or a component that matches a specific brand's look; wants to pick a design direction from real design systems; says "like <brand>", "make it feel like Linear / Stripe / Apple"; or needs a concrete design-token starting point before frontend work. Pairs with frontend-design and tailwind-design-system.

49 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add arumwu/design-md-skill --skill design-md

Manual install

git clone --depth 1 https://github.com/arumwu/design-md-skill.git /tmp/design-md-skill
mkdir -p ~/.claude/skills
cp -r /tmp/design-md-skill/. ~/.claude/skills/design-md

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# design-md — 74 brand design-system references

A curated set of `DESIGN.md` files distilled from well-known brand websites. Each one
captures a real design system in AI-readable form: **color palette with semantic roles,
typography hierarchy, component rules, layout principles, and depth / elevation**. Hand
one to a coding agent and it can generate UI that matches that brand's look.

Source content: **[voltagent/awesome-design-md](https://github.com/voltagent/awesome-design-md)** (MIT).
This skill is a thin *index + workflow* layer over that library.

## When to use this skill

- The user asks for UI / a landing page / a component in a named brand's style
  ("like Linear", "make it feel like Stripe", "give it an Apple vibe").
- You need to pick a **design direction** from real systems instead of inventing one.
- You want a concrete set of design tokens (colors / type scale / component rules) as a
  starting point before handing off to `frontend-design` / `tailwind-design-system`.

## Workflow

1. **Pick a brand** — scan the index below by *mood + primary color* and choose the
   closest match to the brief.
2. **Load its DESIGN.md** — read `<library>/design-md/<brand>/DESIGN.md`, using the
   slug from the index (e.g. `linear.app`, `x.ai`, `bmw-m`).
3. **Follow it** — treat the color roles, type scale, components, and elevation as a
   hard spec. For a visual reference, open the sibling `preview.html` / `preview-dark.html`.

Read the full skill on GitHub

Details

Skill name: design-md
Repository: arumwu/design-md-skill
License: MIT
Repo updated: 12 July 2026

FAQ

What does the Design Md skill do?

How do I install the Design Md skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add arumwu/design-md-skill --skill design-md. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Md popular?

It lives in arumwu/design-md-skill, which has 49 GitHub stars and 0 forks.

Related skills

Stylekit

AnxForever/stylekit-skill

Apply StyleKit visual styles and public assets when building, restyling, or reviewing UI. Use for named StyleKit styles, visual direction, mobile interface patterns, and component-library selection; preserve the target platform and existing product behavior.

Frontend & Design

Canvas Cowork

flowith-ai/canvas-cowork

Generate text, images and videos on Flowith's canvas from the CLI, headless or with a live cursor. Use for any image/video generation (Seedance, Veo, Kling, gpt-image, Gemini image), "canvas", "Flowith", "Neo", drawing/creating visual content, or past canvas work. /canvas-cowork

Frontend & Design

Jiujiastudy

jiujiastudy/jiujiastudy

救驾（jiujiastudy）是留学生的 Canvas / Moodle 学习手帐：盯 deadline、排本周该学什么、按状态给建议。用户提到课程、作业、deadline、考试、Canvas、Moodle、老师，或说「现在什么情况」「最近要交什么」「这周学什么」「做完了」「没状态 / 累 / 来不及」「交之前检查」「想问老师」「做学习页」「一直在拖 / 开不了头」时使用；第一次用时自己完成设置，只向用户要学校网址（Canvas 另要 token）。

Frontend & Design10

Vibe to UI

MonkeyUI-dev/vibe-to-ui

Design systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy aesthetic intent. Classifies page archetype, explores 3 product-aware directions before locking tokens (unless exact restoration), and applies only after confirmation. Use when designing or restyling UI, collecting design inspiration under ~/.vibe-to-ui/inspirations, extracting tokens/motion, generating assets, saving brand context under ~/.vibe-to-ui, or Git remote sync of Design Context for cross-devi

Frontend & Design

Product Promo Animation

jitOffice/jit-motion

Generate a single-file, self-contained HTML product promotional animation video (15-30s) from a product brief/PRD. Produces a multi-scene GSAP timeline storyboard, a four aspect-ratio switcher (16:9/4:3/1:1/9:16), a zero-emoji SVG icon system, brand colors harvested from the official site, playback controls, and SEO video metadata. Use when the user asks for a product promo animation, marketing/ad video, animated HTML demo, or product launch video, or mentions building a product video with GSAP/motion/SVG. 基于产品需求文档/PRD/简介生成单文件、自包含的 HTML 产品宣传动画视频；当用户要求制作产品宣传动画、营销/广告视频、HTML 动画演示或产品发布视频时使用。

Frontend & Design

Modern React Guidance

adhhamdev/modern-react-guidance

Authoritative guidance for modern React 19+ (Actions, use, Compiler, View Transitions, Fragment refs, Activity, browser, useEffectEvent). Use when writing, reviewing, refactoring, or migrating React components, forms, data fetching, concurrent UI, or upgrading to React 19+. Triggers on React, React 19, useActionState, useOptimistic, forwardRef, useEffect data fetch, React Compiler, ViewTransition, Suspense patterns, or codemods. Always prefer latest official patterns over training data.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.