
디자인을 안 시키면 AI는 기본값으로 채운다. 기본값이 들어오는 자리는 대개 여섯이다.
같은 할 일 화면이에요. 가운데 선을 옆으로 밀어 보세요.
두 판 모두 Giting이 직접 만든 예시예요. 왼쪽은 흔한 기본값(보라 그라데이션, 이모지, 기본 색, 기본 글꼴, 전부 카드)을 일부러 켰어요.
왼쪽이 흔한 기본값, 오른쪽이 벗긴 것. 아래 한 줄이 대신 시키는 말이에요.
G1보라·파랑 그라데이션대신 「배경은 한 색, 강조색은 한 군데에만」
G2이모지를 아이콘으로대신 「아이콘은 선 아이콘(SVG)이나 글자만, 이모지는 본문에만」
G3프레임워크 기본 색대신 「색은 DESIGN.md에서 정한 값만 쓰고 hex로 적어 줘」
G4기본으로 고른 글꼴대신 「제목 글꼴 하나를 이 제품에 맞게 골라 이유와 같이 적어 줘」
G5크림 바탕 + 테라코타대신 「바탕은 흰색이나 회색, 따뜻한 톤은 이유가 있을 때만」
G6전부 카드대신 「카드는 제일 중요한 하나만, 나머지는 여백과 구분선으로」
여섯 가지는 design-brief 검사기(slop_check)가 세는 항목과 같아요. 5장에서 이 검사기를 돌려요.
여섯 중에 제일 눈에 띄는 것이 「전부 카드」예요.
두 조각은 UI 메뉴판에 있는 실물 그대로예요.
「깔끔하게」는 고를 근거가 아니에요. 근거를 주면 기본값이 들어올 자리가 없어져요.
기본값이 들어온 화면
네 줄이 막은 화면
두 화면은 이 문장을 AI에게 보내 받은 결과가 아니라, 문장이 무엇을 막는지 보이려고 Giting이 직접 만든 예시예요.
네 줄을 프로젝트 폴더에 파일로 두면 요청마다 안 적어도 돼요. 시킬 때 「DESIGN.md 따라서」 한마디면 돼요.
DESIGN.md에 적어도 AI가 다 지키지는 않아요. 1장의 두 판을 검사기에 그대로 넣어 봤어요.
화면의 글은 실제로 돌린 출력 그대로예요. 걸리면 끝에 1을 돌려줘서, Claude가 걸린 것을 고치고 다시 돌리게 돼요.
/plugin marketplace add hanmariyang/giting-skills /plugin install design-brief@giting
설치하고 화면을 지어 달라고 하면, design-brief가 DESIGN.md를 먼저 쓰고 다 지은 페이지에 검사기를 돌려요. 「걸린 것 없음」이 나올 때까지가 일이에요.
일부러 카드 그리드로 만든 화면(상품 목록 같은)이면 --allow 'g6'로 끄고 이유를 적어요.
