这个页面把 awesome-design-md/design-md 目录中实际存在的 71 个 DESIGN.md 做成一组选择卡片。它不是完整复刻每个品牌,而是给出快速判断:这个风格大概长什么样、适合哪类项目、主色倾向是什么。
使用方式很简单:先按项目类型找到一组候选,再看卡片里的视觉预览和适用场景,最后打开对应的 DESIGN.md 复制到项目里。
快速选择#
AI / LLM 平台#
AI / LLM 平台claude
Claude
编辑感较强,适合媒体、长文、品牌故事和策展型页面。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台cohere
Cohere
渐变和高饱和色更明显,适合发布页、AI 产品和视觉冲击型页面。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台elevenlabs
Elevenlabs
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台minimax
Minimax
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台mistral.ai
Mistral AI
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台ollama
Ollama
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台opencode.ai
OpenCode AI
深色技术界面,强调代码、状态和控制台质感。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台replicate
Replicate
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台runwayml
Runway
阅读友好的文档风格,适合知识库、开发文档和说明页面。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台together.ai
Together AI
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台voltagent
VoltAgent
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
AI / LLM 平台x.ai
xAI
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
开发者工具 / IDE#
开发者工具 / IDEcursor
Cursor
渐变和高饱和色更明显,适合发布页、AI 产品和视觉冲击型页面。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
开发者工具 / IDEexpo
Expo
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
开发者工具 / IDElovable
Lovable
渐变和高饱和色更明显,适合发布页、AI 产品和视觉冲击型页面。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
开发者工具 / IDEraycast
Raycast
渐变和高饱和色更明显,适合发布页、AI 产品和视觉冲击型页面。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
开发者工具 / IDEsuperhuman
Superhuman
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
开发者工具 / IDEvercel
Vercel
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合需要快速确定视觉语气的产品页、组件库和 AI 生成界面。
查看 DESIGN.md
开发者工具 / IDEwarp
Warp
深色技术界面,强调代码、状态和控制台质感。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
后端 / 数据库 / DevOps#
后端 / 数据库 / DevOpsclickhouse
ClickHouse
阅读友好的文档风格,适合知识库、开发文档和说明页面。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
后端 / 数据库 / DevOpscomposio
Composio
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
后端 / 数据库 / DevOpshashicorp
Hashicorp
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
后端 / 数据库 / DevOpsmongodb
MongoDB
绿色作为强识别色,适合增长、数据、基础设施或音乐类体验。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
后端 / 数据库 / DevOpsposthog
Posthog
深色技术界面,强调代码、状态和控制台质感。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
后端 / 数据库 / DevOpssanity
Sanity
编辑感较强,适合媒体、长文、品牌故事和策展型页面。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
后端 / 数据库 / DevOpssentry
Sentry
深色技术界面,强调代码、状态和控制台质感。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
后端 / 数据库 / DevOpssupabase
Supabase
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
效率 / SaaS#
效率 / SaaScal
Cal.com
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
效率 / SaaSintercom
Intercom
友好、轻松、亲近,适合协作工具和面向大众的产品。
适合协作工具、SaaS 工作台、团队效率产品。
查看 DESIGN.md
效率 / SaaSlinear.app
Linear
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合需要快速确定视觉语气的产品页、组件库和 AI 生成界面。
查看 DESIGN.md
效率 / SaaSmintlify
Mintlify
绿色作为强识别色,适合增长、数据、基础设施或音乐类体验。
适合需要快速确定视觉语气的产品页、组件库和 AI 生成界面。
查看 DESIGN.md
效率 / SaaSnotion
Notion
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
效率 / SaaSresend
Resend
深色技术界面,强调代码、状态和控制台质感。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
效率 / SaaSzapier
Zapier
友好、轻松、亲近,适合协作工具和面向大众的产品。
适合协作工具、SaaS 工作台、团队效率产品。
查看 DESIGN.md
设计 / 创意工具#
设计 / 创意工具airtable
Airtable
友好、轻松、亲近,适合协作工具和面向大众的产品。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
设计 / 创意工具clay
Clay
渐变和高饱和色更明显,适合发布页、AI 产品和视觉冲击型页面。
适合设计工具、作品集、创意编辑器和视觉协作产品。
查看 DESIGN.md
设计 / 创意工具figma
Figma
友好、轻松、亲近,适合协作工具和面向大众的产品。
适合设计工具、作品集、创意编辑器和视觉协作产品。
查看 DESIGN.md
设计 / 创意工具framer
Framer
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合设计工具、作品集、创意编辑器和视觉协作产品。
查看 DESIGN.md
设计 / 创意工具miro
Miro
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合设计工具、作品集、创意编辑器和视觉协作产品。
查看 DESIGN.md
设计 / 创意工具webflow
Webflow
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合设计工具、作品集、创意编辑器和视觉协作产品。
查看 DESIGN.md
金融科技 / 加密#
金融科技 / 加密binance
Binance
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合金融、支付、交易、钱包和可信赖的账户体验。
查看 DESIGN.md
金融科技 / 加密coinbase
Coinbase
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合金融、支付、交易、钱包和可信赖的账户体验。
查看 DESIGN.md
金融科技 / 加密kraken
Kraken
深色技术界面,强调代码、状态和控制台质感。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
金融科技 / 加密mastercard
Mastercard
编辑感较强,适合媒体、长文、品牌故事和策展型页面。
适合金融、支付、交易、钱包和可信赖的账户体验。
查看 DESIGN.md
金融科技 / 加密revolut
Revolut
渐变和高饱和色更明显,适合发布页、AI 产品和视觉冲击型页面。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
金融科技 / 加密stripe
Stripe
渐变和高饱和色更明显,适合发布页、AI 产品和视觉冲击型页面。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
金融科技 / 加密wise
Wise
绿色作为强识别色,适合增长、数据、基础设施或音乐类体验。
适合协作工具、SaaS 工作台、团队效率产品。
查看 DESIGN.md
电商 / 零售#
电商 / 零售airbnb
Airbnb
图片和大面积视觉资产优先,适合品牌官网和产品展示。
适合品牌零售、生活方式、电商和消费类落地页。
查看 DESIGN.md
电商 / 零售meta
Meta
图片和大面积视觉资产优先,适合品牌官网和产品展示。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
电商 / 零售nike
Nike
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
电商 / 零售shopify
Shopify
绿色作为强识别色,适合增长、数据、基础设施或音乐类体验。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
电商 / 零售starbucks
Starbucks
绿色作为强识别色,适合增长、数据、基础设施或音乐类体验。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
媒体 / 消费科技#
媒体 / 消费科技apple
Apple
图片和大面积视觉资产优先,适合品牌官网和产品展示。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
媒体 / 消费科技ibm
Ibm
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合设计工具、作品集、创意编辑器和视觉协作产品。
查看 DESIGN.md
媒体 / 消费科技nvidia
Nvidia
绿色作为强识别色,适合增长、数据、基础设施或音乐类体验。
适合需要快速确定视觉语气的产品页、组件库和 AI 生成界面。
查看 DESIGN.md
媒体 / 消费科技pinterest
Pinterest
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合设计工具、作品集、创意编辑器和视觉协作产品。
查看 DESIGN.md
媒体 / 消费科技playstation
Playstation
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合开发者产品、技术文档、控制台、API 平台。
查看 DESIGN.md
媒体 / 消费科技spacex
Spacex
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
媒体 / 消费科技spotify
Spotify
绿色作为强识别色,适合增长、数据、基础设施或音乐类体验。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
媒体 / 消费科技theverge
The Verge
编辑感较强,适合媒体、长文、品牌故事和策展型页面。
适合需要快速确定视觉语气的产品页、组件库和 AI 生成界面。
查看 DESIGN.md
媒体 / 消费科技uber
Uber
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合需要快速确定视觉语气的产品页、组件库和 AI 生成界面。
查看 DESIGN.md
媒体 / 消费科技vodafone
Vodafone
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合需要快速确定视觉语气的产品页、组件库和 AI 生成界面。
查看 DESIGN.md
媒体 / 消费科技wired
WIRED
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合需要快速确定视觉语气的产品页、组件库和 AI 生成界面。
查看 DESIGN.md
汽车 / 性能品牌#
汽车 / 性能品牌bmw
Bmw
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
汽车 / 性能品牌bmw-m
BMW M
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
汽车 / 性能品牌bugatti
Bugatti
黑白克制风格,适合强调秩序、速度和品牌高级感。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
汽车 / 性能品牌ferrari
Ferrari
编辑感较强,适合媒体、长文、品牌故事和策展型页面。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
汽车 / 性能品牌lamborghini
Lamborghini
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
汽车 / 性能品牌renault
Renault
渐变和高饱和色更明显,适合发布页、AI 产品和视觉冲击型页面。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
汽车 / 性能品牌tesla
Tesla
图片和大面积视觉资产优先,适合品牌官网和产品展示。
适合沉浸式官网、产品发布页、影像驱动的高冲击页面。
查看 DESIGN.md
Other#
其他slack
Slack
品牌特征清晰,适合作为生成页面前的视觉方向参考。
适合协作工具、SaaS 工作台、团队效率产品。
查看 DESIGN.md
选择建议#
- 技术产品、API、控制台:优先看
Vercel、Supabase、Resend、ClickHouse、VoltAgent、Ollama。
- AI 产品首页:优先看
Claude、Runway、Cohere、Mistral AI、Together AI、ElevenLabs。
- 金融与可信赖产品:优先看
Stripe、Wise、Coinbase、Mastercard、Revolut。
- 品牌官网和视觉冲击页:优先看
Apple、Nike、SpaceX、Ferrari、Bugatti、Lamborghini。
- 协作工具和 SaaS:优先看
Linear、Notion、Intercom、Airtable、Miro、Cal.com。
这篇文章只做选择辅助。真正生成页面时,建议把目标风格的 DESIGN.md 放到项目根目录,再明确告诉 AI:页面类型、目标用户、必须保留的组件、不能使用的视觉手法。