에이전트가 디자인을 따르게 하는 방법, DESIGN.md(매우 친절한 커서, 코덱스, 클로드 코드 실습 과정 포함)

AI 에이전트에게 "이런 느낌으로 만들어줘"라고 말할 수 있는 설계도가 있다면 어떨까요? DESIGN.md는 에이전트가 읽고 따를 수 있는 텍스트 기반 디자인 시스템 문서입니다. 구글 Stitch에서 출발한 이 개념을 Cursor, Claude Code, Codex 세 가지 도구에서 직접 적용해 노트 트래킹 앱을 만들어보며, 디자인 일관성을 어떻게 확보할 수 있는지 보여드립니다.

AWESOME DESIGN.md : https://github.com/VoltAgent/a....wesome-design-md/tre

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 DESIGN.md 소개와 영상 배경
0:52 DESIGN.md란 무엇인가
1:18 구글 Stitch에서 시작된 디자인 문서의 흐름
2:24 Stitch의 한계와 DESIGN.md 등장 배경
3:21 awesome-design-md 프리셋 저장소 소개
5:11 Cursor에서 DESIGN.md 적용하기
6:50 SpaceX 디자인으로 노트 트래킹 앱 제작
8:41 Claude Code에서 DESIGN.md 사용법
11:13 Cursor 결과물 확인 — SpaceX 스타일 앱
11:50 Claude Code에서 Miro 디자인 적용
14:21 Codex에서 DESIGN.md 사용법과 Superhuman 디자인 적용
19:33 세 도구 결과물 비교 및 오류 수정
22:29 마무리

오늘 다룬 내용
- DESIGN.md의 개념: 사람과 에이전트 모두 읽고 수정할 수 있는 텍스트 디자인 시스템 문서
- 구글 Stitch에서 DESIGN.md로 이어진 발전 과정
- awesome-design-md에서 SpaceX, Miro, Superhuman 등 프리셋을 가져와 바로 사용하는 방법
- Cursor, Claude Code, Codex 세 도구에서 DESIGN.md를 적용해 React Native 노트 앱을 만드는 전체 과정
- 디자인 프리셋만 바꿔도 앱의 색상·타이포그래피·레이아웃이 일관되게 변하는 것을 실제 결과물로 확인
- Plan 모드로 설계를 먼저 확인한 뒤 구현으로 넘어가는 워크플로우

#DESIGN.md #디자인엠디 #바이브코딩 #Cursor #커서 #ClaudeCode #클로드코드 #Codex #코덱스 #AI디자인 #디자인시스템 #ReactNative #리액트네이티브 #앱개발 #노코드 #AI개발 #프롬프트엔지니어링 #awesome-design-md #구글Stitch #에이전트코딩