mcpField
A
awesome-design

awesome-design

github.com/eaglefandel设计与 UI365 次安装27 周前更新
代码仓库

关于 awesome-design

收录 55 多套采用 Google Stitch 的 DESIGN.md 格式的网站设计系统，并提供预览和提示词编辑器。设计师和编码 Agent 可借此选择视觉方向，并将设计规范用于项目界面。

主要功能

  1. 01浏览 55 多套网站设计系统
  2. 02比较浅色与深色预览
  3. 03为编码 Agent 编写提示词
  4. 04将 `DESIGN.md` 复制到项目
  5. 05查看颜色、字体、组件和布局规范

适用场景

  1. 01实施前比较不同视觉方向
  2. 02为编码 Agent 提供设计系统指导
  3. 03复用网站记录的界面规则

安装

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

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

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
.gitignore
CONTRIBUTING.md
LICENSE
.github/
FUNDING.yml
.github/ISSUE_TEMPLATE/
design-md-request.yml
agents/
openai.yaml
design-md/airbnb/
DESIGN.md
preview-dark.html
preview.html
README.md
design-md/airtable/
README.md
preview.html
DESIGN.md
preview-dark.html
design-md/apple/
DESIGN.md
preview.html
README.md
preview-dark.html
design-md/bmw/
DESIGN.md
README.md
preview.html
preview-dark.html
design-md/cal/
README.md
design-md/claude/
DESIGN.md
README.md
preview-dark.html
preview.html
design-md/clay/
DESIGN.md
README.md

详细介绍

优秀的 DESIGN.md

精选了 55+ 个从真实网站提取的 DESIGN.md 文件，基于 Google 的 Stitch DESIGN.md 格式。

可用的设计系统

AI 与机器学习
网站风格
Claude温暖的陶土色、编辑式布局
Cohere鲜艳渐变、数据丰富的仪表盘
ElevenLabs暗色电影感、音频波形美学
Minimax大胆的暗色、霓虹点缀
Mistral AI法式极简主义、紫色调
Ollama终端优先、单色
xAI鲜明的单色、未来感
开发者工具与平台
网站风格
CursorAI 优先的代码编辑器、渐变点缀
Linear极简精准、紫色点缀
Vercel黑白精准风格、Geist 字体
Raycast流畅的暗色风格、鲜艳渐变
Supabase深翡翠色、代码优先
Expo暗色主题、以代码为中心
Mintlify清新绿色、针对阅读优化
PostHog俏皮的刺猬、对开发者友好的暗色风格
设计与效率
网站风格
Figma鲜艳的多色风格、俏皮而专业
Notion温暖的极简主义、衬线标题
Framer大胆的黑色与蓝色、动效优先
Miro明亮的黄色、无限画布
Webflow蓝色点缀、精致的营销风格
金融科技与加密货币
网站风格
Coinbase清爽的蓝色、以信任为核心
Revolut流畅的暗色风格、渐变卡片
Wise明亮的绿色、友好清晰
企业与消费
网站风格
Airbnb温暖的珊瑚色、以摄影为主
Apple高级留白、SF Pro
Spotify深色背景上的鲜艳绿色
NVIDIA绿黑色调、充满科技感

使用方法

1. 先打开预览库

当用户需要在选择前比较风格时，构建本地视觉目录：

python scripts/build_preview_library.py --open

这会生成 preview-library/index.html，汇总整个集合中现有的 preview.html 和 preview-dark.html 文件。

2. 直观比较设计

使用预览库来：

  • 浏览每个网站的整体风格
  • 比较浅色和深色预览
  • 只有在视觉方向明确后，才打开对应的 DESIGN.md
3. 使用内置的提示词编辑器

选好卡片后，点击预览库中的 Use This Design。

本地预览库现在包含一个选择工作室，可以：

  • 将选中的设计锁定到编辑器面板中
  • 显示确切的本地 DESIGN.md 路径
  • 为 Codex、Claude Code 或通用编码 Agent 生成可直接发送的提示词
  • 将设计选择、任务类型、界面和产品简介集中在一起
4. 复制设计文件

将所需的 DESIGN.md 文件复制到用户的项目根目录：

design-md/{site-name}/DESIGN.md
5. 应用设计

使用预览库生成的提示词，或告知用户指示其 AI Agent：

“使用项目中的 DESIGN.md，构建符合此设计系统的 UI。”

预览资源

每个网站文件夹都已包含：

  • DESIGN.md
  • preview.html
  • preview-dark.html

预览库是顶层选择器和提示词生成器，可让这些资源大规模发挥作用。

设计系统内容

每个 DESIGN.md 包含：

  1. 视觉主题与氛围 - 情绪、密度、理念
  2. 配色方案与用途 - 语义名称 + 十六进制值 + 功能用途
  3. 排版规则 - 字体系列、层级表
  4. 组件样式 - 按钮、卡片、输入框、导航
  5. 布局原则 - 间距比例、网格、留白
  6. 深度与层级 - 阴影系统、表面层级
  7. 注意事项 - 设计规范
  8. 响应式行为 - 断点、触控目标
  9. Agent 提示词指南 - 可直接使用的提示词

位置

所有设计文件都存储在：

design-md/{site-name}/DESIGN.md

评论

支持 Markdown