julio-antislop-design은(는) 무엇을 하나요?
생성된 페이지는 본 모든 페이지의 평균과 비슷합니다. 거짓된 것은 없지만, 결정된 것도 없습니다. 이 스킬은 결함을 결정으로 대체합니다: 아이디어는 주제에서 비롯되고, 방향은 실제 레퍼런스와 평균에서 벗어난 선택에서 나오며, 최소 기준은 접근성, 정직성, 성능을 보호하고, 전달하기 전에 만든 것을 확인합니다. 틱만 제거하는 것으로는 충분하지 않습니다. 빈 깨끗한 페이지도 하나의 틱입니다(references/originality.md).
1. 경로 선택
| 요청 | 경로 |
|---|---|
| 작은 요청: 컴포넌트, 섹션, 설정, 수정 또는 '빨리 해줘' | 빠른 (§3) |
| 새 페이지, 새 사이트, 새 화면, 새 시스템 | 전체 (§4) |
| 기존 작업 재구성 | 전체, 리디자인 변형(references/redesign.md) |
| 디자인 검토 | references/critique.md의 체크리스트와 references/tells.md 목록 사용, 구축 없이 |
2. 모드 선택
모든 규칙은 방문자가 이 표면에서 무엇을 성공해야 하는지에 따라 달라지며, 제품 자체에 의존하지 않습니다.
| 모드 | 방문자가 성공하는 경우… | 표면 |
|---|---|---|
| 설득 | 결정하고 행동 | 랜딩 페이지, 마케팅, 가격 페이지 |
| 운영 | 작업 완료 | 앱, 대시보드, 관리자 페이지, 설정 |
| 읽기 | 이해 | 문서, 기사, 가이드, 도움말 |
| 경험 | 작품 속에 있음 | 포트폴리오, 갤러리, 쇼케이스 |
요청에 두 개의 표면이 있는 경우: 각각 해당 모드에서 처리하며, 팔레트와 타이포그래피는 공유합니다.
사용자와 함께 진행하기
사용자를 침묵 속에서 기다리게 하지 마십시오: 일찍 질문하고, 모든 질문에 제안하며, 무언가 자리 잡을 때마다 보여주십시오. 전체 경로에는 네 번의 만남(브리프 시트, 처음 세 화면, 첫 번째 버전, 전달)이 있으며, 각 만남에는 권장 제안이 있습니다. 그 사이에는 보여줄 것이 없더라도 10개 이상의 작업을 연속으로 수행하지 마십시오. 자세한 내용은 references/intake.md, '리듬' 참조.
3. 빠른 경로
DESIGN.md와PRODUCT.md가 있으면 읽고 따릅니다. 질문은 최대 한 개, 오직 사실이 막힐 때만 합니다.- 최소 기준(§5)과 모드별 기본값(
references/defaults-by-mode.md)을 적용합니다. 모든 것은 기존 토큰을 통하거나, 토큰이 없는 경우 작은 선언된 스케일을 사용합니다. node scripts/check-tokens.mjs <파일명>과node scripts/check-render.mjs <파일명>을 오류 없이 실행합니다. 390px와 1440px에서 캡처를 확인합니다.- 3줄 보고서: 변경된 사항, 통과한 검사, 실행할 수 없었던 항목.
전체 프레이밍, 드로잉, 세 개의 히어로는 없습니다. 요청이 커지면(전체 페이지) 전체 경로로 전환합니다.
4. 전체 경로, 12단계
각 단계의 세부 사항: references/process.md. 1~8단계는 코드 작성 전에 수행합니다.
- 프로젝트, 모드, 실제 사용 가능한 이미지 읽기.
- 한 번에 프레이밍: 프로젝트, 취향(
DESIGN.md를 채우는 모든 것), 자료; 최대 12개의 질문, 한 번에 검증된 브리프 시트. 명시적인 위임('카르트 블랑슈') 또는 사용자 부재 외에는 취향을 묻지 않습니다.references/intake.md. - 주제 목록 작성: 고유한 8~12개의 요소; 실제적, 제시 가능, 부재.
PRODUCT.md. - 주장 작성: 각 섹션에 대한 주장과 증거.
- 실제 레퍼런스 보기:
references/site-models.md의 사이트 3개, 업계 외 사이트 포함;scripts/board.mjs로 캡처. - 방향 드로잉:
node scripts/roll.mjs --mode <모드> --brief "…" --log direction-log.md(원형, 카드, 색상, 폰트, 위험), 5가지 방향 중 가장 가능성 높은 2개는 제외.references/originality.md. - 아이디어 공식화('[주제의 한 가지]가 [프로세스]가 된다', 경쟁사 테스트), 살아있는 것,
DESIGN.md;scripts/explore.mjs로 처음 세 화면 비교, 하나만 선택. - 모든 텍스트를 코드보다 먼저 작성; 320px에서 제목은 최대 2줄.
- 움직임 없이 구축: 먼저 토큰(색상, 폰트, 타이포그래피 스케일, 간격 스케일), 히어로, 섹션, 비주얼(사진 없음:
references/visuals.md, 처음 두 화면 내 주제의 시각적 앵커), 살아있는 것. - 검사:
check-tokens.mjs(코드),check-render.mjs --shots(렌더링된 페이지),npx impeccable detect, 성능; 마무리(references/finish.md) 및 30가지 UX 법칙 검사(references/ux-principles.md). - 새로운 시각으로 판단 받기:
references/critique.md체크리스트, 독창성 축과 데자뷰 테스트; 수정, 최대 3회. - 움직임 추가, 재검사, 보고서와 함께 전달.
5. 절대 최소 기준
결코 해제되지 않습니다: 취향, 브리프, 외부 리소스에 의해서도 해제되지 않습니다.
- A1 접근성: WCAG 2.2 AA (대비 4.5:1, 큰 텍스트 및 컨트롤 3:1), 포커스 가시성, 키보드, 24px 타겟(모바일은 44px 목표), 건너뛰기 없는 제목, 대체 텍스트, 축소된 움직임, 운영 모드 외 JavaScript 없이 콘텐츠.
- A2 정직성: 숫자, 인용, 리뷰, 로고, 고객, 기능을 허위로 만들지 않음; 예제 콘텐츠는 보고서에 나열되고 페이지에 한 번만 표시.
- A3 추적 가능성: 모든 폰트, 컴포넌트, 이미지, 레퍼런스는 실제 검증된 출처와 사용을 포괄하는 라이선스가 있어야 함.
- A4 기밀성: 서면 동의 없이 고객의 데이터, 목업, 캡처를 타사 서비스에 제공 금지.
- A5 성능: LCP ≤ 2.5초, INP ≤ 200ms(실험실 TBT), CLS ≤ 0.1; 그렇지 않으면 효과는 정적 이미지가 됩니다.
references/performance.md. - A6 기술: 색상, 폰트, 크기, 간격은 토큰으로만;
transition: all이나width,height,top,left애니메이션 금지; 320~1920px에서 수평 스크롤 금지; 히어로는dvh또는svh사용; 컨테이너 상한. - A7 브리프: 명시적인 지시는 해제 가능한 기본값보다 우선하지만, A1~A6보다는 우선하지 않음.
6. 해제 가능한 기본값, 핵심
각각은 아이디어나 브리프와 관련된 서면 이유와 함께 해제됩니다. 전체 표: references/defaults-by-mode.md; 시대에 뒤처진 틱: references/tells.md.
- 아이브로우, 간격이 넓은 대문자, 실제 시퀀스 없는 01/02/03 번호 매기기 금지.
- 보라색 그라데이션, 그라데이션 텍스트, 글로우, 장식용 유리, 아이콘-제목-텍스트가 동일한 카드 행, 이모지를 아이콘으로 사용 금지.
- 브랜드 이유 없이 반사적으로 폰트 선택 금지(
references/typography.md); 폰트가 제공되지 않은 경우 3쌍 제안(references/font-catalog.md). - 모듈식 타이포그래피 스케일 및 세 가지 수준의 간격 스케일 사용, 그 외는 없음(
references/spacing.md). - 하나의 배경, 하나의 잉크, 하나의 악센트, 악센트는 화면당 최대 약 4번.
- 진부한 수정(크림, 세리프, 테라코타) 또는 우리 자신의 '깨끗한 반-슬롭' 수렴 금지(
references/originality.md§1).
7. 언제 무엇을 읽을까
| 상황 | 파일 |
|---|---|
| 12단계 세부 사항, 전달 목록, 보고서 형식 | references/process.md |
| 프레이밍: 질문, 취향, 자료, 브리프 시트 | references/intake.md |
| 모드별 규칙 | references/defaults-by-mode.md |
| 인벤토리, 아이디어, 이미지, 사진 없는 제품 | references/idea-and-direction.md |
| 사진 없는 비주얼, 획득한 점수별 분류; 텍스트 없는 주제 테스트 | references/visuals.md |
| 마무리: 판정관이 발견한 결함 및 검사 | references/finish.md |
| 드로잉, 원형, 제약, 위험, 세 개의 히어로, 데자뷰 | references/originality.md |
| 랜딩 페이지, 히어로, 폼, 유리, 제품 일러스트레이션, 벤토 | references/persuade.md |
| 탐색 및 푸터(18 + 15 모델) | references/nav-footer.md |
| 앱, 대시보드, 그래프, 폼 | references/operate.md |
| 문서, 기사, 포트폴리오, 갤러리 | references/read-and-experience.md |
| 리디자인 | references/redesign.md |
| 팔레트 | references/color.md |
| 폰트 및 타이포그래피 스케일; 제안할 폰트 | references/typography.md, references/font-catalog.md |
| 간격 및 리듬 | references/spacing.md |
| 움직임, 효과, 코드로 된 비디오 | references/motion-and-video.md |
| 모드별 성능 | references/performance.md |
| 시대에 뒤처진 AI 틱 | references/tells.md |
| 30가지 UX 법칙, 적용 및 UX 검사 | references/ux-principles.md |
| 실제 모델 사이트; 갤러리, 라이브러리, 라이선스 | references/site-models.md, references/resources.md |
| 새로운 시각의 비평 | references/critique.md |
작업에 필요한 것만 로드하세요.
8. 전달
최소 기준, check-tokens.mjs, check-render.mjs, 감지기, 캡처, 비평(독창성 최소 4/5, 데자뷰 테스트에서 알려진 스타일 없음), 방향 로그가 모두 통과될 때까지 전달하지 마십시오. 전체 목록 및 보고서 형식: references/process.md. 실행되지 않은 검사를 선언하지 마십시오.