Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
yzfly avatar

Awesome Design Html

yzfly/awesome-design-html

  • 86 installs
  • 132 repo stars
  • Updated June 14, 2026
  • yzfly/awesome-design-html

Helps with design & ui/ux tasks.

About

awesome-design-html is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.

  • awesome-design-html
  • Design & UI/UX
  • AI-coding skill

Awesome Design Html by the numbers

  • 86 all-time installs (skills.sh)
  • +6 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #1,163 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/yzfly/awesome-design-html --skill awesome-design-html

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs86
repo stars★ 132
Last updatedJune 14, 2026
Repositoryyzfly/awesome-design-html ↗

What it does

Helps with design & ui/ux tasks.

Files

SKILL.mdMarkdownGitHub ↗

Awesome Design HTML

A reference library of 118 single-file HTML pages, split into:

  • `assets/web/design.zhongguo-colors.html` — 🎨 中国传统色 Chinese Traditional Colors: a 742-hue swatch page derived from nevertoday/zhongguo-traditional-colors. Hues are auto-grouped by color family (红/橙/黄/绿/青/蓝/紫/白/灰褐/黑), searchable by name or HEX, click-to-copy. Use when the user wants a Chinese traditional color palette / 中式配色 / 色卡. Featured first in the gallery.
  • `assets/web/` — 96 marketing-page demos (incl. 22 中国大厂). Hero + features + pricing + design system reference. Use when the user wants a website / landing page / product page in a brand's style.
  • `assets/ios/` — 22 iOS app mockups. Three iPhone frames in a hero stage showing the real app's home / detail / profile screens + design system reference. Use when the user wants a mobile app UI mockup or to honor a brand's native iOS surfaces (Now Playing, swipe deck, chat bubble, lesson path...).

Every file is self-contained: inline CSS in a :root token block, Google Fonts CDN, brand-faithful colors / typography / radius / components, plus a "View source ↗" link to the underlying design spec.

How to use this skill

When the user mentions a brand name plus design / style / page / UI / hero / pricing / screen / iPhone / app:

1. Match the brand and the platform:

  • Wants a webpage / landing page / marketing page → look in assets/web/
  • Wants an iOS app mockup / iPhone screen / mobile UI → look in assets/ios/
  • Some brands have both (Spotify, Notion, Airbnb, etc.) — pick the one matching the user's intent.

2. Read the matching HTML at assets/web/design.<slug>.html or assets/ios/design.<slug>-ios.html. 3. Adapt to the user's request — extract tokens (colors, typography, radius, button shape, hero archetype) and apply them. Don't homogenize multiple brands into one generic look.

File naming

  • Web variant: assets/web/design.<slug>.html
  • iOS variant: assets/ios/design.<slug>-ios.html

A few slugs were normalized:

BrandSlugNotes
linear.applinear
mistral.aimistral
together.aitogether
x.aixai(web only)
opencode.aiopencode
bmw-mbmw-mhyphen kept
x.com (Twitter)x-twitter(iOS only)
apple-musicapple-music(iOS only)

Brand index — Web (95)

🇨🇳 中国大厂 China tier (22, NEW 2026)

字节系: feishu (飞书), douyin (抖音), doubao (豆包) 阿里系: aliyun (阿里云), alipay (支付宝), dingtalk (钉钉), yuque (语雀) 腾讯系: tencent-cloud (腾讯云), wechat (微信) 国产 AI: deepseek, kimi, wenxin (文心一言), qwen (通义千问), qwencloud (Qwen Cloud · AI-Native Cloud platform) 新能源车: xiaomi-ev (小米汽车), nio (蔚来), li-auto (理想), zeekr (极氪) 内容/消费: bilibili (哔哩哔哩), mihoyo (米哈游), xiaomi (小米), xiaohongshu (小红书 · 瀑布流 explore feed)

Global tier (73)

Productivity / SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier

Dev tools / IDEs: browseros (agentic browser · cream + terracotta + dog mascot), bun (all-in-one JS toolkit · cream heritage hero + hot-pink #ff73a8 + bun mascot · docs surface), cursor, figma, framer, opencode, raycast, sanity, vercel, warp

AI / LLM platforms: claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai

Infra / dev infra: composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase

Fintech / crypto: binance, coinbase, kraken, mastercard, revolut, stripe, wise

Auto / luxury: bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla

Consumer / commerce: airbnb, nike, pinterest, shopify, spotify, starbucks, uber

Enterprise / platform: ibm, meta, nvidia, expo

Media / editorial: theverge, wired

Gaming / aero / telecom: playstation, spacex, vodafone

The 3 originals (quality benchmarks): stripe, linear, notion

Brand index — iOS (22)

Music / Video: spotify-ios, apple-music-ios, youtube-ios, netflix-ios, tiktok-ios

Social: instagram-ios, threads-ios, x-twitter-ios, snapchat-ios

Messaging: whatsapp-ios, telegram-ios, discord-ios

AI / Productivity: chatgpt-ios, notion-ios

Travel: uber-ios, airbnb-ios

Dating: tinder-ios, hinge-ios

Food / Finance / Learning: starbucks-ios, doordash-ios, robinhood-ios, duolingo-ios

Brand archetypes (quick lookup when no specific brand named)

ArchetypeWeb examplesiOS examples
Dark canvas + product UI as protagonistlinear, warp, cursor, sentry, hashicorp, opencodespotify, netflix, threads, x-twitter, discord
Light + gradient mesh herostripe, vercel, intercomapple-music
Light + pastel cards / colorful spectrumnotion, slack, airbnb, miro, clay, pinterest, xiaohongshuinstagram, snapchat, duolingo
Masonry / waterfall vertical card feedpinterest, xiaohongshu—
Editorial print magazinewired, theverge, claude, mistral, resend, elevenlabs—
Stark monochrome + minimal radiusapple, vercel, figma, bugatti, tesla, spacexuber, threads, chatgpt
Dashboard mockup as centerpiecestripe, mongodb, supabase, posthog, hashicorp, coinbaserobinhood
Pill button systemstripe, slack, airbnb, spotify, mastercard, coinbaseairbnb-ios, instagram-ios
Rectangle button system (8px or less)notion, supabase, vercel, linear, mistral, expowhatsapp, notion, telegram
Luxury auto + spec tablebmw, ferrari, lamborghini, bugatti, bmw-m, tesla—
3D chunky shadow buttons—duolingo
Swipe deck + color-coded actions—tinder
Chat bubble two-color—whatsapp, telegram, discord

Web HTML file structure

<head>
  - Inline CSS in <style> (single block, all design tokens as :root --custom-properties)
  - Google Fonts CDN (Inter + brand-appropriate companion fonts)

<body>
  - Top nav matching brand
  - Hero (brand's signature pattern: mesh, dark band, product mockup, etc.)
  - 2-4 feature sections honoring brand rhythm
  - Pricing or CTA appropriate to brand
  - Design system reference section (Part B):
    - "Color" grouped sub-blocks
    - "Typography" table: token name (mono) + spec (mono) + live sample
    - "Radius" visual ladder
    - "Components" matrix: buttons + inputs + cards + tags/badges
  - Footer matching brand
  - Floating bottom-right "View source ↗" link to upstream
</body>

iOS HTML file structure

<head>
  - Inline CSS, :root tokens, Google Fonts
  - iPhone frame CSS (270pt × ~600pt, dynamic island, rounded 38px screen, side buttons)

<body>
  - Top nav (brand mark + iOS suffix)
  - Hero with 3 iPhone frames:
    - Left   iPhone (rotated -4°)  — secondary screen
    - Center iPhone (scaled 1.05)   — signature screen
    - Right  iPhone (rotated +4°)   — tertiary screen
    Each iPhone shows: dynamic island + status bar (9:41) + rendered app UI + bottom label
  - "iOS Surface Anatomy" feature grid (3 surfaces)
  - 3 alternating iOS-specific feature rows (e.g. Dynamic Island Live Activity, haptics matrix, lock-screen widget, swipe gestures, etc.)
  - Design system reference section (Part B) — same as web but with iOS Spec Strip table (heights, paddings, animation curves, haptics)
  - Footer + floating "View source ↗" → spectr.to gallery or upstream README
</body>

Quality bar (when generating new pages from this reference)

  • Honor the brand's actual signature — don't apply a generic template. Stripe's mesh, Linear's #010102 canvas, Notion's pastel tints, Apple's product tile rhythm, Spotify's pill 9999px + uppercase tracking are all non-negotiable identifiers.
  • Don't introduce chromatic accents the brand doesn't use — Linear has only lavender, NVIDIA has only green, xAI has no accents at all, Threads has zero accent except inherited blue check + red heart.
  • Match button shape exactly — pill vs rectangle vs sharp corners is brand-defining.
  • Negative letter-spacing on display where the brand spec calls for it (Linear -3px, Stripe -1.4px, etc.).
  • Tabular figures (font-feature-settings: "tnum") where the brand shows money or numerics (Stripe, Coinbase, Binance, Wise, Robinhood).
  • iOS files: iPhone frame must include Dynamic Island, status bar at 9:41 with cellular bars + battery, correct tab bar count per brand (e.g. Snapchat 5 tabs with center camera button, Instagram 5 tabs, ChatGPT no tab bar).
  • iOS files: 3D chunky shadow buttons are non-negotiable for Duolingo (box-shadow 0 4-6px 0 darker). Chat bubble corner-cut is non-negotiable for WhatsApp (sender-side corner = 0).
  • No drop-shadow chrome on dark canvas brands — Linear, Bugatti use surface ladders + hairlines instead.

When NOT to use this skill

  • The user is asking for a generic layout pattern (e.g., "two-column dashboard") with no brand reference — use general design judgment instead.
  • The user has their own design system / brand guidelines that should override these references.
  • The user is asking about a brand NOT in the 116-brand list — say so explicitly rather than guess.

Source attribution

Each HTML's bottom-right corner links back to its source.

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k
Design & UI/UXui
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.