MyDesignMD

MyDesignMD 快速入门

丢一个网址进去，7个AI Agent并行工作，3分钟拿到一套完整的设计系统——DESIGN.md、token映射、CSS变量、Tailwind配置、审计报告，直接丢给Cursor/Claude Code就能用。

这是什么？适合谁？

MyDesignMD 是一款 AI 驱动设计系统提取工具——粘贴一个公开网站 URL，它自动抓取页面截图和 CSS 证据，然后交由 7 个专家 Agent 并行分析，最终输出一套可直接喂给 AI 编程助手（Claude Code、Cursor、Copilot）的设计系统文件。核心思路是：让 AI Agent 不再”靠猜”做 UI，而是基于真实品牌的设计语言来生成界面。

2026 年发布以来，MyDesignMD 迅速成为 DESIGN.md 生态中最受关注的提取器之一。与竞品最大的差异在于”证据先行”方法论：先采集截图和 CSS 作为 ground truth，再交给 Agent 分析，每个 Agent 必须为每一项声明标注证据来源——这让输出的精确度远超单次 LLM 猜测型工具。

适合谁？

• AI 编程助手重度用户：在项目根目录放一个 DESIGN.md，Cursor/Claude Code 每次生成 UI 都会基于你的品牌设计而非通用模板
• 前端团队/Agency：新客户项目启动前，一行命令提取对方现有设计系统，统一交付标准
• 设计系统负责人：快速反求现有产品的 design token，加速设计系统文档化
• 独立开发者：想克隆某个品牌的视觉风格做个人项目，手动提取太慢，需要自动化方案

不适合谁？

• 需要 Figma 原生导出的场景（MyDesignMD 输出 token 文件但非 Figma 原生格式，对比 design-extractor.com 更适配 Figma 工作流）
• 提取内网/需登录的页面（V2 宣称支持 bot-protected 站点，但登录态页面仍需手动处理）
• 要求 100% 离线或开源的场景（MyDesignMD 是闭源 SaaS，开源替代可选 designlang 或 dembrandt）

准备工作

• 设备要求：任意现代浏览器（Web 端），CLI/SDK 需 Node.js 18+ 或 Python 3.9+
• 账号要求：免费试用无需注册，无需信用卡；批量使用需注册账号
• 付费要求：免费层可体验基础提取；高频使用需升级（定价见下方）
• 网络要求：目标网站需可公开访问；V2 版本声称支持部分 bot-protected 站点

3 步快速上手

第 1 步：打开官网

浏览器访问 https://www.mydesignmd.com，你会看到一个简洁的输入框。

• 来源：MyDesignMD 官网首页 — 页面访问核验

第 2 步：粘贴目标 URL

在输入框粘贴你想提取设计系统的网站 URL（例如 stripe.com、anthropic.com、sweetgreen.com），点击”Generate DESIGN.md”按钮。系统会自动抓取页面截图和 CSS，然后启动 7 个 Agent 并行分析。

• 来源：MyDesignMD 官网首页 — 页面访问核验（2026-07-06）

第 3 步：获取设计系统文件包

等待约 3 分钟，拿到一个包含 8 个文件的完整设计系统包：

• DESIGN.md：人类可读的设计规范，含色彩、排版、间距、组件规则

• design.json / design-tokens.json：结构化 token 数据，可接入构建管线

• css-variables.css：可直接使用的 CSS 变量文件

• tailwind-v4.css：Tailwind v4 配置文件

• audit.md：设计审计报告，标记源站设计中的不一致/低对比度问题

• SKILL.md：打包为 AI Skill 格式，供 Claude Code/Cursor 读入上下文

• grounding.json：证据追踪文件，每个 token 可追溯到截图或 CSS 规则

  • 来源：MakerStack MyDesignMD Review — 页面访问核验（2026-07-06），评价为 “the most thorough generator we tested”

将 DESIGN.md 或 SKILL.md 放入项目根目录，下次用 Cursor 或 Claude Code 生成 UI 时，Agent 会自动参考这份设计系统。

核心功能详解

1. 七专家 Agent 并行架构

MyDesignMD 的核心引擎由 7 个专业化 Agent 组成，而非单一模型一次性输出：

每个 Agent 必须为其每条声明提供证据引用（截图坐标或 CSS 规则），Agent 之间不互信——这意味着色彩 Agent 不能直接采信排版 Agent 的输出，必须独立从证据中验证。

• 来源：MakerStack MyDesignMD Review — 页面访问核验（2026-07-06）
• 来源：MyDesignMD 官网”Agents write, evidence decides” — 页面访问核验（2026-07-06）

2. 八种输出格式

单次执行产出 8 个文件，覆盖从人类阅读到机器消费的全链路。MakerStack 评价”大多数免费竞品只输出 Markdown 文件，最多加一个 token 导出，这个广度是真正的差异化优势”。

• 来源：MakerStack MyDesignMD Review — 页面访问核验（2026-07-06）

3. 五种接入方式

• Web UI：浏览器输入 URL 直接生成，适合一次性手动提取

• CLI：npx mydesignmd extract https://example.com，适合脚本化和 CI 集成

• REST API：程序化调用，适合自建应用嵌入

• SDK：Node.js / Python SDK，适合开发者深度集成

• Skill 包：生成的 SKILL.md 可直接作为 Claude Code Skill 导入

  • 来源：MakerStack MyDesignMD Review — “It exposes a REST API, a CLI you can install, and an SDK”
  • 来源：MyDesignMD 官网 — 页面访问核验（2026-07-06），首页展示 “Works with Claude Code, Cursor & Copilot”

4. 审计报告与证据追溯

audit.md 标记源站设计中的潜在问题（间距不一致、低对比度文字等），避免”复制别人的设计系统时连同错误一起复制”。grounding.json 记录每个 token 的证据链路，使输出可审计而非黑盒。

• 来源：MakerStack MyDesignMD Review — “handy when you are cloning a site and do not want to copy its mistakes”

定价

⚠️ MyDesignMD 的定价是其主要短板——不完全透明。 官网没有公开定价页（页面核验 尝试 /pricing 路径被重定向回首页），MakerStack 评价”hidden pricing is the only real frustration”。

• 来源：MakerStack MyDesignMD Review — “Price: Free to try, custom beyond that”
• 来源：MyDesignMD 官网 — 页面访问核验，首页显示 “Free to try · no credit card required”，无公开定价页（2026-07-06）

竞品速览

• 来源：designmd.run 竞品对比文章 — 页面访问核验（2026-07-06），含完整对比表格
• 来源：Product Hunt DesignMD Alternatives — 2026

MyDesignMD 在输出广度（8 种格式）和证据质量（7 Agent + grounding.json）上领先，但定价不透明和闭源是其与开源替代的主要差距。

使用建议

• 上手路径：先免费试用提取 2-3 个目标网站的设计系统 → 评估输出质量是否满足需求 → 如需高频使用再联系获取付费报价
• 最适合：AI 编程助手重度用户、需要批量提取多个品牌设计系统的 Agency、设计系统文档化项目
• 替代方案：如果定价不透明不可接受，可先用 designlang（MIT 开源免费）或 designmd.run（免费匿名）作为替代
• 配合工具：将生成的 DESIGN.md 放入 Cursor/Claude Code 项目根目录，配合 VoltAgent/awesome-design-md 浏览已提取的品牌设计系统示例
• 安全提醒：提取他人网站设计系统时注意版权和商标法限制，DESIGN.md 仅供学习和参考使用

注意事项与已知限制

• MyDesignMD 依赖目标网站的 CSS 结构规范程度——使用 CSS 自定义属性的站点提取最精确，大量 inline style 或 CSS-in-JS 的站点可能有遗漏
• V2 版本对 SPA 站点的支持仍有限，单页应用中靠 JS 动态渲染的内容可能无法被爬虫捕获
• 定价不透明是当前最大痛点——如果预算敏感，建议先用免费试用验证输出质量后再联系询价
• 产品尚处早期阶段（2026年6月发布），功能迭代快但长期稳定性待观察
• 不建议将 MyDesignMD 用于提取内部机密产品的设计系统——优先选择本地运行的开源替代
• 提取的 token 文件（CSS 变量/Tailwind config）质量依赖源站 CSS 命名规范，手工校准可能仍需 10-30 分钟
• 与 Figma 原生工作流的集成不如 design-extractor.com，如需 Figma 导出请考虑竞品
• 中文本地化支持有限——官网和输出文件均为英文，中文设计系统的提取精度未经验证

总结

MyDesignMD 代表了 AI 辅助设计系统提取这一新兴品类的最高水准——7 Agent 证据驱动架构带来的输出可信度远超同类产品。如果你正在用 AI 编程助手做 UI 开发，一个 DESIGN.md 文件就能让生成结果从”通用模板感”升级到”品牌一致感”。

优势回顾：

• ✅ 7 Agent 证据驱动架构，输出可信度在同类中最高
• ✅ 8 种输出格式，覆盖人类阅读到机器消费全链路
• ✅ Web/CLI/API/SDK 四种接入方式，适合个人到企业的全场景
• ✅ grounding.json 证据追溯使输出可审计，非黑盒
• ✅ 免费试用无需注册，零门槛体验

需注意：

• ⚠️ 定价不透明，付费层需联系获取报价
• ⚠️ 产品 2026 年 6 月新发布，长期稳定性待验证
• ⚠️ 处理敏感设计数据时建议使用本地开源替代
• ⚠️ 中文/非英文设计系统的提取精度未经验证

💡 一句话：贴 URL → 等 3 分钟 → 拿到设计系统 → 丢给 Cursor/Claude Code，从此告别 AI 生成的”紫色渐变+圆角卡片”默认风格。

🛠️ 与其他工具协同

MyDesignMD 的核心定位不是孤立工具，而是 AI 辅助设计工作流的一环。以下是推荐的协同使用模式：

搭配 AI 编程助手 将生成的 SKILL.md 放入项目根目录后，Cursor/Claude Code/GitHub Copilot 在每次生成 UI 时都会参考这份设计系统。配合 Claude Code 的 Plan Mode，可以先让 Agent 制定设计方案再实施，确保输出风格一致。

搭配 Figma → 代码管线 先用 MyDesignMD 提取参考网站的设计系统作为灵感，再在 Figma 中基于这些 token 构建自己的设计系统，最后用 Figma 转代码插件生成组件。MyDesignMD 负责”灵感提取”，Figma 负责”原创设计”。

搭配 CI/CD 管线 通过 CLI/SDK 将 MyDesignMD 嵌入 CI 流程：每次部署前自动提取生产站点的最新设计系统，与项目中的 DESIGN.md 对比 diff，确保代码生成的设计系统与实际站点一致。