Design Differently (무료 버전)
당신은 AI 에이전트로 빌드되었을 가능성이 높은 프론트엔드를 리뷰하고 있습니다. 당신의 임무는 코드가 생성된 것처럼 보이거나 느껴지게 만드는 요소를 찾아내고 수정하는 것입니다. 프레젠테이션, 카피, 상호작용을 변경합니다. 비즈니스 로직, 데이터, 라우팅, 백엔드는 변경하지 않습니다.
목차
- 워크플로우: 1단계부터 6단계
- 규칙: 타이포그래피, 카피, 시각 요소, 모션 및 효과, 오버레이, 툴팁, 키보드, 컴포넌트, 이미지, 랜딩, 소유자를 위한 제안, 히트 타겟
- 탐지 패턴
- 주의사항(Gotchas)
- 보고서
각 파트를 따라야 하는 엄격함의 정도:
- 정확: 탐지 패턴, 3단계의 질문, 보고서 형식과 푸터. 변경하지 마십시오.
- 엄격: 규칙. 작성된 대로 적용하세요. 프로젝트에 맞지 않는 경우에만 하나를 건너뛰고 보고서에 그 이유를 명시하세요.
- 당신의 판단: 대체 폰트 선택, 가벼운 카피 편집 표현, 유지할 모션.
이 체크리스트를 답변에 복사하고 진행하면서 체크하세요:
- [ ] 1. 프로젝트 파악
- [ ] 2. 스캔 및 "변경 전" 캡처
- [ ] 3. 수정 사항 목록화 및 사용자 선택
- [ ] 4. 선택된 항목 수정
- [ ] 5. 확인 및 "변경 후" 캡처
- [ ] 6. 규칙을 레포지토리에 고정 및 보고
1. 프로젝트 파악
무엇이든 건드리기 전에 다음을 알아내십시오:
- 프레임워크 및 스타일링 방식 (Tailwind, CSS Modules, styled-components, 일반 CSS, shadcn 또는 MUI와 같은 UI 키트).
- 디자인 토큰의 위치 (CSS 변수, Tailwind 설정, 테마 파일). 없으면 기록하십시오.
- 공유 컴포넌트의 위치 (Button, Dialog, Tooltip, Dropdown, Badge, Banner). 발견한 중복을 나열하십시오.
- 프로젝트가 앱(도구, 대시보드, 에디터)인지 사이트(랜딩, 마케팅, 블로그)인지. 일부 규칙은 둘 중 하나에만 적용됩니다.
- 실행 방법 및 검사(린트, 타입체크, 테스트) 실행 방법.
- 여기서 스크린샷을 찍을 수 있는지 (Playwright, 브라우저 도구, 미리보기 창) 그리고 이 채팅에서 이미지를 보여줄 수 있는지.
프로젝트가 이미 가지고 있는 것을 사용하고 코드 스타일을 일치시키십시오. 이 버전에서는 폰트 파일을 제외하고 라이브러리를 추가하지 마십시오.
2. 스캔 및 "변경 전" 캡처
탐지 패턴에서 검색을 실행하고 주요 화면을 읽으십시오. 환경이 셸 명령을 실행할 수 없는 경우 (Lovable, v0, Bolt와 같은 호스팅 빌더), 파일을 열고 동일한 패턴을 읽어서 찾으십시오. 각 히트에 대해 파일, 라인 및 위반하는 규칙을 기록하십시오. 히트는 후보일 뿐, 확정이 아닙니다: 집계하기 전에 컨텍스트를 읽으십시오.
스크린샷을 찍을 수 있다면, 변경 전에 지금 주요 화면을 캡처하십시오: 홈 또는 랜딩, 가장 바쁜 앱 화면, 다이얼로그 하나, 폼 하나. 1440×900 및 375×812를 사용하십시오. .design-differently/before/에 home-1440.png와 같은 이름으로 저장하십시오. 각각의 정확한 경로와 상태를 기록하여 나중에 반복할 수 있도록 하십시오. 이 폴더를 커밋하지 마십시오.
3. 수정 사항 목록화 및 사용자 선택
이 단계에 답변이 오기 전까지 어떤 파일도 변경하지 마십시오.
발견 사항을 번호가 매겨진 하나의 목록으로 표시하고, 영역 제목(타이포그래피, 카피, 시각 요소, 모션, 오버레이, 툴팁, 키보드, 컴포넌트, 이미지, 랜딩) 아래에 그룹화하십시오. 번호는 그룹 간에 연속적으로 이어집니다. 항목당 한 줄: 무엇이 잘못되었는지, 어디에 있는지, 무엇을 변경할 것인지. 발견 사항이 없는 영역은 생략하십시오.
### 타이포그래피
1. Inter가 유일한 폰트로 사용됨 (app/layout.tsx). 덜 흔한 산세리프로 교체.
### 카피
2. 랜딩 카피에 em 대시 14개 (components/Hero.tsx, Features.tsx). 마침표, 쉼표 또는 콜론으로 교체.
3. 히어로의 구분선 "빠름 · 프라이빗 · 오픈소스" (components/Hero.tsx). 아이콘이 있는 FUD 행으로 전환.
4. 설정에서 옵션 설명이 레이블을 반복함 (settings/page.tsx). 제거.
목록을 정확히 이 질문으로 끝내십시오:
모든 수정 사항을 적용하려면 "all"이라고 답하거나, 원하는 번호를 나열하십시오 (예: 1, 3, 5-9).
그런 다음 멈추고 답변을 기다리십시오.
4. 선택된 항목 수정
사용자가 선택한 항목만 적용하고, 한 번에 한 영역씩, 다음 순서로 진행하십시오: 컴포넌트, 오버레이, 타이포그래피, 시각 요소, 모션, 툴팁, 키보드, 이미지, 카피, 랜딩.
공유 컴포넌트와 토큰을 먼저 변경하여 하나의 수정이 모든 화면에 적용되도록 하십시오.
각 영역 후에 프로젝트의 검사(린트, 타입체크, 테스트, 빌드)를 실행하십시오. 검사가 실패하면 다음 영역으로 넘어가기 전에 수정하십시오. 수정에 백엔드나 로직 변경이 필요하면 해당 항목을 되돌리고 건너뛴 것으로 표시하십시오.
5. 확인 및 "변경 후" 캡처
첫 번째 패스는 초안입니다. 변경한 내용에 대한 기억이 아닌 외부 증거를 기준으로 확인하십시오:
- 스크린샷을 찍을 수 있다면, 동일한 경로, 상태, 크기로 모든 "변경 전" 샷을 반복하고
.design-differently/after/에 동일한 이름으로 저장하십시오. 또한 건드린 다른 화면도 촬영하십시오. 각각을 살펴보십시오. 잘리거나, 겹치거나, 읽을 수 없거나, 튀는 부분이 있으면 해당 영역에 대해 4단계로 돌아가십시오. - 탐지 패턴을 다시 실행하십시오. 허용된 예외 외부에서 여전히 패턴이 발견되면 4단계로 돌아가십시오.
- 카피 규칙에 대해 편집한 모든 문자열을 다시 읽으십시오. 여전히 규칙을 위반하거나, 규칙이 요구한 것보다 더 많이 변경했다면 4단계로 돌아가십시오.
6. 규칙을 레포지토리에 고정 및 보고
수정 사항은 미래의 바이브코딩에서도 유지되어야 합니다. 나중에 이 프로젝트를 편집하는 모든 에이전트는 코드를 작성하기 전에 규칙을 봐야 하며, 그렇지 않으면 아티팩트를 다시 가져올 것입니다.
- 프로젝트 루트에
DESIGN_RULES.md를 생성하십시오. AI 에이전트를 위해 짧고 명령형으로 150줄 미만으로 작성하십시오. 이 프로젝트에 적용되는 것만 포함하십시오:- 선택한 폰트, 해당 파일 및 선언 위치, 그리고 로고 폰트 경로 (해당되는 경우 A 또는 B).
- 토큰이 있는 위치와 색상, 모서리 반경, 간격, 그림자, 폰트 크기는 오직 토큰에서만 가져와야 한다는 규칙. 토큰 이름으로 기본, 보조 및 선택적 강조 색상, 그리고 파괴 및 성공 색상은 해당 상태에만 사용해야 한다는 규칙.
- 공유 컴포넌트의 위치 (Button, Dialog, Tooltip, Dropdown, Badge, Banner) 및 이를 재사용하고 절대 중복하지 말아야 한다는 규칙.
- 이 스킬에서 적용한 모든 규칙을 각각 한 줄씩, 이 프로젝트의 구체적인 세부 사항과 함께 (예: "툴팁:
components/ui/Tooltip.tsx사용, 2~3 단어 + 단축키"). - 금지 목록: 폰트, 이모지, em 대시, 장식적 구분선, 강조를 위한 따옴표, 넓은 표면의 유리 효과, 기본 페이드인 및 블러인, 색상이 들어간 아이콘 박스, 강조 막대 콜아웃, 간격이 있는 대문자 눈썹, 실시간 상태 표시 점, 브라우저 기본 컨트롤 및 스크롤바.
- 마지막 줄: "UI 변경을 완료하기 전에 이 파일에 대해 확인하십시오."
- 프로젝트의 모든 에이전트 명령 파일이 이를 가리키도록 하십시오. 존재하는 다음 각 파일에
모든 UI, 카피 또는 스타일링 변경에 대해 DESIGN_RULES.md를 따르십시오.라는 한 줄을 추가하십시오:CLAUDE.md,AGENTS.md,.cursorrules,.cursor/rules/*.mdc,.windsurfrules,.github/copilot-instructions.md,replit.md. 아무것도 없으면 해당 줄로AGENTS.md와CLAUDE.md를 생성하십시오. 해당 파일의 다른 내용은 변경하지 마십시오. DESIGN_RULES.md가 이전 실행에서 이미 존재하면 새로 생성하는 대신 업데이트하십시오. 사용자가 수동으로 추가한 규칙은 유지하십시오.
그런 다음 보고서의 보고서를 최종 채팅 메시지로 게시하십시오.
사용자가 세션 중에 수정 사항 중 하나를 수정하면, 이 파일의 주의사항에 수정 내용을 설명하는 한 줄을 추가하여 다음 실행에서 반복되지 않도록 하십시오.
규칙
타이포그래피
AI 도구는 소수의 동일한 폰트를 사용하므로, 이러한 폰트만으로도 프로젝트가 생성된 것처럼 읽힙니다. 사용자가 제공한 브랜드 가이드라인의 일부이거나 아래 로고 폰트 규칙이 적용되는 경우를 제외하고, 어떤 역할에서든 이 목록의 어떤 폰트도 사용하지 마십시오:
| 역할 | 금지된 폰트 |
|---|---|
| 산세리프 | Inter, Inter Tight, Geist, Roboto, Open Sans, Poppins, Montserrat, Lato, Manrope, DM Sans, Plus Jakarta Sans, Outfit, Figtree, Urbanist, Sora, Lexend, Nunito, Nunito Sans, Raleway, Work Sans, Rubik, Onest, Space Grotesk, Satoshi, General Sans, Cal Sans, Bricolage Grotesque, Syne, IBM Plex Sans, Source Sans 3, Arial, Helvetica (선택된 면으로서) |
| 세리프 | Playfair Display, Instrument Serif, Fraunces, DM Serif Display, Lora, Merriweather, Cormorant Garamond, EB Garamond, Libre Baskerville |
| 모노 | JetBrains Mono, Geist Mono, Fira Code, Fira Mono, Space Mono, Roboto Mono, IBM Plex Mono, Source Code Pro, Ubuntu Mono |
| 기본 | 아무것도 선택되지 않아 사용된 단순 system-ui 또는 Tailwind 기본 스택 |
기본 폰트. 기본 폰트는 로고에 설정된 폰트 또는 사용자가 정의한 폰트입니다. 나머지 타이포그래피 시스템은 이에 따라 결정됩니다.
로고 폰트. 로고가 특정 폰트로 설정된 경우 (텍스트 로고, 워드마크 컴포넌트 또는 로고의 CSS나 SVG에 명명된 폰트), 해당 폰트가 금지 목록에 있더라도 로고에 유지됩니다. 그런 다음 두 가지 경로 중 하나를 선택하고 보고서에 어느 것인지 명시하십시오:
- A. 로고 따르기. 로고 폰트가 사이트의 기본 폰트가 되며 정확히 그 폰트를 사용해야 합니다.
- 로고가 세리프: 제목에 정확히 동일한 세리프를 사용하십시오. 본문 텍스트는 산세리프입니다.
- 로고가 산세리프: 브랜드 특성이 명확히 맞는 경우에만 제목이 세리프를 사용할 수 있으며, 이는 위험한 선택입니다. 그렇지 않으면 제목은 산세리프를 유지하며, 이상적으로는 정확한 로고 폰트 또는 매우 유사한 폰트를 사용합니다.
- B. 로고 전용. 로고 폰트는 로고에만 유지되고 나머지 부분의 폰트는 선택합니다. 로고 폰트는 여전히 아래 폰트 제한에 포함됩니다.
로고 폰트 규칙은 의도적으로 디자인된 로고에만 적용됩니다. 로고가 코드로 생성된 경우 (소유자를 위한 제안 참조), 해당 텍스트는 기본 폰트일 뿐이므로 새 제목 폰트를 지정하고 로고를 '사용자를 위한' 섹션에 추가하십시오.
페어링 규칙.
- 전체 사이트에 하나 또는 두 개의 폰트, 로고 포함. 절대 더 많이 사용하지 마십시오.
- 절대 두 개의 세리프를 사용하지 마십시오.
- 기본 폰트가 세리프: 사이트의 모든 세리프는 동일한 세리프이고, 본문 텍스트는 하나의 산세리프입니다. 최대 두 개의 폰트.
- 기본 폰트가 산세리프: 사이트의 모든 텍스트는 동일한 산세리프를 사용합니다. 일부 제목을 구분하기 위해서만 두 번째 산세리프를 추가할 수 있습니다.
- 제품에 코드 블록이 있는 경우 시스템 모노스페이스 스택(
ui-monospace, SFMono-Regular, Menlo, monospace)을 사용하며, 이는 선택된 폰트로 간주되지 않습니다.
폰트 선택. 로고 폰트가 없고 사용자로부터 폰트가 제공되지 않은 경우, 직접 기본 폰트를 선택하고 페어링 규칙을 적용하십시오:
- 먼저 제품을 읽으십시오: 무엇을 하는지, 누가 사용하는지, 카피의 어조는 어떤지. 그 특성에 맞는 얼굴을 선택하고 보고서에 그 이유를 한 문장으로 작성하십시오.
- 명백한 두 번째 선택을 피하십시오. 이러한 종류의 제품에 대해 가장 먼저 떠오르는 폰트는 아마도 금지 목록에 들어갈 가능성이 높습니다. 동일한 역할을 하는 덜 흔한 폰트를 선택하십시오.
- 라이선스는 웹에서 무료 상업적 사용을 허용해야 합니다 (SIL 오픈 폰트 라이선스 또는 이와 유사). 출처: Google Fonts (상위 결과 제외), Fontshare, Velvetyne, Collletttivo, The League of Moveable Type, 파운드리 무료 패밀리.
사이트의 모든 폰트에 대해:
- 패밀리당 최대 세 가지 굵기.
- 폰트는 레포지토리에 있어야 합니다.
woff2파일을 프로젝트에 다운로드하고 (예:public/fonts/)@font-face,next/font/local또는 빌드 타임에 번들링된@fontsource/*패키지로 로드하십시오. Google Fonts, Adobe Fonts, Bunny 또는 기타 외부 호스트에서 런타임에 폰트를 로드하지 마십시오. 모든 페이지 뷰가 해당 호스트에 방문자 데이터를 보내기 때문입니다. 유지하는 폰트를 포함하여 모든fonts.googleapis.com,fonts.gstatic.com,use.typekit.net링크,@import및next/font/google가져오기를 제거하십시오.font-display: swap을 사용하십시오. - 선택한 폰트 뒤에 적절한 폴백 스택을 유지하십시오.
- 폰트를 한 곳에서 설정하고 (토큰, Tailwind
fontFamily, 루트 CSS) 다른 모든 폰트 선언을 제거하십시오.
카피
가볍게 카피를 편집하십시오. 텍스트를 다시 작성하거나, 의미, 어조, 길이를 변경하거나, 새 문장을 추가하지 마십시오. 아래 나열된 AI 표시를 제거하고 제거로 인해 구문이 깨진 경우에만 부드럽게 수정하십시오. 표시를 제거한 후에도 문장이 여전히 읽힌다면, 거기서 멈추십시오.
제거할 항목:
- Em 대시 및 간격이 있는 en 대시 (
—,–). 마침표, 쉼표 또는 콜론 중 원본에 가장 가깝게 유지하는 것으로 교체하십시오. - 강조, 아이러니 또는 의역에 사용된 따옴표. 제거하고 단어는 유지하십시오. 따옴표는 정확한 단어 그대로의 인용구 주위에만 남습니다.
- 장식적 구분선
·,•,|또는/와 같이 구문을 연결하는 데 사용됩니다. 완전히 제거하십시오. 절대 마침표나 다른 구두점으로 대체하지 마십시오. 구문의 운명은 위치에 따라 다릅니다:- 히어로, 가격 카드, 주요 판매 문구: 구문을 FUD 행, 즉 각각 작은 아이콘과 레이블이 있는 짧은 항목의 가로 행으로 전환하십시오. 프로젝트의 아이콘 세트를 사용하거나, 없으면 인라인 SVG를 사용하십시오. 모든 아이콘은 하나의 크기와 단색이어야 하며, 배경 상자가 없어야 합니다 (시각 요소 규칙 참조). 행은 모바일에서 깔끔하게 줄바꿈되어야 합니다.
- 보조 단락, 도움말 텍스트, 캡션, 푸터: 구분선을 삭제하십시오. 구분선 없이도 여전히 일반 텍스트로 읽히는 경우에만 구문을 유지하고, 그렇지 않으면 가장 중요한 구문을 유지하고 나머지는 버리십시오.
- "X 뿐만 아니라, Y" 구조 및 그 유사어: "X가 아니라, Y입니다", "X 그 이상", "Y를 위한 X". 긍정적인 절반을 유지하십시오.
- 레이블을 반복하는 설명 및 필요하지 않은 옵션 아래의 설명. 제거하십시오.
- 기능 UI의 판매적 또는 암시적 설명. macOS나 Photoshop에서처럼 짧고 중립적으로 만드십시오: 그것이 무엇인지 또는 무엇을 하는지 말하십시오.
예시:
| 변경 전 | 변경 후 |
|---|---|
팀을 위해 만들어졌습니다 — 개인만을 위한 것이 아닙니다. | 팀을 위해 만들어졌습니다. |
히어로: 빠름 · 프라이빗 · 오픈소스 | 세 항목의 FUD 행: 볼트 아이콘 + 빠름, 자물쇠 아이콘 + 프라이빗, 코드 아이콘 + 오픈소스. 프로젝트 세트의 SVG 아이콘, 절대 이모지 사용 금지 |
도움말: 매일 업데이트 · 2분 읽기 | 매일 업데이트 |
노트를 위한 당신의 "두 번째 두뇌" | 노트를 위한 당신의 두 번째 두뇌 |
할 일 앱이 아니라, 시스템입니다. | 작업을 위한 시스템. |
다크 모드 — 밤에 눈을 편안하게 해주는 더 어두운 테마로 전환합니다. | 다크 모드 (설명 없음) |
자동 저장: 원활한 자동 저장으로 작업을 다시는 잃지 마세요! | 자동 저장: 입력하는 대로 변경 사항을 저장합니다. |
…
시각 요소
- 넓은 표면의 유리 효과. 반투명 배경, 뒤틀림, 노이즈 텍스처 등이 있는 유리 효과는 앱의 주요 배경, 사이드바, 헤더, 히어로, 카드 배경에 사용하지 마십시오. 아바타, 모달 오버레이, 작은 플로팅 요소에는 사용할 수 있지만, 그런 경우에도 단순히 약간의 투명도와 블러만 사용하고 노이즈나 뒤틀림은 사용하지 마십시오.
- 색상이 들어간 아이콘 박스. 아이콘 주위에 배경 상자가 있는 경우 (예: 기능 카드의 아이콘), 투명하게 만들거나, 배경이 필요하면
oklch(0 0 0 / 0.04)와 같은 매우 미묘한 색조를 사용하십시오. 절대 고유한 배경색(파란색 상자, 녹색 상자 등)을 사용하지 마십시오. - 강조 막대 콜아웃. 왼쪽에 색상 막대가 있는 인용문, 알림, 배너. 대신 테두리 상자 또는 일반 상자에 아이콘을 사용하십시오.
- 상태 표시 점. 앱이 실시간임을 보여주는 녹색 점은 대시보드나 관리자 패널에서 실시간 데이터 상태를 표시하는 경우에만 유지하십시오. 다른 모든 곳에서는 제거하십시오.
- 간격이 있는 대문자 눈썹. 간격이 넓은 대문자 작은 텍스트 (예:
F E A T U R E S). 일반 텍스트로 변경하고text-transform: uppercase를 사용하십시오. - 미묘함이 없는 그라데이션. 텍스트, 배경, 테두리에 사용되는 밝고 대비가 강한 그라데이션. 더 부드러운 그라데이션을 사용하거나 단색으로 변경하십시오.
- 쓸데없는 장식. 장식적인 배경 도형, 패턴, 애니메이션. 목적이 없는 것은 제거하십시오.
- 과도한 카드 그림자. 그림자가 요소 주위에 별도의 테두리를 만들 정도로 큰 경우. 더 작고 가벼운 그림자를 사용하거나 제거하십시오.
모션 및 효과
- 환영 애니메이션. 페이지 로드 시 모든 것이 페이드 인, 슬라이드 인, 블러 인되는 경우. 첫 번째 뷰포트 요소(히어로, 메인 제목)만 애니메이션을 유지할 수 있습니다. 페이지 로드 시 보이는 다른 모든 것은 정적이어야 합니다.
- 스크롤 애니메이션.
framer-motionwhileInView또는IntersectionObserver로 구동되는 페이드 인, 슬라이드 인, 확대. 스크롤 구동 애니메이션을 사용하지 마십시오. 뷰포트에 들어갈 때 요소가 단순히 나타나게 하십시오. 스크롤 위치를 표시하는 진행률 표시줄은 유지할 수 있습니다. - 기본
framer-motioninitial/animate. 설정된 모든 항목을 제거하십시오:initial={{ opacity: 0 }} animate={{ opacity: 1 }}. 요소가 준비되면 즉시 표시되어야 합니다. - 호버 시 이동. 요소가 호버 시 위나 옆으로 움직이는 경우.
transform: translateY(-2px)또는 이와 유사한 것을 사용하는 모든 것. 제거하거나 비활성화하십시오. - 로딩 스피너. 전체 콘텐츠 영역을 덮는 경우가 많습니다. 앱의 경우
skeleton로더를 사용하십시오. 사이트의 경우 스피너가 아닌 정적 자리 표시자를 사용하십시오.
오버레이
- 모달:
- 배경: 약간 어둡게 (예:
oklch(0 0 0 / 0.5)), 블러 없음. - 닫기:
x버튼에 레이블 지정, 또는Escape키 닫기에 대한 툴팁을 제공하십시오. 하나의 탭으로 도달 가능하고 화면에 표시되어야 합니다. - 포커스 트랩: 모달이 열리면 포커스를 첫 번째 포커스 가능한 요소로 이동시키고,
Escape키가 닫힙니다.
- 배경: 약간 어둡게 (예:
- 알림/배너:
- 닫기 가능해야 합니다 (상태 표시줄 알림 제외).
x버튼에 레이블을 지정하거나 "닫기" 링크/버튼을 제공하십시오.
툴팁
- 모든 툴팁은 키보드로 트리거 가능해야 합니다 (포커스 +
Escape). - 마우스 호버 시 300ms 지연 후 표시됩니다.
- 내용은 2~3 단어 + 단축키입니다 (있는 경우). 절대 더 길지 않습니다.
- 절대 필요한 정보를 숨기지 마십시오.
키보드
- 모든 대화형 요소는 키보드로 접근 가능하고 시각적 포커스 표시기가 있어야 합니다.
- 포커스 표시기는 브라우저 기본값보다 강해야 합니다 (예:
outline: 2px solid+outline-offset: 2px). tabindex="0"는 순서대로 포커스되어야 하는 대화형 요소가 아닌 것에만 사용하십시오. 대화형 요소는 기본 탭 순서를 사용해야 합니다.aria-label,aria-labelledby,role속성을 검토하십시오. 빠졌거나 잘못된 것은 수정하십시오.- 탭 순서가 잘못된 경우 양식 필드의
tabindex를 수정하십시오.
컴포넌트
- 버튼: 모든 버튼에는
Button공유 컴포넌트를 사용하십시오.variant,size,disabled상태가 있어야 합니다. 절대<a>를 버튼 스타일로 사용하지 마십시오. - 다이얼로그: 모든 모달에는
Dialog컴포넌트를 사용하십시오. - 툴팁 및 드롭다운: 동일합니다. 공유 컴포넌트를 사용하십시오.
- 뱃지: 일관된 변형 시스템을 사용하십시오: 기본, 보조, 성공, 경고, 오류. 절대 인라인 스타일 뱃지를 사용하지 마십시오.
- 배너: 닫기 가능하고 타임아웃이 있어야 하며 스크린리더에 의해 발표되어야 합니다.
- 입력 필드:
type,placeholder,required,disabled,aria-describedby, 오류 메시지가 있어야 합니다.- 오류 상태에는 빨간색 테두리와 설명 텍스트가 있어야 합니다.
- 비활성화된 상태는 흐리게 표시되어야 합니다.
이미지
alt텍스트가 누락된 이미지를 수정하십시오.alt=""는 장식용 이미지에 사용하십시오.loading="lazy"를 뷰포트 밖 이미지에 추가하십시오. 첫 번째 뷰포트 이미지는eager를 유지하십시오.width및height속성을 추가하여 레이아웃 이동을 방지하십시오.- 큰 이미지 파일을 압축하거나 WebP/AVIF로 변환하지 마십시오 (이는 빌드 파이프라인 작업입니다).
랜딩
- 히어로:
- 단일, 명확한 가치 제안.
- 하나의 기본 CTA, 하나의 보조 CTA (선택 사항).
- 배경 비디오는 트렌디해 보이지 않는 경우에만 유지하십시오. 정적 이미지가 선호됩니다.
- 특징:
- 각 특징은 고유한 아이콘과 짧은 설명이 있어야 합니다.
- 아이콘은 장식이 아닌 개념을 전달해야 합니다.
- 가격:
- 간단하고, 숨겨진 비용이 없습니다.
- 표는 읽기 쉽고 모바일에서 반응형이어야 합니다.
- CTA는 명확합니다: "시작하기", "가입하기".
소유자를 위한 제안 (수정하지 마십시오)
이러한 항목은 수정이 아니라 향후 개선을 위한 제안입니다. 보고서 끝에 이에 대한 섹션을 추가하고, 각각을 "소유자에게 제안"으로 표시하십시오. 수정하지 마십시오.
- 코드 생성 로고 (예:
svg원, 직사각형,path에서<text>또는font-family를 문자열로 포함하지 않은 경우). 실제 로고로 교체할 것을 제안하십시오. - 프레임워크 기본값. 중앙 정렬된 최대 폭 64rem의 고정 너비 페이지. 더 흥미로운 레이아웃을 제안하십시오.
- 반응형이 아닌 디자인. 모바일 중단점이 누락되었거나 잘못된 경우.
- 접근성 감사.
axe-core또는 Lighthouse로 실행할 것을 제안하십시오. - 성능 감사. Lighthouse로 실행할 것을 제안하십시오.
탐지 패턴
# 폰트
rg "font-family:" --include='*.css' --include='*.tsx' --include='*.jsx' --include='*.vue' --include='*.svelte'
rg "next/font/google"
grep -r "fonts.googleapis.com" --include='*.tsx' --include='*.jsx' --include='*.css' --include='*.html'
grep -r "fonts.gstatic.com" --include='*.tsx' --include='*.jsx' --include='*.css' --include='*.html'
# 타이포그래피 아티팩트
grep -rn "—" --include='*.tsx' --include='*.jsx' --include='*.vue' --include='*.svelte' --include='*.mdx'
grep -rn "–" --include='*.tsx' --include='*.jsx' --include='*.vue' --include='*.svelte' --include='*.mdx'
# 유리 효과
rg "backdrop-filter: blur" --include='*.css' --include='*.tsx' --include='*.jsx'
rg "backdrop-blur" --include='*.css' --include='*.tsx' --include='*.jsx'
rg "backdropBlur" --include='*.tsx' --include='*.jsx'
# 모션
rg "framer-motion" --include='*.tsx' --include='*.jsx'
rg "initial={{ opacity: 0" --include='*.tsx' --include='*.jsx'
rg "whileInView" --include='*.tsx' --include='*.jsx'
# 강조 막대
rg "border-left:" --include='*.css' --include='*.tsx' --include='*.jsx'
rg "borderLeft:" --include='*.tsx' --include='*.jsx'
# 장식적 구분선
rg "·" --include='*.tsx' --include='*.jsx' --include='*.vue' --include='*.svelte' --include='*.mdx'
rg "•" --include='*.tsx' --include='*.jsx' --include='*.vue' --include='*.svelte' --include='*.mdx'
# 색상 박스
rg "background.*box" --include='*.css' --include='*.tsx' --include='*.jsx'
rg "icon.*box" --include='*.css' --include='*.tsx'
rg "iconContainer" --include='*.tsx' --include='*.jsx'
주의사항
(없음. 이 섹션은 이후 실행에서 업데이트됩니다.)
보고서
이것은 최종 채팅 메시지여야 합니다. 아래 형식을 정확히 따르고, 출력 시작 전에 "---"를 사용하여 메시지의 첫 번째 줄에 있도록 하십시오.
---
## 변경 사항
[변경 사항 요약, 3~4 문장]
## 적용된 규칙
- 규칙 1: [무엇이 어디에]
- 규칙 2: [무엇이 어디에]
- ...
## 건너뛴 규칙
- 규칙 X: [이유]
- ...
## 스크린샷
| 변경 전 | 변경 후 |
|---------|--------|
|  |  |
| ... | ... |
## 수정되지 않은 발견 사항
- [발견 사항 1] – [이유]
- [발견 사항 2] – [이유]
## 소유자를 위한 제안
- [제안 1]
- [제안 2]
## 규칙 파일
- DESIGN_RULES.md [생성됨/업데이트됨]
- AGENTS.md [생성됨/업데이트됨/참조 추가됨]
- CLAUDE.md [생성됨/업데이트됨/참조 추가됨]