클로드 코드에서 웹 페이지의 디자인 개선(Redline) 작업을 수행하는 방법

속보: 'vibecoded dashboard'가 AI 느낌을 잃는 10초짜리 영상이 방금 190만 조회수를 돌파했으며, 이제 Claude Code에서 해당 클린업 작업을 사용자의 페이지에 직접 실행할 수 있게 되었고, 두 번째 에이전트가 스타일링이나 카피를 넘어 변경된 모든 요소를 플래그 지정합니다.

저는 Damir Sokolovsky의 오픈 소스 unslop 스킬(CC BY 4.0, 첫 댓글 링크 참조)에서 각색하고 기능 및 사용자가 이미 존재하는 페이지에 맞게 재구축한 프롬프트를 작성했습니다. 이 프롬프트는 레포지토리 내 실제 페이지에 디자이너의 레드라인 프로세스를 실행합니다.

Damir도 해당 영상을 제작했는데, X에서의 좋아요 수와 거의 비슷한 북마크 수를 기록했으며, 그가 3일 후에 공개한 무료 스킬은 4일 만에 GitHub에서 5,500개의 스타를 달성했습니다. 이는 얼마나 많은 사람이 같은 보라색 그라데이션을 응시하고 있는지를 보여줍니다.

작동 방식:

→ Chrome DevTools MCP를 통해 데스크톱 및 휴대폰 너비의 스크린샷과 함께 빌드, 테스트, Lighthouse 접근성 기준선(accessibility baseline)을 확보합니다.
→ 번호가 매겨진 'slop 리스트', 세 줄짜리 지침, 그리고 제안된 카피 수정 테이블이 제공되며, 이후 사용자의 승인을 기다립니다.
→ 하나의 커밋으로 브랜치에서 9번의 패스(spacing, color, icons, copy, type, layout, details, visuals, motion)를 수행합니다.
→ Lighthouse를 사용하여 마지막에 한 번 확인하는 WCAG AA 텍스트 대비 규칙을 적용하는데, 이 규칙은 이미지나 그라데이션 위에 있는 텍스트는 점수를 매길 수 없으므로 해당 요소들은 미확인(unchecked)으로 목록화됩니다.
→ 포크가 아닌 새로운 'judge' 서브 에이전트가 스크린샷과 slop 리스트만 받고, 여전히 남아있는 요소를 표시하며, 보여줄 수 없는 것은 알 수 없다고 말합니다.
→ 오직 규칙, 승인된 카피 행, 그리고 변경 사항 목록(diff lists)만을 보는 두 번째 새로운 서브 에이전트가 스타일링이나 승인된 카피가 아닌 모든 변화를 감지합니다.

알아두어야 할 두 가지 제한 사항: 사용자의 OK를 기다리는 과정은 잠금장치가 아니라 지침입니다. 왜냐하면 Claude Code는 자동 모드(auto mode)로 시작하기 때문에, 페이지에 테스트가 없으면 작성하거나, 전송하거나, 삭제하거나 결제할 수 없는 컨트롤만 클릭하고 '아무것도 고장 나지 않았다'고 주장하는 대신 '이것이 더 약한 증거다'라고 알려주기 때문입니다.

[ALEX: 먼저 실행해보고 여기에 진실된 한 줄을 추가하세요]

Claude Code에 붙여넣으세요:

<task> [PAGE: local dev URL]에서 인공지능적인 느낌(AI look)을 제거하세요. 기능, 동작 방식, 사실 정보 및 섹션 순서는 그대로 유지하고, 작업은 디자인(craft)에만 집중합니다. 새로운 섹션이나 컴포넌트는 추가하지 마세요. </task> <before> 제가 승인할 때까지 읽기 전용으로 유지하세요. Chrome DevTools MCP를 사용하세요. 로그인 정보는 저에게 맡기고 자격 증명(credentials)은 절대 읽지 마세요. - 레포지토리 외부에서 1440x900 및 390x844를 에뮬레이션하여 화면 높이 단위로 스크린샷을 저장하세요. - 데스크톱 및 모바일에서 빌드 및 테스트 결과와 lighthouse_audit 접근성 실패 사례를 기록하세요. </before> <plan> 1. 슬롭 목록(Slop list): AI가 과도하게 사용한 흔적(slop)의 모든 징후와 그 위치를 기록하세요: 보라색 그라디언트, 글로우 효과, 그라디언트 텍스트, 이모지 라벨, 스파클 배지, 넓게 간격 처리된 대문자, 무한 루프, 흐릿하게 떨리는 간격. 페이지가 대부분 괜찮다면 그렇게 말하고 오직 이것들만 수정하세요. 2. 방향성(Direction), 세 가지 요소로 구성됩니다. 월드(World): 배경 또는 재질입니다. 포커스(Focus): 1~2개의 지점에 풍부한 색상과 디테일을 부여하고, 나머지는 차분하게 유지합니다. 시그니처(Signature): 이 제품만이 가질 수 있는 아주 작은 디테일 하나입니다. 실제 브랜드 색상, 로고 및 폰트는 유지합니다 (보라색 그라디언트는 해당되지 않습니다). 3. 카피 테이블(Copy table), 현재와 제안된 내용을 비교하며 어조만 확인하세요: 느낌표, "다시 오신 것을 환영합니다" 같은 인사말, 과장된 단어. 주장(claim), 숫자, 가격, 이름 또는 법적 문구의 변경은 없습니다. 이 세 가지를 모두 보여준 후 멈추고 제 승인을 기다리세요. </plan> <passes> 제가 승인한 후, 새로운 브랜치에서 전체 페이지에 걸쳐 패스(pass)마다 하나의 커밋을 수행합니다: 1. 간격(Spacing): 4px 그리드, 동일 요소는 동일 크기로 유지 2. 색상(Color): 월드를 향하는 중립적인 스케일 사용, 세 가지 텍스트 레벨, 포커스 지점을 위한 강조색 하나만 사용하며, 색조 그라디언트나 글로우 효과 없음 3. 아이콘(Icons): 프로젝트의 라인 아이콘이 이모지를 대체하며, 크기와 스트로크는 통일 4. 카피(Copy): 승인된 행만 적용 5. 타이포그래피(Type): 폰트 두께 400과 500 사용, 문장 케이스(sentence case), 프로젝트의 지정 폰트 사용 6. 레이아웃(Layout): 섹션 내부의 정렬 및 비율만 조정 7. 디테일(Details): 일관된 반경(radii), 차분한 배지, 시그니처 적용 8. 비주얼(Visuals): 장식적인 채움 요소 제거, 아무것도 생성하지 않음 9. 모션(Motion): 루프, transition-all, 호버 스케일업 효과 제거 </passes> <rules> - 스타일링(styling)과 승인된 카피 변경만 허용합니다. 그 외의 모든 것(로직, 데이터, 설정(config), 새로운 패키지 또는 글꼴 등)은 승인 목록에 올라가며 구현되지 않습니다. - 테마 파일은 스타일링으로 간주하며, 다른 페이지 이름이 변경 사항에 도달하는 경우 모두 명시해야 합니다. - 모든 id, data-, aria- 속성은 유지합니다. 테스트를 통과시키기 위해 절대 수정하지 마십시오: 복사 전용(copy-only) 오류는 승인 목록에 올라갑니다. - 텍스트는 WCAG AA 기준(4.5:1)을 준수해야 하며, 큰 글씨의 경우 3:1을 유지합니다. 모든 컨트롤은 보이는 포커스 상태를 유지해야 합니다. - 절대 푸시하거나 병합(merge)하지 마십시오.</rules> <check> 마지막 커밋 후, 동일한 사진들을 다시 찍고 다음 단계를 수행합니다: - 빌드 및 테스트(Build and tests): 새로운 실패가 없어야 합니다. 테스트가 없는 경우? 작성, 전송, 삭제 또는 결제가 불가능한 컨트롤만 클릭하고 이를 약한 증거로 간주합니다. - lighthouse_audit 재실행: 새로운 실패가 없어야 합니다. 이 도구는 이미지나 그라디언트 위의 텍스트를 점수화할 수 없으므로, 해당 항목들은 미점검(unchecked)으로 목록에 작성합니다. 포커스 상태를 확인하기 위해 탭 이동을 수행합니다. 스틸컷으로는 보여줄 수 없는 모션 아이템은 grep 검색을 합니다. - Judge (새로운 서브 에이전트이며 포크가 아님): 오직 이전/이후 사진과 오류 목록(slop list)만 받으며, 아무것도 수정하지 않습니다. 사라진 항목, 여전히 존재하는 항목, 또는 구별할 수 없는 항목 각각에 대해 스크린샷을 인용하여 표시합니다. 휴대폰 너비에서 깨진 모든 것을 플래그 지정합니다. 교체 테스트(Swap test): 이 페이지가 다른 회사의 이름으로도 의미를 가질까요? - Guard (동일한 조건): 오직 위의 규칙, 승인된 카피 행, 전체 브랜치 diff만 받습니다. 스타일링이나 승인된 카피가 아닌 모든 변경 사항을 목록화합니다. </check> <stop> 두 보고서를 모두 기다리고, 발견된 문제를 수정한 다음, 사진을 다시 찍고 새로운 Judge와 Guard를 사용하여 검사를 재실행합니다. 최대 2라운드까지 진행하며, 항목이 남아 있어도 중단합니다. 교체 테스트 실패 시: World와 Signature만 스타일링 변경으로 푸시합니다. 만약 고정된 카피가 원인이라면, 그 사실만을 보고합니다. </stop> <output> 최종 오류 표시(slop marks), 테스트 및 Lighthouse 결과를 제출하고, 승인 목록을 첨부합니다. 마지막에는 저에게 필요한 것(병합(merge), 되돌리기(revert) 또는 각 승인에 대한 의견 제시)을 알려주십시오. </output>

Damir Sokolovsky가 unslop에서 각색하였으며, CC BY 4.0 라이선스를 따릅니다.