디자인 시스템으로 Claude Code의 CSS 추측 작업을 수정하는 방법

한 개발자가 Claude Code를 사용하여 주식 분석 대시보드를 구축하면서 흔히 겪는 좌절을 경험했습니다: AI가 동일하게 정렬이 틀어진 div에 대해 반복적으로 깨진 CSS를 생성한 것입니다. 6번의 반복 동안 패딩 수정, flex에서 grid로 전환, 그리고 overflow: hidden 추가 시도는 실패하거나 문제를 더 악화시켰습니다.

문제점: 시각적 피드백 없이 디자인하는 AI

개발자는 Claude Code가 시각적 피드백이 없다는 것을 깨달았습니다—브라우저 출력을 볼 수 없습니다. AI는 설명에서 패턴을 매칭하고 스타일링을 추측하며, 종종 "기술적으로 유효하지만 컴퓨터를 한 번도 사용해본 적 없는 사람이 디자인한 것처럼 보이는 CSS"를 생성합니다.

해결책: 디자인 시스템으로 제약하기

토큰을 제공하는 대신 완전한 디자인 시스템 명세를 제공하세요. 개발자는 다음을 사용했습니다:

/* spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;

/* colors */
--bg-primary: #0f1117;
--bg-card: #1a1d27;
--accent: #3b82f6;
--text-primary: #e2e8f0;
--text-muted: #64748b;
/* type scale */
--text-sm: 12px;
--text-base: 14px;
--text-lg: 18px;
--text-xl: 24px;

그런 다음 지시합니다: "이 값들만 사용하세요. 어디에도 하드코딩된 숫자는 없어야 합니다." 이렇게 하면 Claude에게 임의의 결정을 위한 백지 캔버스 대신 추론할 수 있는 프레임워크를 제공합니다.

구조와 스타일 프롬프트 분리하기

절대 Claude에게 HTML과 CSS를 동시에 작성하라고 요청하지 마세요. 개발자는 프로세스를 분리했습니다:

• 첫 번째 프롬프트: "이 대시보드에 대한 HTML 구조만 생성하세요. 스타일 속성, CSS, 클래스 없이. 의미론적 구조만 제공하세요."
• 두 번째 프롬프트: "이제 위의 디자인 시스템만 사용하여 이 구조에 대한 CSS를 작성하세요."

이렇게 하면 Claude가 스타일을 적용하기 전에 HTML을 고정된 계약으로 취급하게 되어, 자신의 출력에 대한 가정을 잃어버리는 것을 방지합니다.

결과: 다음 컴포넌트는 6번의 반복에서 1번으로 줄었습니다. 개발자는 또한 이 디자인 시스템이 CLAUDE.md 파일을 통해 강제될 수 있는지, 매 세션마다 붙여넣지 않아도 되는지에 대한 질문도 제기했습니다.