DesignMD

# linear.app — 生产设计上下文 ## 设计系统规范 - --font-sans: "Satoshi" - --font-mono: "Geist Mono" - primary: "#165DFC" - background: "#0A0A0C" - card: "#121215" - text: "#FFFFFF"

design.md 文件是一种机器可读的文档规范，用于描述网站完整的设系统。它包括 OKLCH/HEX 颜色角色、Satoshi 和 Geist 字体比例、间距节奏、按钮/卡片基础组件、运动规则以及为 Claude Code、Cursor 和 Windsurf 设计的 AI 提示词。

可以。只需将任何公共网站地址粘贴到生成器输入中。我们的无头提取引擎读取渲染后的 DOM，计算精确样式，并自动合成标记比例。

design.md 在 Claude Code CLI、Cursor IDE (.cursorrules)、Windsurf (Cascade)、Lovable、v0 by Vercel、Bolt.new、ChatGPT 和 GitHub Copilot 中原生支持。

每个导出包包含 8 个交叉引用文件：design.md、tokens.json、tailwind.config.ts（Tailwind v4）、variables.css（CSS 自定义属性）、colors.json、typography.json、components.md 和 prompt.md。

我们生成原生 Tailwind CSS v4 @theme 配置。您导出的 tailwind.config.ts 包含类似 --color-primary、--font-sans 和 --radius-lg 的 @theme 变量，允许在 Tailwind v4 应用中零构建步骤使用。

可以。导出套件会生成标准 CSS 自定义属性 (:root { --color-primary: #... }) 以及与 Figma 标记和 Style Dictionary 兼容的 W3C 标准设计标记 JSON。

AI 编码模型在收到模糊提示时常常会发明任意颜色。提供 design.md 文件会迫使 AI 模型使用显式的标记边界，确保颜色不会偏离，实现 100% 的品牌一致性。

提取的 URL 数据在临时浏览器实例中无状态处理。私人分析永远不会被索引或出售，Pro/Team 订阅用户可以严格保密其生成历史。

当然可以。所有提取的设计标记、Tailwind 配置和 CSS 变量都是 100% 免版税的，可以集成到商业客户项目、代理工作和生产 SaaS 网站应用中。

提取器使用感知均匀的 OKLCH 空间计算颜色亮度。它分别对表面、文本墨水和交互式品牌强调进行分类，以便明暗模式变量能清晰映射。

design.md 包含视觉设计系统标记（颜色、字体比例、圆角）。.cursorrules 和 AGENTS.md 是提示配置文件，用于指导 AI 助手在生成代码时遵循 design.md 中的规则。

不需要！您可以完全免费使用 designmd.fun 而无需创建账户。免费套餐每月包含 5 次完整网站提取，可下载 design.md 和标记 JSON。

DesignMD 能够将任意公共网站自动转换为 AI 就绪的 Design.md 包。这个包中会包含该网站的设计令牌（如颜色、字体、间距等）、组件描述、动效规则，以及专门为编码智能体准备的提示词，方便 AI 直接理解并使用这些设计规范。

DesignMD 适合需要快速提取现有网站设计规范、复刻或参考公共网站风格的场景，例如：开发团队想基于某个现有网站快速搭建自己的设计系统，或者前端工程师/编码智能体需要将公开网站的视觉语言转化为可执行的代码规范。它可以帮助你跳过手动分析设计元素的过程，极大提升设计到开发的效率。

DesignMD 的核心技术特点在于它能够自动解析公共网站的 DOM 结构和 CSS 样式，提取出结构化的设计令牌和组件规则，并将这些信息打包成 Markdown 格式的 Design.md 文件。这个文件不仅人类可读，还特别优化了 AI 读取的友好性——包含的提示词可以让编码智能体直接按照这些规范生成代码，减少了设计复用的沟通成本。