yzfly

yzfly / awesome-design-html

Public

113 brand-themed HTML designs as a Claude Code skill (91 web + 22 iOS, incl. 20 China showcase). Install in one line, then talk: 'do a Linear-style page', '飞书风的页面', 'Spotify Now Playing iPhone mockup'.

code.jiangshu.aiawesome-design-html
47
3
100% credibility
Found May 26, 2026 at 48 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
HTML
AI Summary

This project is a collection of 113 ready-made design templates for popular websites and apps, including Stripe, Linear, Spotify, Instagram, and many Chinese tech brands like Douyin and DeepSeek. It comes as a 'skill' that plugs into AI coding assistants, letting you simply ask for a brand's style and get real colors, fonts, and layouts to use in your own projects. You can also download any template directly as a standalone HTML file to customize yourself. The templates cover 91 website landing pages and 22 iPhone app interfaces.

How It Works

1
🔍 Discover design inspiration

You're building a website and want it to look like your favorite brands but don't know where to start.

2
✨ Add design superpowers to your AI assistant

One simple sentence to your AI coding assistant and this tool installs automatically — no setup required.

3
🎨 Ask for any brand's style

Just say something like 'make a page in Linear's style' or 'show me what Spotify's buttons look like.'

4
Choose how you want to work
🤖
AI does the work

Tell your AI assistant to build the page and watch it use real brand colors and layouts automatically

📄
Grab and go

Download any HTML page directly — every file is complete, self-contained, and ready to edit

🎉 Your project looks amazing

Whether you're building a checkout page or an app mockup, everything matches the professional style you wanted — without the design degree.

Sign up to see the full architecture

3 more

Sign Up Free

Star Growth

See how this repo grew from 48 to 47 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is awesome-design-html?

A collection of 114 brand-themed HTML pages -- 92 marketing site designs and 22 iOS app mockups -- packaged as a Claude Code skill. When installed, you can prompt the AI with natural language like "make a Linear-style page" or "Spotify Now Playing iPhone mockup" and it reads the matching reference file to extract real brand tokens (colors, fonts, radius, button shapes) and apply them to your output. Each design is a single self-contained HTML file with inline CSS and Google Fonts, so you can also grab any page directly and save it as a starting template. Brands span Stripe, Tesla, Ferrari, Duolingo, DeepSeek, Feishu, and many others.

Why is it gaining traction?

The hook is the natural language workflow -- no slash commands, no syntax, just say what you want. Developers building MVPs or prototypes often spend hours matching brand aesthetics; this gives Claude the actual visual reference so it gets colors, typography, and spacing right on the first pass. The China showcase (20 brands including Douyin, Alipay, NIO, Bilibili) fills a gap for developers building products for that market, which has been underserved in design prompt libraries. The HTML-as-documentation thesis is also gaining mindshare -- the argument that an HTML file showing a gradient is more useful than a Markdown description of it.

Who should use this?

Frontend developers building rapid prototypes who need brand-accurate UI without designing from scratch. Startup founders validating ideas with polished landing pages. Developers building products for Chinese audiences who need reference designs for Douyin-style flows or Alipay integrations. Anyone using Claude Code who wants better design fidelity in AI-generated interfaces.

Verdict

Useful concept, early stage -- 47 stars and a 1.0% credibility score indicate it's still finding its audience. The self-contained HTML approach is pragmatic and the brand coverage is genuinely broad, but there's no documentation beyond the README and no visible maintenance activity. Worth installing if you're deep in the Claude Code workflow and regularly prototype UI; treat the designs as inspiration, not production-ready assets, and validate any design tokens against official brand guidelines before shipping.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.