How do I install the Awesome Design Md skill?

Run npx skillmds@latest add wearescientist/awesome-design-md 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 Awesome Design Md safe to use?

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

Which AI agents work with Awesome Design Md?

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 Awesome Design Md free to use?

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

Who published Awesome Design Md?

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

Awesome Design Md by wearescientist

Name: Awesome Design Md
Author: wearescientist

Awesome Design Md

Select and apply a fitting Awesome Design MD `DESIGN.md` style for frontend/UI work. Use when the user asks to design UI, redesign a page, beautify a frontend, create a dashboard, improve layout/visual hierarchy, change visual style, use a big-company design style, or mentions `DESIGN.md`, Awesome Design MD, big-tech styles, brand-inspired UI, Apple/Stripe/Linear/Cursor/Raycast/Voltagent/Binance/Coinbase/xAI-style interfaces.

wearescientist 13cd0bb 6 files · 10.0 KB Updated Sep 17, 2026

File contents

Awesome Design MD

Purpose

Use the bundled Awesome Design MD library as a selectable reference set for UI design. Do not assume one global style. Pick the style that best fits the product, then read that style's DESIGN.md before changing UI.

Resolve all library paths relative to this skill folder, meaning the directory that contains this SKILL.md.

Bundled library:

<skill-root>/design-md

Style index:

<skill-root>/STYLE_INDEX.txt

Style file pattern:

<skill-root>/design-md/<style>/DESIGN.md

Optional selection notes:

<skill-root>/references/style-selection.md

Workflow

If the user names a style, use that exact style when it exists.
If no style is named, inspect the product context and choose 1 style. Mention the chosen style briefly before editing.
Read STYLE_INDEX.txt if you need to see available styles.
Read only the selected design-md/<style>/DESIGN.md; do not load the whole library.
Apply the style as guidance for layout, color, typography, spacing, interaction feel, and component chrome.
Preserve existing product constraints, data density, accessibility, and framework conventions.
For existing apps, evolve the UI without breaking established flows unless the user explicitly asks for a redesign.

Default Style Mapping

Developer tool, AI agent console, automation panel: voltagent, cursor, warp, linear.app, raycast.
SaaS dashboard, task/project management, admin console: linear.app, stripe, vercel, posthog, supabase.
Consumer/mobile-like polished product: apple, airbnb, spotify, pinterest, notion.
Crypto/Web3/exchange/finance: coinbase, binance, kraken, revolut, wise.
AI lab/model/product page: x.ai, mistral.ai, cohere, together.ai, runwayml, replicate.
Docs/developer portal: mintlify, vercel, stripe, supabase, hashicorp.
Luxury/automotive/brand-heavy landing page: bugatti, ferrari, lamborghini, bmw, tesla, nike.

If several styles fit, choose the one that improves the specific screen most, not the flashiest one.

Rules

Do not blindly apply voltagent everywhere.
Do not import a DESIGN.md into the target project unless the user asks; reading from the bundled library is enough.
Do not copy large chunks of design text into the final answer.
Do not override a project-level DESIGN.md; if it exists, treat it as the local routing note and then read the selected bundled style.
Avoid generic AI UI defaults. Use the selected style's concrete tokens and component habits.
For projects that require a specific file encoding, follow the project's local instruction.

Quick Commands

List available styles from the skill root:

Get-Content -LiteralPath '.\STYLE_INDEX.txt'

Read one style from the skill root:

Get-Content -Raw -Encoding UTF8 -LiteralPath '.\design-md\linear.app\DESIGN.md'

---name: awesome-design-mddescription: Select and apply a fitting Awesome Design MD `DESIGN.md` style for frontend/UI work. Use when the user asks to design UI, redesign a page, beautify a frontend, create a dashboard, improve layout/visual hierarchy, change visual style, use a big-company design style, or mentions `DESIGN.md`, Awesome Design MD, big-tech styles, brand-inspired UI, Apple/Stripe/Linear/Cursor/Raycast/Voltagent/Binance/Coinbase/xAI-style interfaces.---# Awesome Design MD## PurposeUse the bundled Awesome Design MD library as a selectable reference set for UI design. Do not assume one global style. Pick the style that best fits the product, then read that style's `DESIGN.md` before changing UI.Resolve all library paths relative to this skill folder, meaning the directory that contains this `SKILL.md`.Bundled library:`<skill-root>/design-md`Style index:`<skill-root>/STYLE_INDEX.txt`Style file pattern:`<skill-root>/design-md/<style>/DESIGN.md`Optional selection notes:`<skill-root>/references/style-selection.md`## Workflow1. If the user names a style, use that exact style when it exists.2. If no style is named, inspect the product context and choose 1 style. Mention the chosen style briefly before editing.3. Read `STYLE_INDEX.txt` if you need to see available styles.4. Read only the selected `design-md/<style>/DESIGN.md`; do not load the whole library.5. Apply the style as guidance for layout, color, typography, spacing, interaction feel, and component chrome.6. Preserve existing product constraints, data density, accessibility, and framework conventions.7. For existing apps, evolve the UI without breaking established flows unless the user explicitly asks for a redesign.## Default Style Mapping- Developer tool, AI agent console, automation panel: `voltagent`, `cursor`, `warp`, `linear.app`, `raycast`.- SaaS dashboard, task/project management, admin console: `linear.app`, `stripe`, `vercel`, `posthog`, `supabase`.- Consumer/mobile-like polished product: `apple`, `airbnb`, `spotify`, `pinterest`, `notion`.- Crypto/Web3/exchange/finance: `coinbase`, `binance`, `kraken`, `revolut`, `wise`.- AI lab/model/product page: `x.ai`, `mistral.ai`, `cohere`, `together.ai`, `runwayml`, `replicate`.- Docs/developer portal: `mintlify`, `vercel`, `stripe`, `supabase`, `hashicorp`.- Luxury/automotive/brand-heavy landing page: `bugatti`, `ferrari`, `lamborghini`, `bmw`, `tesla`, `nike`.If several styles fit, choose the one that improves the specific screen most, not the flashiest one.## Rules- Do not blindly apply `voltagent` everywhere.- Do not import a `DESIGN.md` into the target project unless the user asks; reading from the bundled library is enough.- Do not copy large chunks of design text into the final answer.- Do not override a project-level `DESIGN.md`; if it exists, treat it as the local routing note and then read the selected bundled style.- Avoid generic AI UI defaults. Use the selected style's concrete tokens and component habits.- For projects that require a specific file encoding, follow the project's local instruction.## Quick CommandsList available styles from the skill root:```powershellGet-Content -LiteralPath '.\STYLE_INDEX.txt'```Read one style from the skill root:```powershellGet-Content -Raw -Encoding UTF8 -LiteralPath '.\design-md\linear.app\DESIGN.md'```

Frequently asked questions