# Design Md Brand Styles

> Use when the user wants a page, app, landing page, or UI rewritten in the style of Apple, Stripe, Linear, Figma, Notion, Vercel, or other brand-inspired DESIGN.md references from the installed design library. Load the matching DESIGN.md reference and apply its visual system faithfully.

- Skill: `wbx125133/design-md-brand-styles` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add wbx125133/design-md-brand-styles`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wbx125133/design-md-brand-styles/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: wbx125133 (https://skillmd.com/u/wbx125133)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/wbx125133/design-md-brand-styles

---


# Brand DESIGN.md Styles

Use this skill when the user wants to:

- make a page look like Apple, Stripe, Linear, Notion, Figma, Vercel, or similar
- restyle an existing UI to match a recognizable design language
- compare multiple design styles before implementing a frontend
- use the local DESIGN.md library installed from the desktop collection

## Quick workflow

1. Identify the target brand or 2-3 candidate brands.
2. Read `references/brands.md` to find the correct path.
3. Open only the specific brand's `DESIGN.md` file you need.
4. Extract the parts that matter for the task:
   - visual atmosphere
   - color system
   - typography
   - spacing and layout
   - components
   - do's and don'ts
5. Translate the design system into implementation:
   - define CSS variables first
   - choose realistic font fallbacks if the original font is proprietary
   - mirror density, rhythm, contrast, and component behavior
6. If the user asks for a comparison, compare systems at the design-language level instead of dumping raw tokens.

## Rules

- Do not copy logos, wordmarks, or trademarked brand assets.
- Recreate the design language, not the branding itself.
- If the user is working inside an existing product, preserve the product's IA and structure unless they explicitly want a redesign.
- If a brand uses a proprietary font like `SF Pro`, say so and use a close fallback when implementing.
- Prefer one dominant style reference. Only mix brands when the user explicitly asks for a hybrid.

## References

- Brand index: `references/brands.md`
- Source library root: `references/library/README.md`
- Brand files: `references/library/design-md/<brand>/DESIGN.md`

## Good defaults

- For premium minimalism: `apple`, `vercel`, `notion`
- For polished SaaS marketing: `stripe`, `linear.app`, `framer`, `webflow`
- For dark developer tooling: `cursor`, `raycast`, `warp`, `supabase`
- For editorial / warm product pages: `airbnb`, `intercom`, `claude`

## Output guidance

- When implementing UI, explicitly mention which brand reference you used.
- Convert the chosen DESIGN.md into a concise implementation plan before coding.
- If the user asks for options, offer 3 sharply different directions rather than many similar ones.