awesome-design-md

Awesome Design MD

目的

将捆绑的 Awesome Design MD 库用作可选的 UI 设计参考集合。不要假设所有界面都采用同一种全局风格。选择最适合产品的风格，然后在更改 UI 前阅读该风格的 DESIGN.md。

所有库路径都相对于此技能文件夹解析，也就是包含此 SKILL.md 的目录。

捆绑库：

<skill-root>/design-md

风格索引：

<skill-root>/STYLE_INDEX.txt

风格文件路径格式：

<skill-root>/design-md/<style>/DESIGN.md

可选的选择说明：

<skill-root>/references/style-selection.md

工作流

1. 如果用户指定了风格，且该风格存在，就使用该风格。
2. 如果用户未指定风格，就检查产品背景并选择 1 种风格。开始编辑前，简要说明所选风格。
3. 如果需要查看可用风格，请阅读 STYLE_INDEX.txt。
4. 只阅读选定的 design-md/<style>/DESIGN.md；不要加载整个库。
5. 将该风格作为布局、颜色、排版、间距、交互体验和组件视觉样式的指导。
6. 保留现有的产品约束、数据密度、无障碍要求和框架约定。
7. 对于现有应用，在不破坏既有流程的前提下逐步优化 UI，除非用户明确要求重新设计。

默认风格映射

• 开发者工具、AI Agent 控制台、自动化面板：voltagent、cursor、warp、linear.app、raycast。
• SaaS 仪表板、任务或项目管理、管理控制台：linear.app、stripe、vercel、posthog、supabase。
• 面向消费者、类似移动应用的精致产品：apple、airbnb、spotify、pinterest、notion。
• 加密货币、Web3、交易平台、金融：coinbase、binance、kraken、revolut、wise。
• AI 实验室、模型或产品页面：x.ai、mistral.ai、cohere、together.ai、runwayml、replicate。
• 文档、开发者门户：mintlify、vercel、stripe、supabase、hashicorp。
• 奢侈品、汽车、品牌主导的落地页：bugatti、ferrari、lamborghini、bmw、tesla、nike。

如果有多种风格都适用，就选择最能改善特定屏幕的风格，而不是最炫的风格。

规则

• 不要在所有地方都盲目套用 voltagent。
• 除非用户要求，否则不要将 DESIGN.md 导入目标项目；阅读捆绑库中的文件即可。
• 不要在最终答复中复制大段设计文本。
• 不要覆盖项目级的 DESIGN.md；如果存在，应将其视为本地路由说明，然后再阅读选定的捆绑风格。
• 避免使用通用的 AI UI 默认样式。采用所选风格的具体设计令牌和组件惯例。
• 对于有特定文件编码要求的项目，请遵循项目本地说明。

快速命令

从技能根目录列出可用风格：

Get-Content -LiteralPath '.\STYLE_INDEX.txt'

从技能根目录读取一种风格：

Get-Content -Raw -Encoding UTF8 -LiteralPath '.\design-md\linear.app\DESIGN.md'