这个页面把 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、控制台:优先看 VercelSupabaseResendClickHouseVoltAgentOllama
  • AI 产品首页:优先看 ClaudeRunwayCohereMistral AITogether AIElevenLabs
  • 金融与可信赖产品:优先看 StripeWiseCoinbaseMastercardRevolut
  • 品牌官网和视觉冲击页:优先看 AppleNikeSpaceXFerrariBugattiLamborghini
  • 协作工具和 SaaS:优先看 LinearNotionIntercomAirtableMiroCal.com

这篇文章只做选择辅助。真正生成页面时,建议把目标风格的 DESIGN.md 放到项目根目录,再明确告诉 AI:页面类型、目标用户、必须保留的组件、不能使用的视觉手法。