logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
YouMindTRACTIANLobeHubCodeRabbit
6.5.0
  • Ant Design of React
  • 更新日志
    v6.5.0
  • 如何使用
    • 快速上手
    • 在 Vite 中使用
    • 在 Next.js 中使用
      更新
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
    • 在 Farm 中使用
    • 使用 Refine
  • AI
    • For Agents
      新增
    • design.md
      新增
    • LLMs.txt
      新增
    • MCP Server
      新增
    • CLI
      新增
  • 进阶使用
    • 定制主题
    • 样式兼容
    • 服务端渲染
    • 使用自定义日期库
    • 国际化
    • 通用属性
  • 迁移
    • 从 v5 到 v6
  • 其他
    • 社区精选组件
    • 贡献指南
    • 赞助
    • FAQ
什么是 design.md?
在线读取
通过 CLI 获取
文件包含什么
适用场景
相关文档

design.md

文档
编辑此页LLMs.md
For AgentsLLMs.txt

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
X
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
For Agents
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
WeaveFox logoWeaveFox-前端智能研发
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

本指南介绍如何使用 Ant Design 的 design.md,让 AI 设计工具理解 Ant Design 的视觉语言。

什么是 design.md?

design.md 是面向 AI 设计工具的设计语言描述文件,遵循 google-labs-code/design.md 规范。

它描述 Ant Design 默认 Light 主题的视觉语言、组件范式和主题 Token,帮助 Figma Make、Stitch 等 AI 设计工具生成更符合 Ant Design 设计体系的界面。

在线读取

AI 工具可以直接读取:

text
https://ant.design/design.md

你可以在 AI 设计工具中使用这段提示词:

text
阅读 https://ant.design/design.md,并按 Ant Design 的视觉语言生成界面。

通过 CLI 获取

如果工具无法直接读取 URL,也可以通过 @ant-design/cli 获取同一份内容:

bash
antd design.md

常用选项:

bash
antd design.md --format json # JSON 格式输出
antd design.md --lang zh # 中文描述

文件包含什么

design.md 包含:

  • Ant Design 默认 Light 主题的颜色、字号、圆角、间距、阴影等视觉规则。
  • 常见组件的视觉范式和使用建议。
  • 与 ConfigProvider.theme、算法组合、组件级 Token、cssVar、zeroRuntime 等主题能力相关的说明。
  • AI 设计工具在生成 Ant Design 界面时需要避免的误用方式。

适用场景

  • 在 AI 设计工具中生成更符合 Ant Design 视觉体系的界面草图。
  • 让设计 Agent 理解 Ant Design 的默认主题和组件使用方式。
  • 将 Ant Design 的设计语言作为项目 UI 生成的约束条件。

相关文档

  • For Agents
  • LLMs.txt
  • Ant Design CLI