Brand Design HTML References

96 marketing-page demos and 22 iOS device mockups—each a self-contained HTML file. Built for indie and app teams looking for style references for store screenshots, previews and landing pages. Sourced from the MIT project awesome-design-html.

Unofficial design references. Brand names, logos and visual identities belong to their owners—for learning and style inspiration only. Do not use trademark assets commercially. HTML files are open source; preview, download and extract :root design tokens.
Trending:
Loading…

HTML source: yzfly/awesome-design-html (MIT, © 2026 云中江树 / yzfly). Upstream thanks to VoltAgent/awesome-design-md and Meliwat/awesome-ios-design-md. Licence notes: /design-refs/LICENSES.txt. For takedown requests, contact us.

What this tool does

When you make App Store screenshots, previews or a landing page, you often want a Feishu-clean or Linear-restrained look—but official brand guidelines are hard to feed to an AI. This tool hosts 118 self-contained HTML demos (96 web + 22 iOS mockups) from the open-source awesome-design-html project: search by brand name in English or Chinese (Feishu, Xiaohongshu), filter by China brands, SaaS, AI, developer tools and more, then preview, download one HTML file, or copy :root design tokens and a short AI prompt. These pages are unofficial style references. Trademarks and visual identities belong to their owners—use them to learn color, type and layout, not as your own commercial marks.

How to use

  1. Type a brand name (Feishu, Linear, Spotify) or tap a trending chip.
  2. Filter by Web / iOS mockups and categories such as China brands, SaaS or AI.
  3. Open a card to preview, download the HTML, copy design tokens, or copy an AI prompt with those tokens.

FAQ

Are these official brand guidelines?

No. They are unofficial community style references that approximate real brand colors, type and layout in open HTML so people and AI tools can learn from them. Trademarks and logos still belong to each brand; AppShot Maker is not affiliated with or endorsed by them.

Can I use the downloaded HTML commercially?

The HTML files come from the MIT-licensed awesome-design-html project, so you may use, change and redistribute them under MIT. Brand names, logo artwork and distinctive trade dress inside the files are not covered by that licence—do not treat them as your trademark or imply a partnership. Safer practice: extract the palette, radii and type scale, then build your own UI.

What does “Copy design tokens” copy?

It reads the :root CSS custom properties in that HTML (brand colors, surfaces, radii, shadows, fonts), formats them as a :root { … } block and puts it on your clipboard for a stylesheet or an AI prompt.

Do previews upload anything?

No. HTML and thumbnails are static files on this site; search, filters and copying run in your browser. Preview loads our hosted HTML in an iframe and does not depend on a third-party demo CDN.

Which open-source projects are used?

HTML demos: yzfly/awesome-design-html (MIT, © 2026 云中江树 / yzfly). Upstream thanks: VoltAgent/awesome-design-md (MIT) and Meliwat/awesome-ios-design-md. Full notes: /design-refs/LICENSES.txt.

Related guides & tools

Free Emoji & Reaction LibraryPoster CanvasTwitter / OG Share ImageXiaohongshu / WeChat Cards

More tools in thedeveloper toolbox. For store preview shots, try theApp Store screenshot maker.