awesome-design-html

Skill by ara.so — Design Skills collection.

A Claude Code skill providing 115 brand-themed HTML design references (93 web + 22 iOS) that work by natural language mention. No slash commands. Just say "make a Linear-style product page" or "飞书风的页面" and Claude reads the matching reference HTML with real brand tokens (colors, fonts, radius, spacing).

What it does

• Self-describing HTML references: Each file is a complete, single-file HTML page with all CSS, fonts, and design tokens inline
• Auto-loaded by brand mention: When you mention "Stripe", "Notion", "飞书", Claude automatically references the corresponding HTML
• Real brand fidelity: Actual hex values, type scales, button shapes, gradients from each brand's current design system
• Two libraries:
  • Web (93 brands): Marketing pages, hero sections, pricing tables — Linear, Stripe, Cursor, Apple, Tesla, etc.
  • iOS (22 apps): Mobile app mockups — Spotify, Instagram, Duolingo, ChatGPT, etc.
• China tech showcase (22 brands): First comprehensive set for Chinese brands — 飞书, 抖音, 阿里云, 微信, etc.

Installation

Method 1: AI-native install (recommended)