How do I install the Awesome Design Md skill?

Run npx skillmds@latest add mithunyc/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?

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

Awesome Design Md by mithunyc — Agent Skill

Name: Awesome Design Md
Author: mithunyc

Awesome Design Md

Use curated DESIGN.md references to guide AI-generated UI and visual design. Use when building or improving frontend UI, landing pages, dashboards, design systems, visual style, brand-inspired interfaces, or when the user asks for a UI to look like a known product, company, or design reference from the VoltAgent awesome-design-md catalog.

mithunyc 70e86bd 2 files · 2.6 KB Updated Sep 17, 2026

File contents

Awesome DESIGN.md

Use this skill to choose and apply a DESIGN.md-style design reference without loading a large design catalog into context by default.

Workflow

Identify the target product category and design mood:
- Enterprise SaaS, developer tool, fintech, consumer app, marketplace, media, automotive, AI platform, dashboard, docs, or mobile app.
- Dense/utilitarian versus editorial/marketing versus cinematic/brand-forward.
Pick a reference:
- If the user names a brand in the awesome-design-md catalog, use that brand.
- If no brand is named, choose 1-3 suitable references and explain the tradeoff briefly.
- Prefer references that fit the product job, not just a fashionable palette.
Load only the needed reference:
- Prefer a local checkout if present in the current workspace at repo-inspection/awesome-design-md/design-md/<brand>/README.md.
- Otherwise use the public catalog at https://github.com/VoltAgent/awesome-design-md.
- Do not bulk-load the whole catalog.
Apply the design as constraints:
- Translate colors, type scale, component styling, spacing, density, interaction patterns, and do/don't rules into implementation choices.
- Avoid copying trademarked branding, logos, or exact protected assets unless the user owns or supplies them.
- Keep accessibility, responsive behavior, and product usability above visual imitation.
Verify visually:
- For implemented UI, inspect desktop and mobile states.
- Check that text fits, buttons and inputs are usable, contrast is acceptable, and visual hierarchy matches the chosen reference.

Default Reference Choices

Enterprise operations dashboard: Linear, Airtable, IBM, HashiCorp, Sentry.
Developer platform or API docs: Vercel, Resend, Mintlify, Replicate, OpenCode AI.
AI product: Claude, Cohere, Mistral AI, VoltAgent, Together AI.
Fintech or trust-heavy product: Stripe, Coinbase, Wise, Mastercard.
Consumer marketplace or commerce: Airbnb, Shopify, Apple, Nike.
Editorial or media: WIRED, The Verge, Spotify.

Use these as starting points, not rules.

---name: awesome-design-mddescription: Use curated DESIGN.md references to guide AI-generated UI and visual design. Use when building or improving frontend UI, landing pages, dashboards, design systems, visual style, brand-inspired interfaces, or when the user asks for a UI to look like a known product, company, or design reference from the VoltAgent awesome-design-md catalog.---# Awesome DESIGN.mdUse this skill to choose and apply a `DESIGN.md`-style design reference without loading a large design catalog into context by default.## Workflow1. Identify the target product category and design mood: - Enterprise SaaS, developer tool, fintech, consumer app, marketplace, media, automotive, AI platform, dashboard, docs, or mobile app. - Dense/utilitarian versus editorial/marketing versus cinematic/brand-forward.2. Pick a reference: - If the user names a brand in the awesome-design-md catalog, use that brand. - If no brand is named, choose 1-3 suitable references and explain the tradeoff briefly. - Prefer references that fit the product job, not just a fashionable palette.3. Load only the needed reference: - Prefer a local checkout if present in the current workspace at `repo-inspection/awesome-design-md/design-md/<brand>/README.md`. - Otherwise use the public catalog at `https://github.com/VoltAgent/awesome-design-md`. - Do not bulk-load the whole catalog.4. Apply the design as constraints: - Translate colors, type scale, component styling, spacing, density, interaction patterns, and do/don't rules into implementation choices. - Avoid copying trademarked branding, logos, or exact protected assets unless the user owns or supplies them. - Keep accessibility, responsive behavior, and product usability above visual imitation.5. Verify visually: - For implemented UI, inspect desktop and mobile states. - Check that text fits, buttons and inputs are usable, contrast is acceptable, and visual hierarchy matches the chosen reference.## Default Reference Choices- Enterprise operations dashboard: Linear, Airtable, IBM, HashiCorp, Sentry.- Developer platform or API docs: Vercel, Resend, Mintlify, Replicate, OpenCode AI.- AI product: Claude, Cohere, Mistral AI, VoltAgent, Together AI.- Fintech or trust-heavy product: Stripe, Coinbase, Wise, Mastercard.- Consumer marketplace or commerce: Airbnb, Shopify, Apple, Nike.- Editorial or media: WIRED, The Verge, Spotify.Use these as starting points, not rules.

Frequently asked questions