1-Pankaj/slopless-ui

Slopless UI

슬롭(Slop)은 기계가 만든 듯한 외관입니다. 기본 그라데이션 히어로, 깜빡이는 점, 모든 헤딩에 달린 아이콘, 모든 액션에 붙은 버튼, em dash와 형용사로 가득한 카피, 그리고 리뷰에서 방어할 수 없는 결정들입니다. 현대의 생성형 인터페이스는 깨진 마크업 때문에 실패하는 경우가 드뭅니다. 그들은 서로 대체 가능하기 때문에 실패합니다. 즉, 능숙하고, 세련되었지만, 기억할 수 없습니다.

이 스킬은 에이전트의 결과물이 그러하지 않도록 존재합니다. 어떤 코드보다 먼저 서면 방향을 제시하고, 빌드 중에는 규율을 부여하며, 결과물을 누구에게 보여주기 전에 검증 단계를 거치게 합니다. 더 많은 스타일링을 추가하지 않습니다. 결정을 추가하고, 그런 다음 마무리합니다.

방법

다음 순서대로 작업하세요. 각 단계는 하나의 작업을 가지며, 각 단계의 세부 사항은 하나의 참조 파일에 있습니다. 해당 단계에 도달했을 때만 참조 파일을 읽으세요.

1. 상황 파악

코드를 작성하기 전에, 이미 존재하는 결정들을 찾으세요: DESIGN.md 또는 토큰 파일, 프로젝트의 CSS 변수, tailwind.config.* 또는 @theme 블록, 기존 컴포넌트들. 프로젝트에 이미 스타일이 있다면, 그것을 정확히 따르세요. 당신의 임무는 일관성이 먼저이고, 취향은 그 다음입니다. 사용자가 스타일 변경을 요청하지 않는 한 아무것도 다시 스타일링하지 마세요.

2. 브리프 작성

어떤 코드보다 먼저 네 줄을 작성하세요. 이것은 자신과의 계약이며, 이후 단계에서 이를 확인합니다.

1. 대상 (Audience): 누가 이것을 사용하며, 그들은 여기서 10초 안에 무엇을 하는가?
2. 느낌 (Feeling): 리뷰에서 방어할 수 있는 형용사 한두 개 (예: 차분한, 밀도 높은, 따뜻한, 정확한).
3. 시그니처 (Signature): 낯선 사람이 기억할 한 가지. 이름을 지을 수 없다면 결과는 평범해질 것입니다. 하나를 고르세요: 특이한 서체, 하나의 굵은 숫자, 하나의 예상치 못한 색상, 하나의 강력한 구성.
4. 모드 (Mode): 설득 (랜딩, 가격), 운영 (대시보드, 앱), 읽기 (문서, 기사), 또는 경험 (포트폴리오, 갤러리). 모드는 이후의 모든 결정을 바꿉니다.

전체 가이드, 네 가지 모드, 일반적인 웹사이트 카테고리를 위한 28가지 시작 방향 라이브러리: references/direction.md.

3. 토큰으로 결정하기

브리프를 형용사가 아닌 실제 값으로 바꾸세요: 가중치와 대체 스택이 있는 두 개의 폰트 패밀리, 역할이 있는 하나의 강조 색상, 간격 척도, 반경 척도, 모션 지속 시간 및 이징. CSS 변수 또는 프레임워크의 토큰 형식으로 작성하세요. "깔끔하고 현대적인"은 결정이 아닙니다. --accent: #8E3B2F가 결정입니다.

• 타이포그래피: references/typography.md
• 색상: references/color.md
• 모션: references/motion.md

4. 결에 맞게 구축하기

그런 다음 구축하는 동안 규율 규칙을 적용하세요:

• 법칙이 먼저입니다. 하나의 그리드, 하나의 열, 4 또는 8포인트 간격, 뷰당 하나의 초점, 모든 8가지 컴포넌트 상태, 키보드 및 대비 기준. 이것들은 스타일이 아닙니다. 모든 디자인 시스템이 동의하는 물리학입니다: references/foundations.md.
• 뷰당 하나의 초점, 하나의 기본 액션. 계층 구조는 상자에서 나오는 것이 아니라 크기, 무게, 공간에서 나옵니다.
• 버튼은 약속입니다. 뷰당 하나의 채워진 버튼이 정상입니다. 보조 액션은 링크 또는 조용한 버튼입니다. 영역에 두 개 이상의 버튼이 표시되면 다시 디자인하세요: references/icons-and-buttons.md.
• 아이콘은 가구입니다. 단어가 더 명확합니다. 아이콘이 자리를 얻으면, 하나의 세트, 하나의 무게, 일관된 크기를 사용하세요: references/icons-and-buttons.md.
• 카피는 디자인입니다. 짧은 문장, 구체적인 명사, 동사 우선 버튼, em dash 없음, 전문 용어 없음: references/copy.md.
• 모든 상태가 존재합니다: 비어 있음, 로딩 중, 오류, 긴 콘텐츠. 완벽한 다섯 개의 행과 해피 패스는 완성된 화면이 아닙니다.
• 페이지에 맥박이 있습니다. 컨트롤은 누를 때 응답하고, 전환은 들어온 방식대로 나가며, 하나의 진입이 첫 1초를 안무하고, 섹션은 스크롤 시 한 번 나타납니다. 기껏해야 브리프에 명명된 하나의 시그니처 앰비언트가 있습니다. 필요한 모션 예산과 모든 곡선: references/motion.md.
• 텍스트 블록은 왼쪽 정렬합니다. 짧은 한 줄 요소만 중앙 정렬합니다.

5. 전달 전에 마무리하기

확인하지 않은 UI는 절대 제시하지 마세요. 순서대로 마무리 작업을 수행하세요:

1. python3 scripts/foldcheck.py <변경된 파일> 을 실행하고 보고된 모든 오류를 수정하세요.
2. 도입한 모든 텍스트 쌍에 대해 python3 scripts/contrast.py <전경색> <배경색> 을 실행하세요. 본문 텍스트는 4.5:1 이상이 필요합니다. 큰 텍스트와 경계는 3:1이 필요합니다.
3. 실제 브라우저에서 렌더링하고 데스크톱 및 휴대폰 너비로 스크린샷을 찍으세요 (node scripts/finish.mjs <url-또는-파일> (Playwright 사용 가능한 경우), 그렇지 않으면 환경이 제공하는 브라우저 도구를 사용하세요).
4. 스크린샷을 눈을 가늘게 뜨고 보세요: 눈을 흐리게 하거나 이미지를 축소하세요. 계층 구조와 초점이 유지되어야 합니다.
5. 수정하고, 변경된 뷰만 다시 확인한 후, 세 번의 수정 패스를 넘기지 마세요.

전체 프로토콜, 정직성 라벨 및 보고 형식: references/verification.md.

타협 불가 사항

다음 패턴은 기계가 만든 것으로 읽힙니다. 튜토리얼에서 보여주더라도 기본적으로 금지된 것으로 취급하세요:

• 깜빡이거나, 맥동하거나, 튀거나, 떠다니는 점 및 장식물 (아무도 요청하지 않은 "입력 중" 표시기 및 빛나는 상태 표시 점 포함).
• 사이버펑크, 네온, 글리치, 신스웨이브, 베이퍼웨이브, 매트릭스 및 홀로그래픽 스타일링. 광선(Glow)은 광원이 없으므로 아무도 확신시키지 못합니다.
• 보라색에서 파란색, 남색에서 자홍색으로 이어지는 그라데이션 히어로, 그라데이션 텍스트, 콘텐츠 뒤의 흐릿한 색상 구체.
• 사용자 대상 텍스트의 em dash. 마침표, 쉼표 또는 괄호를 사용하세요. references/copy.md의 AI 전문 용어 목록도 마찬가지입니다.
• 아이콘, 글머리 기호 또는 UI 크롬으로 사용되는 이모지.
• 모든 헤딩에 아이콘, 모든 액션에 버튼.
• Lorem ipsum, "coming soon", 실제인 것처럼 제시된 가상의 사용 후기 또는 지표.
• 아이덴티티 폰트로 Inter, Roboto, Arial 또는 시스템 스택을 기본 사용.
• 전혀 움직이지 않는 페이지. 정적 출력은 조립된 템플릿으로 읽힙니다. references/motion.md의 모션 예산은 장식이 아닌 마무리의 일부입니다.

전체 카탈로그 및 수정 사항: references/anti-slop.md.

눈을 가늘게 뜨고 보는 테스트 (The squint test)

눈을 흐리게 하거나 (또는 스크린샷을 썸네일 크기로 축소하여) 다시 보세요. 흐릿한 상태에서도 세 가지가 유지되어야 합니다: 초점, 읽기 순서, 기본 액션입니다. 페이지가 회색 수프가 된다면, 문제는 계층 구조이며, 어떤 양의 세련미도 그것을 고칠 수 없습니다. 간격, 크기, 무게를 먼저 수정하세요. 이 테스트는 10초면 충분하며 어떤 체크리스트보다 더 많은 나쁜 디자인을 잡아냅니다.

사용자가 금지된 패턴을 요청하는 경우

때때로 사람은 진정으로 네온, 강한 그라데이션 또는 사이버펑크 테마를 원합니다. 그들과 싸우지 말고 설교하지 마세요. 잘 구축하세요: 실제 대비, 실제 계층 구조, 작동하는 상태, 절제된 모션. 한 줄로, 이 스킬이 기본적으로 그것을 반대하며 사용자의 선호를 따랐다고 한 번 말하세요. 금지 목록은 지시되지 않은 출력을 보호하는 것이지, 표현된 선호도를 보호하는 것이 아닙니다.

참조 맵

파일	읽는 시점
references/direction.md	2단계, 모든 새 페이지 또는 스타일 변경 시
references/typography.md	3단계, 글꼴 선택 또는 확인 시
references/color.md	3단계, 색상 선택 또는 확인 시
references/motion.md	3단계 (토큰), 4단계 (모션 패스: 예산, 진입, 나타남, 앰비언트, 축소 모션)
references/foundations.md	4단계, 레이아웃, 간격, 계층 구조, 상태 및 명명된 법칙
references/copy.md	4단계, 텍스트 작성 시 항상
references/icons-and-buttons.md	4단계, 액션, 컨트롤 및 아이콘
references/anti-slop.md	출력물이 나쁜 의미로 익숙하게 느껴질 때, 또는 리뷰 시
references/verification.md	5단계, 작업 완료를 말하기 전

보고

UI 작업을 짧은 보고서로 마무리하세요: 무엇이 구축되었는지, 브리프의 한 줄 느낌, references/verification.md의 검증 라벨 (시각적 검증됨, 정적 검증됨, 또는 검증되지 않음, 이유 포함), 그리고 완료되지 않은 모든 것. 결과물을 "픽셀 완벽" 또는 "완전히 테스트됨"이라고 절대 부르지 마세요. 당신이 한 일을 말하세요.

스크립트

의존성 제로, 네트워크 호출 없음, 원격 측정 없음. 경로는 이 파일의 폴더를 기준으로 합니다.

python3 scripts/foldcheck.py src/            # 기계 생성 패턴에 대한 정적 감사
python3 scripts/contrast.py "#201B12" "#F6F1E5"   # 쌍에 대한 WCAG 대비
node scripts/finish.mjs ./index.html          # 브라우저 패스: 스크린샷, 콘솔, 오버플로 (Playwright 필요)

foldcheck와 contrast는 항상 실행합니다. finish는 선택 사항이며 Playwright가 없을 때 우아하게 저하됩니다. 대신 환경이 제공하는 브라우저 도구를 사용하세요. 중요한 것은 도구가 아니라 보는 것이기 때문입니다.