Claude Code로 CSS variables와 theme token 설계하기

먼저 문제 범위를 정하기

Claude Code로 CSS variables와 theme token 설계하기의 목적은 Claude Code에게 멋진 코드를 한 번에 만들게 하는 것이 아닙니다. 상호작용, 레이아웃, 접근성, 모바일 표시, 매출 동선을 같은 체크리스트에서 확인하는 것입니다. 초보자는 데스크톱 화면만 보고 끝내기 쉽지만, 실제 운영에서는 긴 텍스트, 코드 블록, 광고, CTA, 키보드 조작, 오류 상태가 더 중요합니다.

함께 볼 글은 claude code dark mode implementation, claude code design tokens, claude code design system 입니다. 공식 자료는 MDN CSS custom properties, MDN var(), MDN prefers-color-scheme 를 참고하세요. Claude Code에게는 목표, 수정 금지 범위, 유지할 디자인 규칙, use case, pitfall을 명확히 전달해야 합니다.

Claude Code 프롬프트

가장 작은 안전한 변경으로 이 UI 개선을 구현해 주세요.
기존 라우트, 컴포넌트 구조, design token, 주요 CTA를 유지해 주세요.
복사해서 실행 가능한 코드, use case, pitfall, 모바일 확인, rollback 방법을 주세요.
마지막에 사람이 확인할 review checklist를 작성해 주세요.

Use case checklist

1. 콘텐츠 사이트: 관련 글, 검색, 상담 버튼, 다운로드 링크를 더 쉽게 찾게 합니다.
2. SaaS 화면: 조작 경로를 줄이되 키보드, 모바일, 오류 상태를 유지합니다.
3. 상품 페이지: 가격, 구매 버튼, 광고, 폼을 가리지 않습니다.
4. 팀 개발: Claude Code가 코드와 review checklist를 함께 남겨야 합니다.

구현 예시

:root {
  --color-page: #ffffff;
  --color-text: #111827;
  --color-muted: #4b5563;
  --color-accent: #2563eb;
  --space-page: clamp(1rem, 3vw, 2rem);
}

[data-theme="dark"] {
  --color-page: #0b1120;
  --color-text: #f8fafc;
  --color-muted: #cbd5e1;
  --color-accent: #93c5fd;
}

body {
  background: var(--color-page, white);
  color: var(--color-text, black);
  padding-inline: var(--space-page, 1rem);
}

a {
  color: var(--color-accent, blue);
}

const root = document.documentElement;
const stored = localStorage.getItem("theme");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
root.dataset.theme = stored || (prefersDark ? "dark" : "light");

Pitfall checklist

• 예쁜 스크린샷만 보고 판단하지 않습니다.
• 긴 텍스트, 코드 블록, 표가 모바일에서 가로 스크롤을 만들지 확인합니다.
• 색상만으로 상태를 표현하지 말고 텍스트와 focus 표시를 남깁니다.
• Claude Code가 관련 없는 파일을 고치지 않게 합니다.
• 375px 모바일, 키보드 조작, 느린 네트워크, 오류 상태를 확인합니다.

검증 방법

build 후 모바일 폭에서 overflow를 확인합니다. 코드 블록이 스크롤되는지, CTA가 보이는지, 폼과 광고가 가려지지 않는지 봅니다. Claude Code에게 두 번째 review pass를 요청해 변경 파일, 위험, 삭제 가능한 코드, rollback 방법을 받습니다.

수익화 관점

이 주제는 광고 viewability, 상담 버튼, 상품 카드, 가격표, lead form과 연결됩니다. 팀 프로세스로 만들고 싶다면 Claude Code 교육과 상담에서 구현, review, 배포 확인을 반복 가능한 흐름으로 만들 수 있습니다.

실전 검증 메모

글 페이지와 관리 화면에서 모바일 폭, 코드 블록, CTA, 키보드 조작을 확인했습니다. 구현과 리뷰를 분리해서 Claude Code에 맡기는 방식이 diff가 작고 안정적이었습니다.

추가 확인

배포 전 스크린샷, 키보드 조작, 모바일 폭, 느린 네트워크, 오류 상태, CTA 위치를 같은 checklist에 넣습니다. 이렇게 해야 Claude Code의 결과가 코드뿐 아니라 실제 비즈니스 결과와 연결됩니다. Claude Code가 방금 작성한 코드라도 삭제할 수 있는 복잡도는 삭제하는 편이 좋습니다.

추가 확인

배포 전 스크린샷, 키보드 조작, 모바일 폭, 느린 네트워크, 오류 상태, CTA 위치를 같은 checklist에 넣습니다. 이렇게 해야 Claude Code의 결과가 코드뿐 아니라 실제 비즈니스 결과와 연결됩니다. Claude Code가 방금 작성한 코드라도 삭제할 수 있는 복잡도는 삭제하는 편이 좋습니다.

추가 확인

배포 전 스크린샷, 키보드 조작, 모바일 폭, 느린 네트워크, 오류 상태, CTA 위치를 같은 checklist에 넣습니다. 이렇게 해야 Claude Code의 결과가 코드뿐 아니라 실제 비즈니스 결과와 연결됩니다. Claude Code가 방금 작성한 코드라도 삭제할 수 있는 복잡도는 삭제하는 편이 좋습니다.

추가 확인

배포 전 스크린샷, 키보드 조작, 모바일 폭, 느린 네트워크, 오류 상태, CTA 위치를 같은 checklist에 넣습니다. 이렇게 해야 Claude Code의 결과가 코드뿐 아니라 실제 비즈니스 결과와 연결됩니다. Claude Code가 방금 작성한 코드라도 삭제할 수 있는 복잡도는 삭제하는 편이 좋습니다.

추가 확인

배포 전 스크린샷, 키보드 조작, 모바일 폭, 느린 네트워크, 오류 상태, CTA 위치를 같은 checklist에 넣습니다. 이렇게 해야 Claude Code의 결과가 코드뿐 아니라 실제 비즈니스 결과와 연결됩니다. Claude Code가 방금 작성한 코드라도 삭제할 수 있는 복잡도는 삭제하는 편이 좋습니다.

추가 확인

배포 전 스크린샷, 키보드 조작, 모바일 폭, 느린 네트워크, 오류 상태, CTA 위치를 같은 checklist에 넣습니다. 이렇게 해야 Claude Code의 결과가 코드뿐 아니라 실제 비즈니스 결과와 연결됩니다. Claude Code가 방금 작성한 코드라도 삭제할 수 있는 복잡도는 삭제하는 편이 좋습니다.