SaaS 랜딩 페이지 포지은(는) 무엇을 하나요?
사용자의 Figma 파일 내부에 세련되고 반응형인 SaaS 랜딩 페이지를 만듭니다. 사용자의 콘텐츠, 제품 증거, 브랜드 시스템 및 기존 Figma 시스템을 진실의 원천으로 취급합니다. 일반적인 디자인 지침은 이들보다 우선하지 않습니다.
인테이크부터 시작
references/intake-and-planning.md를 읽으세요. 입력 사항을 하나의 간결한 체크리스트로 요청하고, 이미 있는 것은 인정하며, 필수 요소와 선택적 입력을 분리하세요.
복구 가능한 공백 때문에 진행을 차단하지 마세요. 사용자가 동의하거나 이미 진행을 요청한 경우 레이블이 지정된 가정과 플레이스홀더를 사용하여 계속 진행하세요. 제품 기능, 가격, 증명, 고객 로고, 사용후기, 지표, 규정 준수 주장 또는 브랜드 규칙을 절대 임의로 만들지 마세요.
파일을 편집하려면 유효한 Figma 대상과 적절한 쓰기 도구가 있는 연결된 MCP가 필요합니다. 둘 중 하나라도 없으면 디자인 브리프와 에셋 계획을 제공한 다음 Figma 제작을 진행하기 위해 필요한 정확한 단계를 명시하세요.
다음 순서로 작업
- 프리플라이트: 사용 가능한 Figma MCP 도구를 검사하고, 제공된 대상을 열고, 편집 범위를 결정하고, 기존 스타일, 변수, 컴포넌트, 그리드 및 주변 프레임을 목록화합니다. references/figma-mcp-workflow.md를 따르세요.
- 브리프: 대상 고객, 제공 가치, 주요 전환, 메시지, 증거, 에셋, 제약 사항, 누락된 입력 및 가정을 요약합니다. 결과를 실질적으로 변경하는 선택에 대해서만 확인을 받으세요.
- 콘텐츠 아키텍처: 승인된 카피를 보존하고 명확한 전환 경로로 구성합니다. references/conversion-and-content.md를 사용하세요. 카피 변경 사항은 별도로 제안하세요. 승인된 콘텐츠를 조용히 다시 쓰지 마세요.
- 크리에이티브 방향: 브랜드와 제품에서 하나의 일관된 시각적 아이디어를 도출합니다. references/visual-direction.md를 사용하세요. 방향이 명확하지 않은 경우 최대 세 가지 옵션을 제시하고 구축하기 전에 하나를 추천하세요.
- Figma 기본 요소: 적합한 경우 파일의 시스템을 재사용합니다. 그렇지 않으면 변수/스타일, 그리드, 타이포그래피 계층, 간격, 모서리 및 재사용 가능한 컴포넌트의 작은 로컬 시스템을 만듭니다.
- 빌드: 실제 콘텐츠와 제품 스크린샷으로 데스크톱 랜딩 페이지를 구성합니다. 요청 시 반응형 태블릿/모바일 변형 또는 명시적인 중단점 동작을 만듭니다. references/responsive-and-motion.md를 사용하세요.
- 검토 및 수정: references/design-qa.md를 실행하고, 파일에서 중요한 문제를 수정한 다음 영향을 받은 프레임을 다시 검사합니다.
- 핸드오프: 정확한 페이지/프레임 이름, 재사용 가능한 컴포넌트 및 스타일, 반응형 변형, 모션 주석, 가정/플레이스홀더, 해결되지 않은 입력 및 남아 있는 위험을 보고합니다.
Figma 작동 규칙
- 연결된 Figma MCP가 실제로 노출하는 도구만 사용하세요. 도구 증거 없이 편집, 렌더링 또는 검사가 성공했다고 주장하지 마세요.
- 쓰기 전에 검사하세요. 쓰기 후에는 결과 노드 또는 렌더를 검사한 후 계속 진행하세요.
- 관련 없는 작업을 덮어쓰거나 삭제하지 마세요. 대상이 모호한 경우 작업 위치를 묻거나 명확하게 이름이 지정된 작업 페이지/프레임을 생성할 승인을 요청하세요.
- 평평한 이미지보다 기본 편집 가능한 레이어, 오토 레이아웃, 컴포넌트, 변형, 변수, 텍스트 스타일 및 효과를 선호하세요.
- 제품 스크린샷을 충실하게 유지하세요. 종횡비를 유지하고, 의도적으로 자르며, 존재하지 않는 기능을 암시하는 방식으로 다시 그리지 마세요.
- 안정적이고 설명적인 이름을 사용하세요.
Frame 123,Group 5또는 레이아웃 목적이 없는 장식적 그룹화를 피하세요. - 공유, 권한, 게시 상태, 소유권 또는 라이브러리를 변경하지 마세요.
- 쓰기가 실패하면 재시도하기 전에 파일을 검사하여 부분적인 성공이 중복을 만들지 않도록 하세요.
품질 기준
페이지는 첫 번째 뷰포트 내에서 제품이 무엇을 하는지, 누구를 위한 것인지, 왜 신뢰할 수 있는지, 그리고 어떤 조치를 취해야 하는지를 전달해야 합니다. 하나의 지배적인 CTA, 일관된 계층 구조, 규율 있는 타이포그래피와 간격, 접근 가능한 대비, 실제 증거만 사용하고, 일반적인 SaaS 장식이 아닌 제품과 연결된 시각적 아이디어를 사용하세요.
모션은 선택 사항이며 목적이 있어야 합니다. 주의, 이해, 피드백, 연속성 또는 브랜드 표현을 향상시킬 때만 지정하세요. 항상 축소 모션 동작을 포함하세요.
범위 경계
이 스킬은 Figma 랜딩 페이지 디자인과 구현 인식 핸드오프를 생성합니다. 동작, 에셋 및 반응형 규칙에 주석을 달 수 있지만, 사용자가 별도로 요청하지 않는 한 프로덕션 프론트엔드 코드를 생성하지 않습니다.
이 결합된 스킬의 출처와 기능 감사에 대해서는 references/source-coverage.md를 참조하세요.