Webflow 프로토타입: Figma 디자인 → 승인된 로컬호스트 프로토타입

Webflow 프로토타입: Figma 디자인 → 승인된 로컬호스트 프로토타입은(는) 무엇을 하나요?

프로젝트의 첫 번째 단계입니다. 모든 사이트는 Figma 파일에서 시작되며, 디자인은 실제 URL과 브레이크포인트에서 Webflow가 가질 변수 및 클래스 이름을 사용하여 코드로 구축되고, 페이지별로 승인됩니다. 결과물은 모형(mock)이 아닙니다: Webflow 빌드의 시작점이 되는 마크업, 클래스, 모듈 및 수동 단계 목록입니다.

이 단계에서는 Webflow에 절대 기록하지 않습니다. 사이트(스냅샷)를 읽고 변경을 제안하며, 쓰기는 프로토타입이 승인된 후 자체 세션에서 webflow-build 스킬이 담당합니다.

• checklists.md는 입력, 각 프로토타입 페이지 및 핸드오프를 검증합니다.
• prototype-starter/는 프로젝트가 시작하는 프로토타입 폴더입니다(pnpm new-project가 복사합니다).
• figma.md는 Figma 커넥터를 통해 Figma 파일을 읽습니다: 브레이크포인트별 프레임, 스크린샷, 변수, 측정값.
• Figma 프레임에서 한 페이지를 구축하는 단계는 webflow-build (SKILL.md › The prototype, from Figma)에 있으며, Bench의 AI가 따르는 동일한 단계입니다. 해당 checklists.md의 Prototype 단계는 클라이언트 승인까지 프로토타입을 추적합니다.
• webflow-style-guide 스킬이 스타일 가이드를 만듭니다(프로토타입의 첫 페이지).
• conventions.md(webflow-build 내)는 프로토타입이 따르는 페이지 및 섹션 구조, 클래스 및 변수 명명 규칙을 설정합니다. lessons/는 이전 빌드에서 시간이 소요되었던 내용을 기록합니다.
• rules.md는 모든 Webflow 스킬이 공유하는 규칙(승인 없이 커밋/푸시 금지, Designer 우선, 채팅에 자격 증명 금지), 세션 마무리 및 기여 방법을 포함합니다.

모든 체크리스트 항목은 수행 주체를 표시합니다: [Claude], [Claude checks] (Claude가 확인 및 보고; 사람이 Claude가 수정할 수 없는 부분을 수정) 또는 [Person] (Claude가 알림 및 추적은 할 수 있지만 직접 수행하지는 않음).

세션 시작 (모든 세션)

1. 워크스페이스 CLAUDE.md를 읽고, 리포지토리의 AGENTS.md 및 GOTCHAS.md, 그리고 docs/handoff/를 읽습니다. lessons/README.md를 훑어봅니다. lessons/mcp.md의 임포터 교훈은 프로토타입 마크업 작성 방법을 결정합니다.
2. 프로젝트 메모리를 읽습니다: 마지막 세션이 중단된 위치, 미해결 질문. 현재 상황과 다음 단계를 한 줄로 말합니다.
3. 새 프로젝트의 경우, 먼저 checklists.md의 Before the prototype을 실행합니다. 입력이 누락된 경우 물어보고, 내용, 상태 또는 SEO 필드를 추측하지 마십시오.
4. 프로토타입 개발 서버가 실행 중입니다(prototype/에서 pnpm dev).
5. 오늘의 범위는 한 페이지입니다. 어떤 페이지인지 말합니다.

프로젝트 설정 (새 프로젝트)

Bench 내에서, Add client › from a Figma design은 클라이언트 폴더, 이 템플릿의 리포지토리, 빈 prototype/를 설정한 후, 사용자가 선택한 프레임(6단계)에서 프로토타입을 구축합니다. 사용자의 단계(4)와 입력은 여전히 적용됩니다.

Bench 외부에서는, 흐름은 하나의 메시지(README › Starting a project)로 시작합니다. 예: "New project: Webflow site , Figma . Set up the repo and workspace, run Before the prototype, then build the prototype from the Figma file page by page; wait for my go-ahead before any Webflow change."

그 전에, 사용자는 GitHub에서 템플릿으로 리포지토리를 만들고, 이를 자체 클라이언트 폴더(<Client>/wf-<client>/)에 클론하고, 클라이언트 이름으로 스타터 사이트를 복제했습니다(starter-site.md).

1. 스킬 업데이트 우선. pnpm update-skills를 제공합니다(물어보고; 로컬 스킬 편집을 대체하므로 주의). 프로젝트가 최신 교훈으로 시작됩니다.

2. 사이트 찾기. Webflow 커넥터를 통해 사이트를 나열하고 사용자가 제공한 이름과 일치시킵니다: 사이트 ID와 짧은 이름(스테이징 서브도메인, <short name>.webflow.io). 두 개 일치하거나 없음 → 물어봅니다. git remote get-url origin에서 GitHub 조직과 리포지토리를 읽습니다.

3. 리포지토리 채우기 및 워크스페이스 설정:

   pnpm install
   pnpm new-project --client "<Client>" --slug <short name> --org <org> --site-id <id>
   

   이 명령은 AGENTS.md의 프로젝트 사실, package.json 이름, loader.html의 REPO, 핸드오프 제목을 채우고 webflow-build.config.json을 작성합니다. 리포지토리 주변에 워크스페이스를 만듭니다: <Client>/CLAUDE.md(AGENTS.md, GOTCHAS.md 및 docs/handoff/ 가져오기), .mcp.json, 스킬 링크, prototype/(prototype-starter/의 복사본) 및 Assets/. Figma 링크를 워크스페이스 CLAUDE.md(Design 행)에 작성합니다. 찾을 수 없는 값은 물어보고, 절대 추측하지 마십시오.

4. 사용자의 단계를 순서대로 나열하고 완료될 때까지 docs/handoff/MANUAL-TODO.md에서 추적합니다:

   1. Repo Settings → Pages → Source: GitHub Actions; 개발자 팀을 추가합니다.
   2. 첫 번째 푸시: Claude가 설정 커밋을 요청함; 푸시 후 스테이징 워크플로가 통과해야 합니다(https://<org>.github.io/<repo>/styles.css가 로드됨).
   3. loader.html의 로더를 붙여넣습니다(ORG와 REPO가 채워짐): 사이트 설정의 head 코드 및 footer 코드. 임베드 2a와 2b는 이미 G | Components에 플레이스홀더와 함께 있습니다: Claude가 MCP를 통해 승인 후 채우거나, 사용자가 직접 붙여넣습니다.
   4. 스테이징 비밀번호 및 출시 전까지 noindex 설정.

5. 워크스페이스로 이동. 다음 세션부터 Claude는 <Client>/에서 열리며, 리포지토리 내가 아닙니다: MCP 서버, 스킬 및 가져오기가 설정된 곳입니다. prototype/에서 pnpm install을 실행합니다.

6. 입력, 그다음 프로토타입. checklists.md의 Before the prototype을 실행하고(컴포넌트 계획 및 비디오 목록 포함), Figma 파일(figma.md)을 읽고, Webflow 스냅샷을 생성하고, 파일에서 프로토타입을 구축합니다: 스타일 가이드를 먼저(webflow-style-guide 스킬), 콘텐츠 페이지 전에 승인되고, 선택된 프레임에서 페이지별로(webflow-build › The prototype, from Figma), 각각 Prototype page done을 통과합니다.

7. 디자인에서 docs/handoff/HANDOFF.md를 채웁니다; 첫 세션부터 MANUAL-TODO.md 및 BUILD-NOTES.md를 최신 상태로 유지합니다.

프로토타입

• Webflow와 동기화됨: 동일한 URL, 동일한 브레이크포인트(991, 767, 479), Webflow 클래스 이름, conventions.md의 페이지 셸 및 섹션 구조를 사용합니다. Nav와 footer는 단일 부분(각각 하나의 컴포넌트)입니다.
• 컴포넌트 및 CMS 표시: data-component="<Component name>" (컴포넌트 인스턴스의 루트, Nav와 Footer 부분에도 있음), data-prop="<Prop name>" (컴포넌트 속성이 설정하는 항목), data-collection="<Collection name>" (Collection List 래퍼), data-field="<Field name>" (CMS 필드에 바인딩된 요소, 리스트 항목 또는 CMS 템플릿 페이지 내). 시각적 변화는 없으며, 이를 Webflow에서 만들지 않습니다(자체 컴포넌트 및 CMS 바인딩이 있음)(prototype-starter/README.md › Component and CMS markers).
• Webflow 스냅샷에서 사이트의 변수를 읽습니다(prototype-starter/README.md › Webflow snapshot). 스냅샷을 쓰거나 새로고친 후: pnpm css, pnpm check:snapshot, pnpm check:drift. check:drift는 스냅샷을 스테이징 사이트가 게시하는 스타일시트와 비교하고 차이가 있는 모든 변수, 클래스 및 값을 나열합니다(먼저 스테이징에 게시).
• Webflow 커넥터가 없습니까? (아직 설정되지 않음, 다른 사이트에 로그인됨, 또는 MCP 호출이 허용되지 않음) pnpm css:published <staging URL>은 사이트가 게시하는 CSS에서 tokens.css, webflow.css 및 webflow-base.css를 구축하고(GET 전용; 페이지별 CSS는 페이지별로 읽어 병합) CSS가 허용하는 범위까지 스냅샷을 복구합니다. CSS는 정확하지만, Designer 이름, 모드 이름, 빈 클래스 및 인터랙션은 포함되지 않습니다(스크립트 헤더에 추측하는 모든 내용이 나열됨). 따라서 HANDOFF.md에 스냅샷이 임시 대체임을 명시하고, Designer에서 확인하지 않고 추측된 이름으로 변수나 클래스를 제안하지 말며, MCP를 사용할 수 있게 되는 즉시 스냅샷을 교체합니다(webflow-snapshot/source.json 삭제 후 pnpm css). source.json이 존재하는 동안 pnpm css는 실행을 거부합니다.
• 변수 변경은 제안만 하고, 절대 적용하지 않습니다: proposed.css에 old → new 형식으로 그룹화하고 문자로 레이블을 붙여 승인을 받습니다. 새 클래스는 new-classes*.css에 작성되며, Designer가 보유할 수 있는 형태로 작성합니다.
• 마크업은 임포터용으로 작성됩니다: 모양은 div를 사용하고, 빈 span을 사용하지 않습니다; 폼 컨트롤은 <form> 안에 있습니다; 불리언 속성은 값을 가집니다; 줄 바꿈 앞에는  가 있습니다; 모듈은 클래스 이름이 아닌 data-* 훅에 의존합니다. pnpm wf:preflight가 이를 모두 확인합니다.

순서.

1. 스냅샷, pnpm css, pnpm check:snapshot, pnpm check:drift (커넥터 없음: pnpm css:published, 그다음 동일한 검사).
2. 스타일 가이드(webflow-style-guide 스킬), 콘텐츠 페이지 전에 승인됨.
3. 페이지, 한 번에 하나씩, Figma 프레임에서(webflow-build › The prototype, from Figma). 각 페이지: 구축; 도입된 모든 클래스 또는 컴포넌트에 대한 행을 추가(pnpm style-guide); pnpm screens (2560에서 360까지 모든 너비: 오버플로 및 오류) 및 pnpm check:states (포커스 및 프레스 상태); Prototype page done 실행; 사용자가 1440, 820, 667 및 390에서 승인합니다.
4. 클라이언트가 서면으로 프로토타입을 승인합니다.
5. 핸드오프(아래).

빌드로 핸드오프

checklists.md의 Prototype handoff를 실행합니다. 빌드 세션이 시작하는 팩:

• docs/handoff/HANDOFF.md: 페이지, 변수 및 클래스, CMS, 만들 컴포넌트, 모듈 및 해당 훅, 비디오 목록.
• pnpm wf:styles: 모든 새 클래스를 커넥터가 생성할 수 있는 것, 사용자가 Designer에서 수동으로 설정하는 것(이미 MANUAL-TODO.md에 행이 있음), 리포지토리 CSS로 가는 것으로 분류.
• pnpm wf:preflight: 페이지별 알려진 임포터 단계.
• 승인된 프로토타입 자체(실행 중), 빌드가 비교되는 기준(pnpm wf:compare, wf:pass).

그런 다음 사용자에게 빌드 세션을 시작하는 메시지를 채워서 제공하며, 사용자는 이를 워크스페이스 폴더에서 연 새 세션에 붙여넣습니다:

Continue : build in Webflow. The prototype is approved (every page and the style guide, ). Read the workspace CLAUDE.md, docs/handoff/ and the webflow-build skill. Start with the foundation: propose the variable batch from proposed.css and wait for my go-ahead before each Webflow write. Then tag styles, classes (from the styles plan), CMS collections, the repo port and the loader, the style guide page, the media page (if the video list has entries), components, and pages, one page per session.

빌드는 자체 세션에서 실행되어 빌드 규칙만 로드하고, 프로토타입은 기준으로서 변경되지 않은 상태로 유지됩니다.

작업 리듬

• 세션당 한 페이지, 완전히 완료: 구축, 모든 너비에서 확인, 상태 완료, Prototype page done 실행, 핸드오프 업데이트.
• docs/handoff/는 세션 중에 최신 상태 유지: 결정이 내려지면 즉시 HANDOFF.md에 기록.
• 교훈을 다시 제공합니다. 마무리 시, 모든 template-candidate 교훈을 템플릿에 제공합니다(rules.md › Contributing).