토론

클로드 코드에서 웹 페이지의 AI 느낌 제거하기

Wikiprompt, 무료 프롬프트 백과사전에서

Alex Prompter

2026년 11월 7일

클로드 코드에서 웹 페이지의 AI 느낌 제거하기 Claude Code의 포괄적인 워크플로우로, 기존 웹 페이지에서 AI 슬롭 스타일링을 제거합니다. 전후 스크린샷, 번호가 매겨진 슬롭 목록, 9가지 스타일링 패스, WCAG AA 체크, 그리고 심사자/가드 서브에이전트 리뷰를 포함합니다. Damir Sokolovsky의 unslop 스킬에서 각색했습니다.

프롬프트 내용저장

🌐
<task> [PAGE: local dev URL]에서 AI 느낌을 제거하세요. 기능, 동작, 사실, 섹션 순서는 유지하면서 디자인만 변경하세요. 새 섹션이나 컴포넌트는 추가하지 마세요. </task> <before> 제가 승인할 때까지 읽기 전용입니다. Chrome DevTools MCP를 사용하세요. 로그인은 제가 직접 처리하며, 자격 증명을 읽지 마세요. - 저장 전 스크린샷은 저장소 외부에, 1440x900 및 390x844 해상도로, 화면 높이 단위로 나누어 저장하세요. - 빌드 및 테스트 결과와 lighthouse_audit 접근성 실패 항목을 데스크톱 및 모바일에서 기록하세요. </before> <plan> 1. 슬롭 목록: AI 슬롭의 징후와 위치를 모두 번호로 표시하세요: 보라색 그라데이션, 글로우, 그라데이션 텍스트, 이모지 라벨, 반짝임 배지, 넓은 자간의 대문자, 무한 루프, 어긋난 간격. 페이지가 대체로 괜찮다면 그렇게 말하고 이 항목들만 수정하세요. 2. 방향, 세 줄. 세계: 설정 또는 소재. 초점: 1-2곳에 풍부한 색상과 디테일을 주고, 나머지는 조용히 유지. 시그니처: 이 제품에만 있을 작은 디테일 하나. 실제 브랜드 색상, 로고, 글꼴은 유지하세요 (보라색 그라데이션은 이에 해당하지 않음). 3. 카피 비교표, 현재 vs 제안, 톤만: 느낌표, "환영합니다" 인사말, 과장된 단어. 주장, 숫자, 가격, 이름, 법적 문구는 변경하지 마세요. 세 가지를 모두 보여준 후, 제 OK를 기다리며 멈추세요. </plan> <passes> 제 OK 후, 새 브랜치에서 페이지 전체에 걸쳐 패스당 하나의 커밋: 1. 간격: 4px 그리드, 동일한 요소는 동일한 크기 2. 색상: World 쪽으로 색조가 있는 중립 스케일 하나, 텍스트 레벨 3개, Focus 지점에만 사용할 액센트 하나, 색조 그라데이션이나 글로우 없음 3. 아이콘: 프로젝트의 라인 아이콘으로 이모지 대체, 크기와 선 두께 하나로 통일 4. 카피: 승인된 행만 5. 타이포그래피: 굵기 400 및 500, 문장형 대소문자, 프로젝트의 글꼴 6. 레이아웃: 섹션 내 정렬 및 비율만 7. 디테일: 일관된 모서리, 조용한 배지, 시그니처 8. 비주얼: 장식용 채우기 제거, 생성하지 않음 9. 모션: 루프, transition-all, 호버 확대 제거 </passes> <rules> - 스타일링과 승인된 카피만 변경합니다. 그 외 다른 것(로직, 데이터, 설정, 새 패키지 또는 글꼴)은 승인 목록에 올리고, 빌드하지 않습니다. - 테마 파일은 스타일링으로 간주합니다. 변경이 도달하는 다른 페이지를 명시하세요. - 모든 id, data- 및 aria- 속성을 유지하세요. 테스트를 통과하기 위해 테스트를 편집하지 마세요. 카피 전용 위반은 승인 목록에 올리세요. - 텍스트는 WCAG AA를 유지하세요: 4.5:1, 큰 텍스트는 3:1. 모든 컨트롤은 가시적인 포커스 상태를 유지합니다. - 푸시하거나 병합하지 마세요. </rules> <check> 마지막 커밋 후, 동일한 스크린샷을 다시 찍고: - 빌드 및 테스트: 새 실패 없음. 테스트가 없나요? 쓰기, 보내기, 삭제, 결제를 할 수 없는 컨트롤만 클릭하고, 이를 약한 증거로 간주하세요. - lighthouse_audit 재실행: 새 실패 없음. 텍스트가 이미지나 그라데이션 위에 있는 경우 점수를 매길 수 없으므로, 이를 확인되지 않은 항목으로 나열하세요. 탭으로 이동하여 포커스 상태를 확인하세요. 스틸 이미지로는 보이지 않는 모션 항목을 grep하세요. - 평가: 새 하위 에이전트(포크 아님)가 전후 스크린샷과 슬롭 목록만 받고, 아무것도 편집하지 않습니다. 각 항목을 사라짐, 여전히 있음, 또는 알 수 없음으로 표시하고 스크린샷을 인용하세요. 휴대폰 너비에서 깨진 부분을 표시하세요. 스왑 테스트: 이 페이지가 다른 회사 이름으로도 여전히 말이 되나요? - 가드: 동일한 조건으로 위 규칙, 승인된 카피 행, 전체 브랜치 diff만 받습니다. 스타일링이나 승인된 카피가 아닌 모든 변경을 나열하세요. </check> <stop> 두 보고서를 모두 기다리고, 발견된 문제를 수정한 후 스크린샷을 다시 찍고 새 평가자와 가드로 체크를 재실행하세요. 최대 2라운드 후 항목이 남아 있어도 멈추세요. 스왑 테스트 실패: World와 시그니처를 강화하되 스타일링만. 고정된 카피가 원인이라면 보고만 하세요. </stop> <output> 최종 슬롭 표시, 테스트 및 Lighthouse 결과, 승인 목록. 마지막으로 제가 필요한 것: 병합, 되돌리기, 또는 각 승인에 대한 결정. </output>

전체 프롬프트를 보려면 로그인하세요

Continue with:

By logging in, you agree to our Terms of Use and Privacy Policy

사용법

이 프롬프트는 coding와 함께 사용하도록 설계되었습니다. 위의 프롬프트 내용을 복사하여 원하는 AI 도구에 붙여넣으세요.

최상의 결과를 얻으려면 자리 표시자(대괄호 또는 대문자로 표시)를 특정 요구 사항으로 사용자 지정할 수 있습니다.

참고 자료

분류:coding| twitter| claude-code| web-design

토론