How do I install the Design Md Brand Styles skill?

Run npx skillmds@latest add wbx125133/design-md-brand-styles 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 Md Brand Styles safe to use?

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

Which AI agents work with Design Md Brand Styles?

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 Md Brand Styles free to use?

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

Who published Design Md Brand Styles?

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

Design Md Brand Styles by wbx125133

Name: Design Md Brand Styles
Rating: 4.2 (5 reviews)
Author: wbx125133

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.

wbx125133 Updated Sep 22, 2026

File contents

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

Identify the target brand or 2-3 candidate brands.
Read references/brands.md to find the correct path.
Open only the specific brand's DESIGN.md file you need.
Extract the parts that matter for the task:
- visual atmosphere
- color system
- typography
- spacing and layout
- components
- do's and don'ts
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
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.

---name: design-md-brand-stylesdescription: 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.---# Brand DESIGN.md StylesUse 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 workflow1. 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'ts5. 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 behavior6. 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.

Frequently asked questions