How do I install the Nby Awesome Design Md skill?

Run npx skillmds@latest add smartchainark/nby-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 Nby 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 Nby 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 Nby 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 Nby Awesome Design Md?

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

Nby Awesome Design Md by smartchainark

Name: Nby Awesome Design Md
Author: smartchainark

Nby Awesome Design Md

Apply real-world design systems to your project via DESIGN.md. Trigger when user says "use Stripe design", "apply Notion style", "DESIGN.md", "design system", "用 Stripe 风格", "应用 Linear 设计", "套用设计系统", or names any supported brand (Stripe, Vercel, Linear, Notion, Figma, Spotify, Airbnb, Apple, etc.) in a UI/frontend context. Sources design tokens, colors, typography, components, and layout rules from VoltAgent/awesome-design-md.

smartchainark Updated Sep 17, 2026

File contents

Awesome Design MD

Apply pixel-accurate design systems from 54 real-world websites to any project. Powered by VoltAgent/awesome-design-md.

Language

Match the user's language.

Available Design Systems

AI & ML

claude cohere elevenlabs minimax mistral.ai ollama opencode.ai replicate runwayml together.ai voltagent x.ai

Developer Tools

cursor expo linear.app lovable mintlify posthog raycast resend sentry supabase superhuman vercel warp zapier

Infrastructure & Cloud

clickhouse composio hashicorp mongodb sanity stripe

Design & Productivity

airtable cal clay figma framer intercom miro notion pinterest webflow

Fintech

coinbase kraken revolut wise

Enterprise & Consumer

airbnb apple bmw ibm nvidia spacex spotify uber

Workflow

Step 1: Ensure Local Cache

Clone the repo once, reuse on subsequent runs.

REPO_DIR="$HOME/.nby-skills/nby-awesome-design-md/repo"

if [ -d "$REPO_DIR/.git" ]; then
  echo "Cache exists, pulling latest..."
  cd "$REPO_DIR" && git pull --ff-only 2>/dev/null || true
else
  echo "First run, cloning..."
  mkdir -p "$(dirname "$REPO_DIR")"
  git clone --depth 1 https://github.com/VoltAgent/awesome-design-md.git "$REPO_DIR"
fi

Step 2: Identify Target Design

If the user specifies a brand name, map it to the directory slug (e.g., "Linear" -> linear.app, "xAI" -> x.ai). If unclear, list available designs and ask.

To list all available designs:

ls "$HOME/.nby-skills/nby-awesome-design-md/repo/design-md/"

Step 3: Apply DESIGN.md

Copy the chosen DESIGN.md to the project root:

BRAND="stripe"  # replace with user's choice
cp "$HOME/.nby-skills/nby-awesome-design-md/repo/design-md/$BRAND/DESIGN.md" ./DESIGN.md

If a DESIGN.md already exists in the project root, warn the user before overwriting.

Step 4: Confirm and Guide

After placing DESIGN.md:

Briefly summarize the design system's key characteristics (2-3 lines: primary colors, font, vibe)
Inform the user that DESIGN.md is now in the project root
Proceed with UI generation if the user has a specific request, referencing DESIGN.md for all design decisions

Rules

Always read the applied DESIGN.md before generating any UI code — use it as the single source of truth for colors, typography, spacing, components, and layout.
Never hardcode design values without checking DESIGN.md first.
If the user wants to mix styles from multiple brands, copy one as the base and note which elements come from elsewhere.
When generating components, reference the exact color hex values, font families, border-radius, and shadow values from DESIGN.md.

---name: nby-awesome-design-mddescription: Apply real-world design systems to your project via DESIGN.md. Trigger when user says "use Stripe design", "apply Notion style", "DESIGN.md", "design system", "用 Stripe 风格", "应用 Linear 设计", "套用设计系统", or names any supported brand (Stripe, Vercel, Linear, Notion, Figma, Spotify, Airbnb, Apple, etc.) in a UI/frontend context. Sources design tokens, colors, typography, components, and layout rules from VoltAgent/awesome-design-md.---# Awesome Design MDApply pixel-accurate design systems from 54 real-world websites to any project. Powered by [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md).## LanguageMatch the user's language.## Available Design Systems### AI & ML`claude` `cohere` `elevenlabs` `minimax` `mistral.ai` `ollama` `opencode.ai` `replicate` `runwayml` `together.ai` `voltagent` `x.ai`### Developer Tools`cursor` `expo` `linear.app` `lovable` `mintlify` `posthog` `raycast` `resend` `sentry` `supabase` `superhuman` `vercel` `warp` `zapier`### Infrastructure & Cloud`clickhouse` `composio` `hashicorp` `mongodb` `sanity` `stripe`### Design & Productivity`airtable` `cal` `clay` `figma` `framer` `intercom` `miro` `notion` `pinterest` `webflow`### Fintech`coinbase` `kraken` `revolut` `wise`### Enterprise & Consumer`airbnb` `apple` `bmw` `ibm` `nvidia` `spacex` `spotify` `uber`## Workflow### Step 1: Ensure Local CacheClone the repo once, reuse on subsequent runs.```bashREPO_DIR="$HOME/.nby-skills/nby-awesome-design-md/repo"if [ -d "$REPO_DIR/.git" ]; then echo "Cache exists, pulling latest..." cd "$REPO_DIR" && git pull --ff-only 2>/dev/null || trueelse echo "First run, cloning..." mkdir -p "$(dirname "$REPO_DIR")" git clone --depth 1 https://github.com/VoltAgent/awesome-design-md.git "$REPO_DIR"fi```### Step 2: Identify Target DesignIf the user specifies a brand name, map it to the directory slug (e.g., "Linear" -> `linear.app`, "xAI" -> `x.ai`). If unclear, list available designs and ask.To list all available designs:```bashls "$HOME/.nby-skills/nby-awesome-design-md/repo/design-md/"```### Step 3: Apply DESIGN.mdCopy the chosen DESIGN.md to the project root:```bashBRAND="stripe" # replace with user's choicecp "$HOME/.nby-skills/nby-awesome-design-md/repo/design-md/$BRAND/DESIGN.md" ./DESIGN.md```If a `DESIGN.md` already exists in the project root, warn the user before overwriting.### Step 4: Confirm and GuideAfter placing DESIGN.md:1. Briefly summarize the design system's key characteristics (2-3 lines: primary colors, font, vibe)2. Inform the user that DESIGN.md is now in the project root3. Proceed with UI generation if the user has a specific request, referencing DESIGN.md for all design decisions## Rules- Always read the applied DESIGN.md before generating any UI code — use it as the single source of truth for colors, typography, spacing, components, and layout.- Never hardcode design values without checking DESIGN.md first.- If the user wants to mix styles from multiple brands, copy one as the base and note which elements come from elsewhere.- When generating components, reference the exact color hex values, font families, border-radius, and shadow values from DESIGN.md.

Frequently asked questions