design.md
design.md
이 가이드는 Ant Design의 design.md를 사용해 AI 디자인 도구가 Ant Design의 시각 언어를 이해하도록 돕는 방법을 설명해요.
출처: 문서
본문
design.md란? (What is design.md?)
design.md는 AI 디자인 도구를 위한 디자인 언어 설명 파일로, google-labs-code/design.md 형식을 따릅니다.
Ant Design 기본 밝은 테마의 시각 언어, 컴포넌트 원형(archetypes), 테마 토큰을 설명해서, Figma Make, Stitch 같은 AI 디자인 도구가 Ant Design 시스템에 더 잘 맞는 인터페이스를 생성하도록 도와줘요.
온라인으로 읽기 (Read Online)
AI 도구가 URL에서 직접 읽을 수 있어요.
https://ant.design/design.md
AI 디자인 도구에서 이 프롬프트를 사용할 수 있어요.
Read https://ant.design/design.md and generate UI following Ant Design's visual language.
CLI 사용하기 (Use the CLI)
도구가 URL을 직접 읽을 수 없다면, @ant-design/cli를 통해 같은 콘텐츠를 얻을 수 있어요.
antd design.md
공통 옵션:
antd design.md --format json # JSON format output
antd design.md --lang zh # Chinese descriptions
포함 내용 (What's Included)
design.md에는 다음이 포함돼요.
- 색상, 타이포그래피, 테두리 반경, 간격, 그림자 등 기본 밝은 테마 결정의 시각 규칙.
- 공통 컴포넌트의 시각 원형(archetypes)과 사용 지침.
ConfigProvider.theme, 알고리즘 구성, 컴포넌트 토큰,cssVar,zeroRuntime같은 테마 기능에 대한 메모.- AI 디자인 도구가 Ant Design 인터페이스를 생성할 때 피해야 할 오용(misuse) 패턴.
사용 사례 (Use Cases)
- Ant Design 시각 시스템을 더 잘 따르는 UI 초안을 AI 디자인 도구에서 생성.
- 디자인 에이전트가 Ant Design 기본 테마와 컴포넌트 사용법을 이해하도록 도움.
- Ant Design 디자인 언어를 프로젝트 UI 생성의 제약(constraint)으로 사용.