SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-md

design-md

设计与创作

查看项目

更新于 10-16 10:02

技能介绍

用途

DESIGN.md 是一套精选的 Markdown 文档合集，用于把真实网站的设计系统沉淀为 AI 编程代理可读的纯文本说明。它的核心目标是让代理在生成界面时保持一致的设计语言：无需 Figma 导出，也无需 JSON schema，只需一份 Markdown 文件。该格式遵循 Google Stitch 的 DESIGN.md 规范。

主要能力

每份 DESIGN.md 文件包含以下内容：

  • 视觉主题与氛围：情绪、密度、设计理念
  • 色彩调色板与角色：语义命名 + 十六进制色值 + 功能角色
  • 字体规则：字体族与完整层级
  • 组件样式：按钮、卡片、输入框、导航及其状态
  • 布局原则：间距比例、网格、留白理念
  • 深度与高度：阴影体系、表面层级
  • Do's and Don'ts：设计护栏
  • 响应式行为：断点、触控目标
  • 代理提示词指南：可直接使用的提示词

使用方式

当用户想要应用某个设计系统时：

  1. 询问想要匹配的品牌或风格（也可根据上下文建议，例如打磨精致的 SaaS 用 Stripe，开发工具用 Linear，极简高级感用 Apple）
  2. 从 https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/{site}/ 下载对应的 DESIGN.md
  3. 将其放入项目根目录
  4. 传给编程代理：「Build the UI following this DESIGN.md」

整体流程为：从下方目录挑选设计系统 → 下载 DESIGN.md 放入项目根目录 → 告诉 AI 代理「Use this DESIGN.md to build the UI」→ 代理读取并生成匹配的样式、组件与布局。

设计系统目录

开发者工具与 AI

  • Cursor：AI 代码编辑器。暗色、极简、面向开发者
  • Claude：AI 助手。干净、温暖、对话式
  • Cohere：企业级 AI。大胆、现代、数据驱动
  • Mistral AI：开放 AI 模型。技术感、干净、欧洲风格
  • MiniMax：AI 平台。未来感、大胆渐变
  • x.ai：Grok/AI。极简、暗色、优雅
  • Together AI：AI 基础设施。技术感、干净
  • OpenCode：开源 AI 编程。开发者优先、终端灵感
  • Lovable：AI 应用构建器。友好、多彩、亲切
  • Replicate：AI 模型托管。暗色、技术感、聚焦模型
  • Ollama：本地 LLM。极简、终端美学
  • ElevenLabs：AI 语音。精致、现代、温暖
  • Runway：AI 创意工具。大胆、电影感、暗色
  • Expo：React Native 框架。干净、开发者友好
  • Warp：AI 终端。暗色、技术感、聚焦命令
  • VoltaAgent：代理框架。开发者优先、暗色

基础设施与平台

  • Vercel：前端云。极简、单色、快速
  • Supabase：开源 Firebase。绿色点缀、干净
  • HashiCorp：基础设施工具。紫色、企业级、结构化
  • MongoDB：数据库平台。绿色、聚焦数据
  • ClickHouse：分析数据库。大胆、技术感、聚焦性能
  • Sentry：错误追踪。红色点缀、面向开发者
  • PostHog：产品分析。开源、俏皮
  • Composio：代理集成。现代、开发者友好
  • Raycast：效率启动器。暗色、快速、macOS 原生感

设计与创意

  • Figma：设计工具。多彩、创意、协作
  • Framer：网页设计工具。大胆、现代、动画丰富
  • Sanity：无头 CMS。俏皮、多彩、聚焦内容
  • Webflow：无代码构建器。专业、精致
  • Mintlify：文档平台。干净、薄荷绿、面向开发者
  • Notion：工作空间。极简、单色、内容优先
  • Miro：白板。多彩、协作、俏皮
  • Airtable：数据库电子表格。干净、结构化、亲切

金融与商业

  • Stripe：支付。渐变丰富、精致、行业标准
  • Coinbase：加密货币交易所。蓝色、可信、干净
  • Kraken：加密货币交易所。暗色、技术感、聚焦交易
  • Revolut：数字银行。大胆、现代、鲜明
  • Wise：转账。干净、绿色、可信

生产力与沟通

  • Linear：议题追踪。暗色、快速、极简——开发工具的黄金标准
  • Cal.com：日程安排。干净、友好、无障碍
  • Intercom：客户消息。蓝色、对话式、友好
  • Superhuman：邮件客户端。高端、快速、键盘优先
  • Zapier：自动化。橙色、亲切、聚焦工作流
  • Clay：CRM。干净、现代、聚焦关系

企业与工业

  • Apple：消费科技。极致极简、高级、留白充足
  • IBM：企业科技。结构化、无障碍、Carbon Design System
  • NVIDIA：GPU/AI。绿黑、强大、技术感
  • SpaceX：航空航天。暗色、电影感、聚焦使命
  • BMW：汽车。高级、暗色、奢华

消费与生活方式

  • Spotify：音乐流媒体。暗色、鲜明、媒体丰富
  • Pinterest：视觉发现。瀑布流网格、红色点缀、图片优先
  • Airbnb：旅行/酒店。温暖、珊瑚色点缀、卡片式
  • Uber：出行。大胆黑白、紧凑字体、都市能量
  • Resend：邮件 API。干净、面向开发者、极简

技能选择指南

  • 将设计系统应用到项目：从站点的文件夹下载 DESIGN.md 和 preview.html，放入项目根目录
  • 构建匹配某品牌风格的 UI：告诉编程代理「Use this DESIGN.md as the design system」
  • 比较设计系统：阅读多份 DESIGN.md 文件，比较调色板、字体、组件模式
  • 请求新的设计系统：在 awesome-design-md 仓库提交 issue

资源

  • Google Stitch DESIGN.md Overview
  • DESIGN.md Format Spec
  • awesome-design-md GitHub
  • Request a DESIGN.md

限制

资料未提供 DESIGN.md 文件的许可证、收费方式、价格、具体生效效果或代理兼容性等信息，暂未提供。