mochi-redesign은(는) 무엇을 하나요?
안내된 리디자인 워크플로우입니다. 고정된 디자인을 적용하지 않습니다. 고정된 프로세스를 적용합니다: 사람을 이해하고, 컨셉을 찾고, 작은 디자인 시스템을 구축하고, 중요한 모든 것을 첫 화면에 카드로 배치하고, 세부 내용을 풍부한 팝업과 전용 페이지로 옮기고, 정직한 카피를 작성하고, 모든 변경 사항을 실제 화면 크기에서 확인한 후에야 보여줍니다.
실제 포트폴리오가 단순한 1열 템플릿에서 여러 차례의 소유자 피드백을 통해 벤토 스타일 사이트로 진화한 경험에서 추출되었습니다. 그 과정에서 얻은 교훈(무엇이 효과가 있었고, 무엇이 거부되었으며, 무엇이 망가졌는지)은 아래와 references/에 기록되어 있습니다.
출력물은 절대 이 스킬이 탄생한 사이트처럼 보여서는 안 됩니다. 동일한 훈련, 다른 정체성: 새로운 컨셉, 새로운 폰트, 새로운 색상, 새로운 시그니처 디테일. 만약 "스킬이 시키는 대로" 금잔화 브러시 스트로크, 마스코트, 벤토 그리드를 사용하려는 자신을 발견한다면 멈추고 1단계로 돌아가십시오.
실행 방법
인수는 선택적 자유 텍스트입니다. 예: /mochi-redesign client/ 또는 /mochi-redesign the home page only, keep the blog as is.
단계별로 순서대로 진행하십시오. 각 단계는 게이트에서 끝납니다: 소유자에게 결과(설명이 아닌 스크린샷)를 보여주고, 다음 단계로 넘어가기 전에 그들의 반응을 기다리십시오. 리디자인은 검토되지 않은 결정이 쌓일 때 실패합니다.
| 단계 | 먼저 읽을 파일 | 게이트 |
|---|---|---|
| 0. 인테이크 및 감사 | references/01-intake-audit.md | 소유자가 목표, 대상, 범위, 변경 불가 사항을 확인함 |
| 1. 컨셉 및 시스템 | references/02-concept-system.md | 소유자가 방향 하나를 선택함; 토큰이 기록됨 |
| 2. 콘텐츠 진실 | references/03-content.md | 소유자가 주장을 승인함 (과장 금지) |
| 3. 첫 화면 | references/04-layout.md | 모든 대상 크기에서 노트북 화면 하나에 맞음 |
| 4. 세부 계층 | references/05-interaction.md | 팝업이 내부에서 스크롤되고, 페이지를 잠그며, 레이아웃 이동이 없음 |
| 5. 보조 페이지 | references/06-content-pages.md | 목록 및 읽기 페이지가 시스템과 일치함 |
| 6. 미디어(선택 사항) | references/07-media.md | 실제 워크스루, 압축됨, 보이는 경우에만 재생 |
| 7. 다듬기 및 QA | references/08-qa.md | 클립 검사 통과, 두 테마, 모바일, 린트, 빌드 |
| 8. 인계 | references/09-feedback-and-handoff.md | 깔끔한 diff, 디자인 문서 업데이트, 소유자가 커밋 결정 |
references/10-anti-patterns.md는 첫 번째 시도에서 저지른 실수 목록입니다. 1단계 전에 한 번, 7단계 전에 다시 읽으십시오.
비협상 조건
- 변경 전에 먼저 보십시오. 기존 코드를 읽고, 사이트를 실행하고, 대상 크기에서 스크린샷을 찍으십시오. 코드만 보고 절대 리디자인하지 마십시오.
- 사이트당 하나의 정체성. 컨셉은 대상(사람이나 제품이 실제로 무엇인지)에서 비롯되어야 하며, 유행이나 이 스킬의 기원에서 비롯되어서는 안 됩니다.
- 중요한 모든 것은 첫 화면에. 방문자는 스크롤 없이 누구인지, 무엇인지, 증거(최고 작업)를 볼 수 있어야 합니다. 세부 내용은 다섯 화면 아래가 아닌 한 번의 클릭으로 접근할 수 있어야 합니다.
- 정직한 카피. 소유자가 인터뷰에서 지킬 수 없는 주장은 하지 마십시오. "매번", "항상", "모든"보다는 "연습한", "해본", "맞는 곳에"를 선호하십시오. 형용사 대신 증거(숫자, 출시된 제품)를 보여주십시오.
- 머릿속이 아닌 크기에서 확인하십시오. 모든 시각적 변경 후에는 클립 검사(
scripts/clip-check.mjs)와 최소 하나의 스크린샷을 따라야 합니다. 살펴보지 않은 변경을 "완료"라고 보고하지 마십시오. - 작고 되돌릴 수 있는 단계. 한 번에 하나를 변경하고, 보여주고, 듣습니다. 소유자가 어떤 것을 두 번 거부하면 추측을 멈추고, 미리보기와 함께 2~3개의 구체적인 옵션을 제시하고 선택하게 하십시오. 되돌리기를 요청하면 "비슷한" 재구축이 아니라 이전 버전을 정확히 복원하십시오.
- 운영 중인 것을 망가뜨리지 마십시오. 이전 경로가 작동하도록 유지하고, 관련 없는 페이지를 건드리지 말고, 변경할 필요가 없는 파일의 형식을 다시 지정하지 마십시오(포맷터 변경은 실제 diff를 숨깁니다). 요청 없이 커밋하거나 푸시하지 마십시오.
- 접근성 최소 기준. 키보드 접근 가능, 보이는 포커스, 실제 버튼과 링크,
prefers-reduced-motion존중, 두 테마 모두에서 대비 확인, 호버로만 전달되는 중요한 정보 없음.
"완료"의 모습
- 잘린 콘텐츠, 가로 스크롤 없이 노트북(1280×720 ~ 1920×1080)에 맞고 명확한 초점이 있는 첫 화면.
- 모든 새 컴포넌트가 사용하는 작고 문서화된 디자인 시스템(토큰, 서체, 반경, 모션 규칙).
- 긴 스크롤 대신 풍부한 세부 내용(대화상자 또는 페이지)을 여는 카드.
- 소유자가 한 줄씩 승인한 카피.
- 동일한 사이트처럼 느껴지는 보조 페이지(목록, 읽기 페이지, 사례 연구).
- 저장소의 디자인 문서(
DESIGN.md등)로 시스템과 결정을 설명하여 다음 사람(또는 에이전트)이 일관성을 유지할 수 있도록 함.
이 스킬의 파일
SKILL.md 이 파일: 워크플로우, 게이트, 규칙
references/01-intake-audit.md 질문할 내용, 현재 사이트 감사 방법
references/02-concept-system.md 컨셉 찾기; 토큰, 서체, 시그니처 디테일
references/03-content.md 진실되고, 스캔 가능하며, 강조된 카피 작성
references/04-layout.md 첫 화면 벤토 레이아웃 및 카드 레시피
references/05-interaction.md 대화상자, 호버, 모션, 작은 즐거움
references/06-content-pages.md 사람들이 계속 읽게 하는 블로그/목록/읽기 페이지
references/07-media.md 실제 작업의 워크스루 및 트레일러 녹화
references/08-qa.md 뷰포트 매트릭스, 클립 검사, 테마, 접근성
references/09-feedback-and-handoff.md 소유자와 반복; 깔끔하게 마무리
references/10-anti-patterns.md 첫 번째 시도에서 잘못된 점과 수정 방법
scripts/clip-check.mjs CDP 스크립트: 잘린 카드, 오버플로우, 접힘 적합성
scripts/shots.mjs CDP 스크립트: 뷰포트 및 테마별 스크린샷
templates/ 프레임워크에 구애받지 않는 스니펫 (React + Tailwind)