Brand Design Md banner
zephyrwang6 zephyrwang6

Brand Design Md

AI community

Description

A Claude Code Skill that gives your AI agent the design language of 62 world-class brands — on demand.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

brand-design-md

A Claude Code Skill powered by [getdesign.md](https://getdesign.md) — give your AI agent the design language of world-class brands, on demand.

![Brands](https://img.shields.io/badge/brands-62-533afd?style=flat-square) ![Claude Code](https://img.shields.io/badge/Claude_Code-Skill-d97757?style=flat-square) ![Last Update](https://img.shields.io/github/last-commit/zephyrwang6/brand-design-md?style=flat-square&label=last%20update) ![License](https://img.shields.io/github/license/zephyrwang6/brand-design-md?style=flat-square)

[English](#english) · [中文](#中文)


The Problem

Vibecoding has a style problem.

You can ask AI to build a landing page in minutes. But the result looks like... AI built it. Random primary colors. System fonts. Buttons that could belong to any company on earth.

The fix isn't better prompting — it's better context. Design systems like Apple's, Notion's, and Stripe's aren't "minimalist" or "clean" in the abstract. They're defined by exact values: `letter-spacing: -2.125px`, `font-weight: 300`, `rgba(50,50,93,0.25) 0px 30px 45px -30px`. That precision is what makes them recognizable.

This skill gives Claude Code access to all of it.


What It Does

This Claude Code Skill wraps [getdesign.md](https://getdesign.md) — a project that distills 62 top brand design systems into structured `DESIGN.md` files — and makes it available as a conversational interface.

**Say this:**

"Build a login page in Stripe style" "Make it look like Linear" "Notion warm colors + Linear minimal layout, build a card component"

**The skill will:**

  1. Recognize the brand name (Chinese or English)
  2. Run npx getdesign@latest add to fetch the latest design spec
  3. Extract exact color tokens, typography rules, spacing systems, shadow formulas
  4. Generate UI code that strictly follows the spec — no approximations

Because it calls `npx` at runtime, it always fetches the **latest version** of the design spec. I