fuzzyplace/living-stage

Living stage: 가이드 설정

당신은 다른 사람이 이 사이트의 자신만의 버전을 만들도록 돕고 있습니다. 이 사이트는 고유한 삶을 가진 잉크 캐릭터이며, 스크롤할 때 페이지를 인쇄하는 팔, 그들의 말로 표현된 이야기를 담고 있습니다. 엔진은 이미 작동합니다. 당신의 임무는 그것을 복사하고, 인터뷰를 진행하고, 다섯 군데를 채우는 것입니다. 엔진 코드를 작성하지 마십시오.

그들의 것인 다섯 군데

항목	파일
말: 이름, 태그라인, 챕터, 행동 촉구, 이스터에그	src/content/site.ts
링크 트리의 링크	src/content/links.ts
캐릭터의 외형	src/content/character.tsx (프리셋은 src/art/looks.tsx에 있음)
팔레트, 타이포그래피, 모션	design/tokens.json, src/styles/tokens.css에 미러링됨
공유 이미지 및 아이콘	npm run og (위에서 생성됨)

또한 인터뷰 결정 사항을 docs/STORY.md에 기록하고, src/art/looks.tsx를 읽어 프리셋 외형을 src/content/character.tsx로 복사할 수 있습니다.

그 외 모든 것(src/art/, src/audio/, src/components/, src/sections/, src/App.tsx)은 엔진입니다. 이 작업을 수행하기 위해 읽지 마십시오; 크기가 크고 필요하지 않습니다. 외형 및 헤드라인 규칙은 docs/CHARACTER.md를, 토큰을 다루기 전에는 docs/DESIGN_SYSTEM.md를 읽으십시오. 검사가 실패하고 오류가 해당 파일을 가리키는 경우에만 엔진 파일을 엽니다.

0단계: 코드 가져오기 (빠르게, 생성 없이)

현재 폴더가 이미 템플릿의 복사본(src/content/site.ts와 .claude/skills/living-stage/가 있음)이라면 1단계로 건너뜁니다.

그렇지 않으면 새 사이트가 위치할 위치(폴더 이름)를 묻고, 히스토리 없이 템플릿을 복사하여 설치합니다:

npx degit fuzzyplace/lil_guy_portfolio my-site
cd my-site
git init
npm install

그런 다음 개발 서버(npm run dev, 또는 미리보기 도구가 있다면 사용)를 시작하고 예제 사이트를 보여줘서 사용자가 무엇을 만드는지 알 수 있게 합니다. 개발 서버를 실행하거나 볼 수 없다면, 대신 스크린샷을 사용합니다: npm run build && npm run verify는 screenshots/verify-desktop-hero.png (히어로, 묘기 중간)와 기타 파일들을 생성하고, npm run looks는 각 외형의 클로즈업을 생성합니다. (처음: npx playwright install chromium.) 다음에 일어날 일을 두 줄로 알려줍니다: 짧은 인터뷰, 한 번에 한 질문씩, 그런 다음 빌드, 확인 및 (사용자의 동의하에) 배포합니다.

1단계: 인터뷰

결정하는 방법 (이것이 가장 중요)

하향식, 한 레이어씩 결정하고, 위 레이어가 확정될 때까지 아래 레이어에 대해 묻지 마십시오. 스토리와 음성이 결정되기 전에 시각적인 것을 완성하면 말이 안 되는 카피가 만들어집니다.

1. 의도: 사이트의 대상, 느끼게 할 감정, 마지막에 하게 할 행동.
2. 스토리: 위에서 아래로 스크롤하는 아크.
3. 카피 스타일: 말투, 문장 형태, 프레이밍 장치.
4. 구조: 블록들 (챕터, 팝아웃, 연락처)과 각각의 목적.
5. 대사: 실제 단어들, 태그라인 먼저.
6. 캐릭터: 그가 어떻게 생겼는지.
7. 팔레트, 타이포그래피 및 모션.
8. 링크: 링크 트리와 행동 촉구.

각 확정된 레이어를 docs/STORY.md의 "LOCKED" 아래에 기록합니다 (진행하면서 예시 페르소나의 항목을 대체). 아래의 모든 것은 이것으로 거슬러 올라가야 합니다. 나중 아이디어가 확정된 레이어와 모순되면 말하고 변경하기 전에 물어보십시오.

질문하는 방법

• 한 번에 한 질문씩, 일반 채팅 텍스트로. 여러 질문이 있는 양식이나 대화창은 사용하지 마십시오.
• 각 질문 전에, 한 줄로 무엇을 결정하고 페이지에서 무엇이 변경되는지 말하십시오.
• 설명하지 말고 보여주십시오. 스타일과 외형 질문에는 3~4개의 옵션을 제시하고, 각각을 실제 콘텐츠로 작성하십시오: 매번 같은 세 순간 (시작, 한 챕터, 끝). 캐릭터의 경우 프리셋을 보여주십시오 (?look=beanie|bun|hood|bot 개발 서버에서, 또는 npm run looks로 클로즈업). 팔레트의 경우 배경에 텍스트 색상이 있는 견본을 보여주십시오.
• 하나의 옵션을 추천하고 이유를 말하십시오 한 문장으로. 사용자는 선택, 혼합 또는 반대합니다.
• 각 답변 후, 무엇이 확정되었는지 한 줄로 다시 말하고, docs/STORY.md에 기록한 후 다음 질문을 하십시오.
• "네가 결정해" 는 당신이 결정하고, "Decisions" 아래 docs/STORY.md에 기록한 후 계속 진행한다는 의미입니다.
• 비용에 대한 지속적인 감각을 유지하십시오: 이미 읽은 파일을 다시 읽지 말고, 각 답변에 대해 전체 사이트를 재생성하지 말고, 변경된 줄만 편집하십시오.

무엇을 물어볼 것인가, 레이어별로

1. 의도. 이것은 누구를 위한 것입니까 (채용 담당자, 클라이언트, 협업자, 친구)? 그들이 느껴야 할 것은 무엇입니까? 마지막에 그들이 해야 할 한 가지는 무엇입니까 (이메일, 전화 예약, 팔로우, 아무것도)?
2. 스토리. 먼저 원자재를 물어보십시오 (그들이 한 일, 지금 하는 일, 다음에 원하는 일, 옆에서 만드는 모든 것), 그런 다음 2~3개의 아크를 각각 한 줄씩 제안하십시오. 기본 아크는 과거, 현재, 통일 주제를 가진 팝아웃, 미래, 연락처입니다; 챕터와 팝아웃의 순서는 무엇이든 가능합니다.
3. 카피 스타일. 3~4개의 말투를 그들 자신의 자료로 렌더링하여 제공하십시오. 예: 조용한 1인칭; 실험실 노트; 현장 노트; 터미널 로그; 또는 혼합. 하나를 추천하십시오.
4. 구조. 각각 한 줄의 목적과 함께 블록 목록, 그리고 헤더 탐색에 표시될 블록. 하나의 블록은 연락처 블록이어야 합니다.
5. 대사. 확정된 말투로 모든 대사를 초안하고, 컨텍스트에서 함께 보여주십시오 (site.ts 작성 후 개발 서버). 태그라인을 먼저 올바르게 잡으십시오: docs/CHARACTER.md의 "Headlines" 읽기 (2~4줄, 첫 줄에 실제 단어, 짧은 글자 옆에 긴 글자, 줄 끝에 쉼표, 줄당 최대 24자). 또한: 눈썹, 리드, 푸터 이스터에그, 콘솔 이스터에그, 두 개의 신뢰 줄, 404 줄. 초안 카피는 괜찮습니다; 사용자가 승인할 때까지 아무것도 출시되지 않습니다.
6. 캐릭터. 네 가지 프리셋을 보여주십시오. 맞는 것이 없으면 한 문장 설명 (머리 또는 모자, 옷, 빛을 받는 한 가지)을 요청하고, 가장 가까운 프리셋을 src/content/character.tsx로 복사하고 한 번에 하나의 모양을 변경하여 사용자 정의 외형을 그리십시오. docs/CHARACTER.md의 상자, 관절 및 채우기 규칙을 따르십시오. 사진이나 실제 사람의 초상화를 추적하지 마십시오. 단, 그것이 그들 자신의 것이고 그들이 요청한 경우는 예외입니다. 프리셋은 parts.NECK 및 parts.SKULL을 공유합니다 (src/art/looks.tsx에서 내보냄). npm run looks (screenshots/look-current.png)로 결과를 보여주십시오.
7. 팔레트, 타이포그래피 및 모션. 3개의 팔레트(기본 잉크 그레이와 그들의 스토리에 맞는 두 개)를 견본으로 제공하고, 악센트 색상, 기본 글꼴을 유지할지 여부를 물어보십시오. 먼저 design/tokens.json을 편집하고, 변경한 모든 색상을 src/styles/tokens.css에 미러링하십시오 (그레이 램프만 --md-ref-gray-* 변수가 있습니다; 다른 모든 색상은 직접 --md-sys-color-<role>에 있습니다). 그런 다음 npm run tokens:contrast: 텍스트 대비(4.5:1)와 두 파일이 일치하는지 확인합니다. 안개(fog-light, fog-mid, fog-deep, fog-edge)는 팔레트의 분위기를 전달합니다: 네 개 모두 색조를 입히십시오. 악센트는 속삭임처럼 유지하십시오 (docs/DESIGN_SYSTEM.md). 모션: 기본 지속 시간 또는 더 차분한 (더 긴) 지속 시간.
8. 링크. 각 링크와 이동 위치를 물어보십시오 (Connect, Work, Play 또는 이름이 변경된 그룹). 실제 URL만: 아직 없는 것은 href: null, status: 'soon'입니다 (개발에서 표시, 프로덕션에서 숨김). 그런 다음 행동 촉구: 예약 링크, 이메일 또는 프로필 링크.

2단계: 빌드 및 확인

1. 확정된 내용에서 콘텐츠 파일을 작성하십시오. site.url을 사이트가 위치할 곳으로 설정하십시오 (https://host, 후행 슬래시 없음). 아직 도메인이 없으면 호스트 주소(예: https://their-site.vercel.app)를 사용하고 나중에 업데이트하십시오.
2. npm run check (타입, 카피 규칙을 포함한 테스트, 대비 및 토큰 불일치, 빌드)를 실행하십시오. 실패하는 것을 수정하십시오. 빌드는 site.url이 여전히 템플릿의 데모(lil-guy-portfolio.vercel.app)를 가리키거나 행동 촉구가 example.com을 가리킬 때 경고합니다. 카피 규칙: en 또는 em 대시 없음, 느낌표 없음, 재고 채우기 단어 없음.
3. npm run og을 실행하여 공유 카드와 아이콘을 생성하십시오.
4. npm run build && npm run verify를 실행하십시오 (처음: npx playwright install chromium). 1440 및 375에서, 축소 모션 유무에 관계없이 캐릭터가 로드 시 나타나고, 입장 및 타이틀 묘기를 수행하고, 스크롤하는 동안 화면에 머물며, 오류가 없는지 확인합니다. 묘기가 재생되지 않으면 태그라인이 그에게 설 땅을 주지 않은 것입니다: 사용자와 함께 다시 검토하십시오.
5. 스크린샷 (screenshots/verify-desktop-hero.png 및 verify-mobile-hero.png(묘기 중간 히어로), verify-desktop.png 및 verify-mobile.png(페이지 끝))과 개발 서버를 보여주고 무엇을 변경할지 물어보십시오. 사용자가 만족할 때까지 반복하십시오. node scripts/shots-sections.mjs는 챕터당 한 장의 샷을 제공합니다.
6. 개인정보 보호 패스. src/content/의 모든 문자열을 다시 한 번 읽으십시오. 공개되면 안 될 수 있는 것을 표시하십시오: 집 주소, 공유하지 않기로 선택한 개인 전화번호나 이메일, 가족 또는 건강 정보, 허가를 받지 않은 고용주나 클라이언트. 예시 페르소나의 잔재를 제거하십시오: "Pim Lanternby", "PIM", "The Quiet Hour", 램프 및 라디오 대사, 사용자가 직접 제공하지 않은 모든 example.com, example.org 또는 example.net 링크, 데모 주소 lil-guy-portfolio.vercel.app.

3단계: 배포

배포는 사이트를 게시하므로, 하기 전에 물어보십시오. docs/DEPLOY.md를 따르십시오 (기본 Vercel; Netlify 및 GitHub Pages도 작동). 라이브가 된 후 URL을 열고, 배포된 og.png로 공유 카드를 확인하고, 사용자에게 링크를 제공하십시오.

짧은 요약으로 마무리하십시오: 무엇이 라이브인지, 무엇이 아직 soon인지, 그리고 그들이 나중에 보내겠다고 말한 모든 것.