logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
YouMindTRACTIANLobeHubCodeRabbit
6.5.0
  • Ant Design of React
  • Component Token
  • Disable Motion
  • Dynamic Theme
  • First Example
  • Local Theme
  • Modify Theme Token
  • Preset Algorithm
  • Use Token
  • Changelog
    v6.5.0
  • Basic Usage
    • Getting Started
    • Usage with Vite
    • Usage with Next.js
      UPDATED
    • Usage with Umi
    • Usage with Rsbuild
    • Usage with Farm
    • Usage with Refine
  • Others
    • Sponsor
  • AI
    • For Agents
      NEW
    • design.md
      NEW
    • LLMs.txt
      NEW
    • MCP Server
      NEW
    • CLI
      NEW
  • Advanced
    • Customize Theme
    • CSS Compatible
    • Server Side Rendering
    • Use custom date library
    • Internationalization
    • Common Props
  • Migration
    • From v5 to v6
  • Other
    • Third-Party Libraries
    • Contributing
    • FAQ
What is design.md?
Read Online
Use the CLI
What's Included
Use Cases
Related

design.md

Docs
Edit this pageLLMs.md
For AgentsLLMs.txt

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
X
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
For Agents
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

This guide explains how to use Ant Design's design.md to help AI design tools understand Ant Design's visual language.

What is design.md?

design.md is a design-language description file for AI design tools, conformant with the google-labs-code/design.md format.

It describes the visual language, component archetypes, and theme tokens of Ant Design's default light theme, helping AI design tools such as Figma Make and Stitch generate interfaces that better match the Ant Design system.

Read Online

AI tools can read it directly:

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

You can use this prompt in AI design tools:

text
Read https://ant.design/design.md and generate UI following Ant Design's visual language.

Use the CLI

If a tool cannot read URLs directly, you can get the same content through @ant-design/cli:

bash
antd design.md

Common options:

bash
antd design.md --format json  # JSON format output
antd design.md --lang zh      # Chinese descriptions

What's Included

design.md includes:

  • Visual rules for colors, typography, border radius, spacing, shadows, and other default light theme decisions.
  • Visual archetypes and usage guidance for common components.
  • Notes about theme capabilities such as ConfigProvider.theme, algorithm composition, component tokens, cssVar, and zeroRuntime.
  • Misuse patterns AI design tools should avoid when generating Ant Design interfaces.

Use Cases

  • Generate UI drafts in AI design tools that better follow the Ant Design visual system.
  • Help design agents understand Ant Design's default theme and component usage.
  • Use Ant Design's design language as a constraint for project UI generation.

Related

  • For Agents
  • LLMs.txt
  • Ant Design CLI