Awesome Design HTML
Eine Referenzbibliothek mit 118 einseitigen HTML-Dateien, unterteilt in:
assets/web/design.zhongguo-colors.html— 🎨 Chinesische traditionelle Farben (Chinese Traditional Colors): Eine Farbkarte mit 742 Farbtönen, abgeleitet von nevertoday/zhongguo-traditional-colors. Die Farbtöne werden automatisch nach Farbfamilien gruppiert (Rot/Orange/Gelb/Grün/Cyan/Blau/Violett/Weiß/Graubraun/Schwarz), sind nach Namen oder HEX durchsuchbar und per Klick kopierbar. Verwenden Sie diese Datei, wenn der Benutzer eine chinesische traditionelle Farbpalette / chinesisches Farbschema / Farbkarte wünscht. Als erstes in der Galerie aufgeführt.assets/web/— 96 Marketing-Seiten-Demos (einschließlich 22 großer chinesischer Unternehmen). Heldensektion + Funktionen + Preise + Designsystem-Referenz. Verwenden Sie diese, wenn der Benutzer eine Website / Landing Page / Produktseite im Stil einer Marke wünscht.assets/ios/— 22 iOS-App-Mockups. Drei iPhone-Rahmen in einer Heldensektion, die den tatsächlichen Startbildschirm / Detailbildschirm / Profilbildschirm der App sowie die Designsystem-Referenz zeigen. Verwenden Sie diese, wenn der Benutzer ein mobiles App-UI-Mockup wünscht oder die nativen iOS-Oberflächen einer Marke (Now Playing, Wisch-Deck, Chat-Blase, Lektionspfad usw.) nachempfunden werden sollen.
Jede Datei ist in sich abgeschlossen: Inline-CSS in einem :root-Token-Block, Google Fonts CDN, markentreue Farben / Typografie / Radius / Komponenten, plus ein Link „View source ↗“ zur zugrunde liegenden Design-Spezifikation.
Verwendung dieses Skills
Wenn der Benutzer einen Markennamen in Verbindung mit Design / Stil / Seite / UI / Heldensektion / Preise / Bildschirm / iPhone / App erwähnt:
- Marke und Plattform zuordnen:
- Wünscht eine Webseite / Landing Page / Marketingseite → in
assets/web/suchen - Wünscht ein iOS-App-Mockup / iPhone-Bildschirm / mobiles UI → in
assets/ios/suchen - Einige Marken haben beides (Spotify, Notion, Airbnb, etc.) — die dem Benutzerwunsch entsprechende auswählen.
- Wünscht eine Webseite / Landing Page / Marketingseite → in
- Das passende HTML lesen unter
assets/web/design.<slug>.htmloderassets/ios/design.<slug>-ios.html. - An die Benutzeranfrage anpassen — Tokens extrahieren (Farben, Typografie, Radius, Buttonform, Helden-Archetyp) und anwenden. Nicht mehrere Marken zu einem einheitlichen Look homogenisieren.
Dateibenennung
- Web-Variante:
assets/web/design.<slug>.html - iOS-Variante:
assets/ios/design.<slug>-ios.html
Einige Slugs wurden normalisiert:
| Marke | Slug | Hinweise |
|---|---|---|
| linear.app | linear | |
| mistral.ai | mistral | |
| together.ai | together | |
| x.ai | xai | (nur Web) |
| opencode.ai | opencode | |
| bmw-m | bmw-m | Bindestrich beibehalten |
| x.com (Twitter) | x-twitter | (nur iOS) |
| apple-music | apple-music | (nur iOS) |
Markenindex — Web (95)
🇨🇳 Große chinesische Unternehmen (China tier) (22, NEU 2026)
ByteDance-Gruppe: feishu (飞书), douyin (抖音), doubao (豆包) Alibaba-Gruppe: aliyun (阿里云), alipay (支付宝), dingtalk (钉钉), yuque (语雀) Tencent-Gruppe: tencent-cloud (腾讯云), wechat (微信) Chinesische KI: deepseek, kimi, wenxin (文心一言), qwen (通义千问), qwencloud (Qwen Cloud · KI-native Cloud-Plattform) Elektroautos: xiaomi-ev (小米汽车), nio (蔚来), li-auto (理想), zeekr (极氪) Inhalte/Konsum: bilibili (哔哩哔哩), mihoyo (米哈游), xiaomi (小米), xiaohongshu (小红书 · Wasserfall-Explore-Feed)
Globaler Level (73)
Produktivität / SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier
Dev-Tools / IDEs: browseros (Agentischer Browser · Creme + Terrakotta + Hundemaskottchen), bun (All-in-One-JS-Toolkit · Creme-Heldenbereich + Hot-Pink #ff73a8 + Bun-Maskottchen · Docs-Oberfläche), cursor, figma, framer, opencode, raycast, sanity, vercel, warp
KI / LLM-Plattformen: claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai
Infrastruktur / Dev-Infrastruktur: composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase
Fintech / Krypto: binance, coinbase, kraken, mastercard, revolut, stripe, wise
Auto / Luxus: bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla
Konsum / Handel: airbnb, nike, pinterest, shopify, spotify, starbucks, uber
Unternehmen / Plattform: ibm, meta, nvidia, expo
Medien / Redaktion: theverge, wired
Gaming / Luftfahrt / Telekom: playstation, spacex, vodafone
Die 3 Originale (Qualitätsmaßstäbe): stripe, linear, notion
Markenindex — iOS (22)
Musik / Video: spotify-ios, apple-music-ios, youtube-ios, netflix-ios, tiktok-ios
Sozial: instagram-ios, threads-ios, x-twitter-ios, snapchat-ios
Messaging: whatsapp-ios, telegram-ios, discord-ios
KI / Produktivität: chatgpt-ios, notion-ios
Reisen: uber-ios, airbnb-ios
Dating: tinder-ios, hinge-ios
Essen / Finanzen / Lernen: starbucks-ios, doordash-ios, robinhood-ios, duolingo-ios
Marken-Archetypen (Schnellsuche, wenn keine spezifische Marke genannt wurde)
| Archetyp | Web-Beispiele | iOS-Beispiele |
|---|---|---|
| Dunkle Leinwand + Produkt-UI als Protagonist | linear, warp, cursor, sentry, hashicorp, opencode | spotify, netflix, threads, x-twitter, discord |
| Helle + Verlaufsnetz-Heldenbereich | stripe, vercel, intercom | apple-music |
| Helle + Pastellkarten / farbenfrohes Spektrum | notion, slack, airbnb, miro, clay, pinterest, xiaohongshu | instagram, snapchat, duolingo |
| Masonry / Wasserfall-Vertikalkarten-Feed | pinterest, xiaohongshu | — |
| Redaktionelles Printmagazin | wired, theverge, claude, mistral, resend, elevenlabs | — |
| Strenge Monochromie + minimaler Radius | apple, vercel, figma, bugatti, tesla, spacex | uber, threads, chatgpt |
| Dashboard-Mockup als Mittelpunkt | stripe, mongodb, supabase, posthog, hashicorp, coinbase | robinhood |
| Pillen-Button-System | stripe, slack, airbnb, spotify, mastercard, coinbase | airbnb-ios, instagram-ios |
| Rechteck-Button-System (8px oder weniger) | notion, supabase, vercel, linear, mistral, expo | whatsapp, notion, telegram |
| Luxusauto + Spezifikationstabelle | bmw, ferrari, lamborghini, bugatti, bmw-m, tesla | — |
| 3D-klobige Schatten-Buttons | — | duolingo |
| Wisch-Deck + farbcodierte Aktionen | — | tinder |
| Chat-Blase zweifarbig | — | whatsapp, telegram, discord |
Aufbau der Web-HTML-Datei
<head>
- Inline-CSS in <style> (einzelner Block, alle Design-Tokens als :root --custom-properties)
- Google Fonts CDN (Inter + markenangepasste Begleitschriftarten)
<body>
- Obere Navigation passend zur Marke
- Heldensektion (Markensignaturmuster: Netz, dunkles Band, Produkt-Mockup, usw.)
- 2-4 Feature-Abschnitte, die den Markenrhythmus widerspiegeln
- Preise oder CTA passend zur Marke
- Designsystem-Referenzabschnitt (Teil B):
- „Farbe“ gruppierte Unterblöcke
- „Typografie“-Tabelle: Token-Name (mono) + Spezifikation (mono) + Live-Beispiel
- „Radius“-Visuelle Leiter
- „Komponenten“-Matrix: Buttons + Eingabefelder + Karten + Tags/Abzeichen
- Fußzeile passend zur Marke
- Schwebender Link unten rechts „View source ↗“ zur Quelle
</body>
Aufbau der iOS-HTML-Datei
<head>
- Inline-CSS, :root-Tokens, Google Fonts
- iPhone-Rahmen-CSS (270pt × ~600pt, Dynamic Island, abgerundeter 38px Bildschirm, Seitentasten)
<body>
- Obere Navigation (Markenzeichen + iOS-Suffix)
- Heldensektion mit 3 iPhone-Rahmen:
- Linkes iPhone (gedreht -4°) — sekundärer Bildschirm
- Mittleres iPhone (skaliert 1.05) — Signaturbildschirm
- Rechtes iPhone (gedreht +4°) — tertiärer Bildschirm
Jedes iPhone zeigt: Dynamic Island + Statusleiste (9:41) + gerenderte App-Oberfläche + unteres Label
- „iOS Surface Anatomy“-Feature-Raster (3 Oberflächen)
- 3 abwechselnde iOS-spezifische Feature-Reihen (z. B. Dynamic Island Live Activity, Haptik-Matrix, Sperrbildschirm-Widget, Wischgesten, usw.)
- Designsystem-Referenzabschnitt (Teil B) — wie Web, jedoch mit iOS Spec Strip-Tabelle (Höhen, Abstände, Animationskurven, Haptik)
- Fußzeile + schwebender Link „View source ↗“ → zur Spektrums-Galerie oder zum upstream README
</body>
Qualitätsanspruch (beim Generieren neuer Seiten aus dieser Referenz)
- Die tatsächliche Signatur der Marke respektieren — keine generische Vorlage anwenden. Stripes Netz, Linears #010102 Leinwand, Notions Pastelltöne, Apples Produktkachel-Rhythmus, Spotifys Pille 9999px + Großbuchstaben-Tracking sind nicht verhandelbare Identifikatoren.
- Keine chromatischen Akzente einführen, die die Marke nicht verwendet — Linear hat nur Lavendel, NVIDIA hat nur Grün, xAI hat überhaupt keine Akzente, Threads hat keine Akzente außer dem geerbten blauen Haken + rotem Herz.
- Die Buttonform exakt nachbilden — Pille vs. Rechteck vs. scharfe Ecken ist markenprägend.
- Negativer Buchstabenabstand bei Überschriften wo die Markenspezifikation dies vorsieht (Linear -3px, Stripe -1.4px, usw.).
- Tabellenzahlen (
font-feature-settings: "tnum") wo die Marke Geldbeträge oder Zahlen anzeigt (Stripe, Coinbase, Binance, Wise, Robinhood). - iOS-Dateien: Der iPhone-Rahmen muss Dynamic Island enthalten, Statusleiste um 9:41 mit Mobilfunkbalken + Akku, korrekte Anzahl der Tab-Bar-Einträge pro Marke (z. B. Snapchat 5 Tabs mit mittlerem Kamera-Button, Instagram 5 Tabs, ChatGPT keine Tab-Bar).
- iOS-Dateien: 3D-klobige Schatten-Buttons sind bei Duolingo nicht verhandelbar (
box-shadow0 4-6px 0 dunkler). Die Chat-Blase mit abgeschnittener Ecke ist bei WhatsApp nicht verhandelbar (Ecke des Absenders = 0). - Kein Drop-Shadow-Chrome auf dunklen Leinwänden — Linear, Bugatti verwenden stattdessen Oberflächenleitern + Haarlinien.
Wann dieses Skill NICHT verwendet werden sollte
- Der Benutzer fragt nach einem generischen Layoutmuster (z. B. „zweispaltiges Dashboard“) ohne Markenbezug — verwenden Sie stattdessen allgemeines Designwissen.
- Der Benutzer hat ein eigenes Designsystem / eigene Markenrichtlinien, die diese Referenzen überschreiben sollen.
- Der Benutzer fragt nach einer Marke, die NICHT in der 118-Marken-Liste enthalten ist — sagen Sie dies explizit, anstatt zu raten.
Quellenangabe
- Web-Spezifikationen abgeleitet von VoltAgent/awesome-design-md (MIT).
- iOS-Spezifikationen abgeleitet von Meliwat/awesome-ios-design-md (Spectr Gallery für vollständige Spezifikationen).
Jedes HTML verlinkt in der unteren rechten Ecke zurück zu seiner Quelle.