awesome-design-html

Name: awesome-design-html
Author: yzfly

github.com/yzfly设计与 UI165183 次安装20 周前更新

代码仓库

关于 awesome-design-html

为 Claude Code 提供的品牌网页与 iOS 界面设计参考技能，适用于需要按指定品牌风格制作页面或移动界面的人。它包含自包含 HTML 示例，可供提取设计令牌并据此调整界面。

主要功能

01提供网页与 iOS 界面 HTML 示例
02按品牌和平台匹配参考页面
03包含颜色、字体与组件设计令牌
04涵盖中国传统色搜索及复制色卡
05提供品牌索引与风格 archetype 参考

适用场景

01制作特定品牌风格的落地页
02设计 iPhone 应用界面模型
03查找并复制中国传统色值
04依据品牌规范调整颜色与组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yzfly/awesome-design-html --skill awesome-design-html

安装后在 Claude Code 中输入/awesome-design-html确认已加载。

详细介绍

精选设计 HTML

一个包含 118 个单文件 HTML 页面的参考库，分为：

assets/web/design.zhongguo-colors.html — 🎨 中国传统色 Chinese Traditional Colors：一个包含 742 种色调的色卡页面，源自 nevertoday/zhongguo-traditional-colors。色调按色系自动分组（红/橙/黄/绿/青/蓝/紫/白/灰褐/黑），可按名称或 HEX 搜索，也可点击复制。用户需要中国传统配色 / 中式配色 / 色卡时使用。此页面在图库中置顶展示。
assets/web/ — 96 个营销页面演示（含 22 个中国大厂品牌）。包含 Hero、功能、定价和设计系统参考。用户需要某个品牌风格的网站 / 落地页 / 产品页时使用。
assets/ios/ — 22 个 iOS 应用模型图。在 Hero 区展示三个 iPhone 机框，呈现真实应用的首页 / 详情 / 个人资料页面，并附带设计系统参考。用户需要移动应用 UI 模型图，或想遵循品牌的原生 iOS 界面（正在播放、滑动卡片组、聊天气泡、课程路径……）时使用。

每个文件都可独立使用：在 :root token 区块中内联 CSS、使用 Google Fonts CDN、忠实呈现品牌的颜色 / 字体排印 / 圆角 / 组件，并提供指向底层设计规范的“查看源码 ↗”链接。

如何使用此技能

当用户提及品牌名称，以及设计 / 风格 / 页面 / UI / Hero / 定价 / 屏幕 / iPhone / 应用时：

匹配品牌和平台：
- 需要网页 / 落地页 / 营销页面 → 查看 assets/web/
- 需要 iOS 应用模型图 / iPhone 屏幕 / 移动 UI → 查看 assets/ios/
- 有些品牌同时提供两种版本（Spotify、Notion、Airbnb 等）——选择符合用户意图的版本。
读取对应的 HTML 文件：assets/web/design.<slug>.html 或 assets/ios/design.<slug>-ios.html。
根据用户需求进行调整——提取设计 token（颜色、字体排印、圆角、按钮形状、Hero 类型）并应用。不要把多个品牌同质化成一种通用风格。

文件命名

Web 版本：assets/web/design.<slug>.html
iOS 版本：assets/ios/design.<slug>-ios.html

部分 slug 已标准化：

品牌	Slug	备注
linear.app	`linear`
mistral.ai	`mistral`
together.ai	`together`
x.ai	`xai`	（仅 Web）
opencode.ai	`opencode`
bmw-m	`bmw-m`	保留连字符
x.com (Twitter)	`x-twitter`	（仅 iOS）
apple-music	`apple-music`	（仅 iOS）

品牌索引 — Web（95）

🇨🇳 中国大厂（22，2026 新增）

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

全球品牌（73）

效率 / SaaS：airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier

开发工具 / IDE：browseros（Agent 化浏览器 · 奶油色 + 赤陶色 + 小狗吉祥物）, bun（一体化 JS 工具包 · 奶油色传统风格 Hero + 亮粉色 #ff73a8 + bun 吉祥物 · 文档界面）, cursor, figma, framer, opencode, raycast, sanity, vercel, warp

AI / 大模型平台：claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai

基础设施 / 开发基础设施：composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase

金融科技 / 加密货币：binance, coinbase, kraken, mastercard, revolut, stripe, wise

汽车 / 奢侈品：bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla

消费 / 电商：airbnb, nike, pinterest, shopify, spotify, starbucks, uber

企业 / 平台：ibm, meta, nvidia, expo

媒体 / 编辑出版：theverge, wired

游戏 / 航天 / 电信：playstation, spacex, vodafone

三个原创范例（质量基准）：stripe, linear, notion

品牌索引 — iOS（22）

音乐 / 视频：spotify-ios、apple-music-ios、youtube-ios、netflix-ios、tiktok-ios

社交：instagram-ios、threads-ios、x-twitter-ios、snapchat-ios

消息：whatsapp-ios、telegram-ios、discord-ios

AI / 效率：chatgpt-ios、notion-ios

旅行：uber-ios、airbnb-ios

约会：tinder-ios、hinge-ios

美食 / 金融 / 学习：starbucks-ios、doordash-ios、robinhood-ios、duolingo-ios

品牌原型（未指定具体品牌时快速查阅）

原型	Web 示例	iOS 示例
深色画布 + 产品 UI 为主角	linear、warp、cursor、sentry、hashicorp、opencode	spotify、netflix、threads、x-twitter、discord
浅色 + 渐变网格主视觉	stripe、vercel、intercom	apple-music
浅色 + 柔和色彩卡片 / 多彩光谱	notion、slack、airbnb、miro、clay、pinterest、xiaohongshu	instagram、snapchat、duolingo
瀑布流纵向卡片信息流	pinterest、xiaohongshu	—
编辑部印刷杂志风格	wired、theverge、claude、mistral、resend、elevenlabs	—
鲜明的单色风格 + 最小圆角	apple、vercel、figma、bugatti、tesla、spacex	uber、threads、chatgpt
以仪表板模型图为中心	stripe、mongodb、supabase、posthog、hashicorp、coinbase	robinhood
胶囊形按钮系统	stripe、slack、airbnb、spotify、mastercard、coinbase	airbnb-ios、instagram-ios
矩形按钮系统（圆角不超过 8px）	notion、supabase、vercel、linear、mistral、expo	whatsapp、notion、telegram
豪华汽车 + 规格表	bmw、ferrari、lamborghini、bugatti、bmw-m、tesla	—
厚重的 3D 阴影按钮	—	duolingo
滑动卡片组 + 颜色编码操作	—	tinder
双色聊天气泡	—	whatsapp、telegram、discord

Web HTML 文件结构

<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 文件结构

<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>

质量标准（根据此参考生成新页面时）

遵循品牌的真实标志性特征——不要套用通用模板。Stripe 的渐变网格、Linear 的 #010102 画布、Notion 的柔和色调、Apple 产品卡片的节奏，以及 Spotify 的 9999px 胶囊形状 + 大写字母间距，都是不可妥协的标识。
不要引入品牌未使用的彩色点缀——Linear 只有薰衣草紫，NVIDIA 只有绿色，xAI 完全没有点缀色，Threads 除了继承的蓝色认证标记和红心之外没有任何点缀色。
精确匹配按钮形状——胶囊形、矩形或直角都是品牌识别的重要特征。
品牌规范要求时，显示文字需使用负字间距（Linear 为 -3px，Stripe 为 -1.4px 等）。
品牌展示金额或数字时使用等宽数字（font-feature-settings: "tnum"）（Stripe、Coinbase、Binance、Wise、Robinhood）。
iOS 文件：iPhone 边框必须包含灵动岛、显示时间为 9:41 且带有蜂窝信号格和电池图标的状态栏，以及符合品牌的标签栏数量（例如，Snapchat 有 5 个标签和居中的相机按钮，Instagram 有 5 个标签，ChatGPT 没有标签栏）。
iOS 文件：Duolingo 必须使用厚重的 3D 阴影按钮（box-shadow 0 4-6px 0 darker）。WhatsApp 必须使用切角聊天气泡（发送方一侧的圆角 = 0）。
深色画布品牌不得使用投影装饰——Linear、Bugatti 使用表面层级和细分隔线取代投影。

不适合使用此技能的情况

用户询问的是通用布局模式（例如“双色仪表板”），且未提及品牌——请改用通用设计判断。
用户有自己的设计系统 / 品牌指南，应优先遵循这些规范。
用户询问的品牌不在 116 个品牌列表中——请明确说明，而不是猜测。

来源说明

Web 规范源自 VoltAgent/awesome-design-md（MIT）。
iOS 规范源自 Meliwat/awesome-ios-design-md（完整规范见 Spectr gallery）。

每个 HTML 的右下角都链接回其来源。

支持 Markdown

登录后评论