AI와 코딩을 처음 시작하면 누구나 같은 경험을 한다. 기능은 놀라울 정도로 잘 나온다. 그런데 완성된 화면을 보는 순간, 어딘가 어색하다. 버튼 색상, 여백, 폰트 — 하나하나는 틀리지 않았는데 전체적으로 “AI가 만든 느낌”이 난다. 99%는 완벽한데, 나머지 1%가 전체 인상을 망친다.
디자이너를 고용하자니 배보다 배꼽이 크고, 직접 CSS를 수정하자니 끝없는 삽질이 시작된다. 비개발자가 AI로 무언가를 만들 때 가장 풀기 어려운 문제가 바로 이 디자인 영역이었다.
DESIGN.md라는 해법
Google Stitch에서 나온 개념으로, 원리는 놀라울 정도로 단순하다. 유명 웹사이트의 디자인 시스템 — 색상 팔레트, 타이포그래피, 버튼 스타일, 여백 체계, 그림자, 반응형 규칙까지 — 을 마크다운 파일 하나로 정리해둔 것이다. AI 에이전트가 바로 읽고 적용할 수 있는 형태로 구조화되어 있다.
사용법은 두 단계다. 원하는 스타일의 DESIGN.md를 프로젝트 폴더에 넣고, AI에게 “이 디자인 따라서 만들어”라고 하면 끝이다. Stripe의 세련된 결제 UI, Apple의 프리미엄 여백, Notion의 따뜻한 미니멀리즘 — 현재 31개 사이트의 디자인 시스템이 정리되어 있고, Claude, Vercel, Linear, Figma, Supabase 등 내로라하는 회사들의 디자인을 그대로 활용할 수 있다.
왜 작동하는가
AI는 코딩 능력은 뛰어나지만, “예쁘게 만드는 것”은 명확한 기준이 없으면 못한다. AGENTS.md가 “어떻게 빌드하라”를 정의하듯, DESIGN.md는 “어떻게 보여야 하는지”를 정의한다. 파일 하나를 넣었을 뿐인데 결과물의 완성도가 확연히 달라진다.
결국 AI는 프레임워크와 구조가 전부다. 좋은 틀을 줘야 좋은 결과가 나온다.
AI로 제품이나 프로토타입을 만들어본 경험이 있으신 분들, 디자인 품질 문제를 어떻게 해결하고 계신가요?