别让AI乱画UI了!GitHub 15K+ Star的开源design.md,让AI一键复刻顶级设计

🤖 AI画UI，为什么总差点意思？

你有没有发现，让AI帮你写前端代码，出来的UI总是"差点意思"？配色土气、间距混乱、设计毫无质感...直到我发现了一个GitHub 15K+ Star的开源项目——awesome-design-md，只需一个.md文件，AI就能一键复刻Linear、Stripe、Notion这些顶级产品的设计！

🎨 色彩方案 — Hex色值、语义化颜色角色

🔤 字体层级 — 字号、行高、字重规范

📐 间距系统 — 网格、边距、内间距规则

🧩 组件规范 — 按钮、卡片、输入框样式

📱 响应式断点 — 适配不同屏幕尺寸

✨ 视觉哲学 — 整体设计理念和调性

🔗 官方资源

// 方式1：直接从GitHub下载

访问 GitHub 仓库，找到对应的 DESIGN.md 文件

// 方式2：使用 NPM 安装

npx create-design-md --template linear

// 方式3：使用 CLI 工具

npx awesome-design-md copy linear

// 示例Prompt

"请参考项目根目录下的 DESIGN.md 文件，按照其中的色彩分配、排版规范和组件样式要求，为我创建一个用户登录页面。"

✅ 配合Claude/Gemini等AI助手使用效果更佳！

1. Visual Identity & Atmosphere — 视觉基调与整体氛围描述

2. Color System — 完整色彩方案与语义化颜色角色

3. Typography Hierarchy — 字体层级与排版规范

4. Spacing & Layout — 间距系统与页面布局规则

5. Component Specs — 基础组件样式（按钮、卡片、输入框等）

6. Shadows & Depth — 阴影层级与深度表现

7. Border Radius — 圆角系统统一规范

8. Responsive Breakpoints — 响应式断点适配

9. Prompting Tips — 专属AI使用提示

## Color System  ### Primary Colors - **Background**: `#ffffff` (Light) / `#0a0a0a` (Dark) - **Surface**: `#f5f5f5` (Light) / `#171717` (Dark) - **Primary Brand**: `#6366f1` (Indigo-500)  ### Semantic Colors - **Success**: `#10b981` (Emerald-500) - **Warning**: `#f59e0b` (Amber-500) - **Error**: `#ef4444` (Red-500) - **Info**: `#3b82f6` (Blue-500)  ### Text Colors - **Text Primary**: `#171717` (Light) / `#fafafa` (Dark) - **Text Secondary**: `#737373` (Light) / `#a3a3a3` (Dark) - **Text Tertiary**: `#a3a3a3` (Light) / `#737373` (Dark)

📄 一份DESIGN.md，让AI秒懂你的设计

告别土味UI，拥抱像素级设计

💬 话题讨论

你最喜欢哪个设计风格？Linear的极简深色，还是Notion的温暖极简？评论区聊聊～

👇 觉得文章有用？👇

📌 转发给做AI应用开发的朋友，一起告别土味UI
🔔 关注织美，持续分享AI工具和开源项目