Awesome Design MD
A curated design-guidelines markdown skill that gives Claude opinionated, high-quality design conventions to follow.
Before & after
Same prompt, same agent — the only difference is the skill.
Claude's design output is influenced by the guidance it receives. You could provide style examples or design inspiration links. Describing your aesthetic preferences and brand guidelines would help. You might also include references to well-designed products in your space. Sharing a design system or component library if you have one could give more concrete direction. Have you considered sharing mockups or screenshots of designs you like?
DESIGN CONVENTIONS INSTALLED This skill provides Claude with a curated set of high-quality design principles to follow when building UIs. CONVENTIONS APPLIED Spacing: 8px grid system with 4px options for fine-tuning Typography: single serif typeface for display, single sans for body; 6-8 weights max Color palette: 5-7 semantic colors plus 3 neutrals; no arbitrary colors Components: cohesive pattern library with consistent interaction states Layering: clear z-index hierarchy; shadows use single light source Responsive: mobile-first, single breakpoint at 768px Contrast: WCAG AA minimum on all text Motion: 300-400ms transitions, ease-out timing EXAMPLE OUTPUT CHANGE Before skill: Generic button with 4-5 different hover states, varied spacing, inconsistent colors After skill: Button follows 8px grid, uses single transition, semantic color from palette, consistent icon sizing BEFORE SKILL: Artifact used 12 different shades of blue AFTER SKILL: Artifact uses 3 semantic colors: primary (blue), success (green), warning (orange) IMPACT UIs look intentional, not AI-generated Consistency increases with each component Design reviews faster: conventions are visible No custom configuration needed. Skill runs by default.
About this skill
name: awesome-design-md description: Use when A curated design-guidelines markdown skill that gives Claude opinionated, high-quality design conventions to follow.
Awesome Design MD
Awesome Design MD is a community-maintained collection of design best practices packaged as a Claude-readable markdown skill, referenced as one of the top GitHub-trending Claude Code skills.
What you get
- A markdown design-guidelines reference Claude follows when building UI.
Customize your output
- N/A
Example output
N/A
Best for
Developers and designers who want less generic-looking AI-built interfaces.
SKILL.md preview
---
name: awesome-design-md
description: Use this skill whenever producing or reviewing visual or UI design output, to apply a curated set of opinionated design conventions instead of generic defaults.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
- design
- standard
---
# Awesome Design MD
Applies a curated, opinionated set of design conventions to any visual output, so layouts, typography, and color read as considered rather than default.
## When to use
… (sign up to view the full skill)More design skills
View all Design skills →shadcn/ui Skill
The official shadcn/ui component-library skill for Claude.
UI UX Pro Max
A Claude skill that adds design intelligence for multi-platform UI/UX builds.
UI Polish Slash Commands
Add 20 plus verb-first commands like /polish, /quieter, /bolder, /delight, /critique to any Claude Code UI project.
Motion Polish Pass
Add Emil Kowalski-style animation and micro-interaction guidance to any Claude Code UI pass.