$_ awesome-design-html
GitHub
● CLAUDE CODE SKILL · v1.0

116 brand designs,
ready to read.

Single-file HTML references for marketing pages and iOS apps. Hand the GitHub link to Claude Code and it'll design Stripe-mesh heroes, Linear-dark surfaces, Spotify Now-Playing screens — without guessing.

Browse gallery ↓ Install in Claude Code → macOS · Linux · Windows · MIT
// total brands
●116
94 web + 22 iOS · 22 China
// marketing pages
94
incl. 20 China showcase
// iOS app mockups
22
3 iPhone frames + design system + iOS spec
// license
MIT
commercial-friendly · attribution preserved
● WHY THIS EXISTS

Brand-faithful tokens.
Not generic templates.

01 / 03

Actual hex values

Stripe's mesh isn't a generic blue gradient. Linear's canvas isn't 'dark mode'. We extracted the exact tokens, so Claude doesn't have to guess.

02 / 03

Real typography ramps

Negative letter-spacing where the brand calls for it (Linear -3px). Tabular figures where money is shown (Coinbase, Robinhood). The font ladder is the brand.

03 / 03

Hero archetypes intact

Spotify's 9999px pill buttons. Notion's pastel cards. Duolingo's 3D chunky shadows. WhatsApp's 0px sender-corner bubble. Non-negotiable identifiers.

● HOW IT WORKS

Install once.
Then just talk.

No commands, no syntax, no slash-prefix. The skill auto-loads when you mention a brand name. Claude reads the matching reference file, pulls the actual tokens, and applies them — automatically.

01
Copy one line. Paste in Claude Code.
claude code
YOUPlease install this Claude Code skill for me: https://github.com/yzfly/awesome-design-html
CLAUDECloning to ~/.claude/skills/awesome-design-html · skill loaded · ready.
That's it. No command-line. No syntax. Claude does the clone.
02
Talk like always
conversation
YOUMake a Linear-style product page
CLAUDEReading assets/web/design.linear.html · applying #5e6ad2 lavender accent + -3px letter-spacing…
The skill is auto-triggered — you don't say '/skill' or anything.
03
Get the real thing
output
✓ hero: #010102 canvas
✓ accent: #5e6ad2 (lavender)
✓ display: Inter Display, -3px tracking
✓ buttons: 6px radius (not pill)
✓ shadow: none on dark canvas — hairlines only
Brand-faithful. Not a generic gradient. Not 'dark mode'.
// MORE EXAMPLES TO TRY
"Mimic Stripe hero gradient mesh"
"Show me a Spotify Now Playing iPhone mockup"
"Notion-flavor pastel cards"
"Duolingo-style chunky 3D buttons"
"Make me a Tinder swipe deck mockup"
"Cursor-style dark IDE landing"
● Showing 116 of 116 demos · click to open