popnow
요금로그인지금 만들기

얻을 수 있는 것

  • 열 가지 라이브러리에서 고른, 서로 다른 아트 디렉션의 전체 페이지 목업 두세 개
  • 정적 페이지 또는 내 프로젝트의 컴포넌트로 만든, 실제 문구가 들어간 선택한 디자인
  • 알맞은 크기로 깨끗하게 다시 그린 히어로와 섹션 이미지, 반응형 WebP로 내보내기
  • 데스크톱과 휴대폰 스크린샷, 목업과의 나란히 비교, QA 보고서
  • 기계가 만든 습관을 찾는 린트 보고서와 적용된 수정

이럴 때 좋아요

  • 스타트업, 앱, 제품의 랜딩 페이지
  • 뚜렷한 외관이 필요한 출시 및 대기 명단 페이지
  • 일반 템플릿처럼 읽히는 페이지 리디자인

이럴 때는 맞지 않아요

  • 기존 디자인 파일을 픽셀 단위로 맞춘 빌드
  • 앱 로직이나 CMS가 있는 여러 페이지 사이트
  • 이메일 템플릿

사용 방법

Claude·ChatGPT에서

PopNow 스킬 사용: “목업에서 만드는 랜딩 페이지”(landing-page-from-mockup). 할 일: Lumen Notes의 랜딩 페이지를 만들어 주세요. 입력하는 동안 관련 메모를 제안하는 일반 텍스트 메모 앱입니다. 기기 한 대는 무료, Pro는 월 $6입니다. 아직 후기는 없습니다.

코딩 에이전트에서

/popnow-landing-page-from-mockup Lumen Notes의 랜딩 페이지를 만들어 주세요. 입력하는 동안 관련 메모를 제안하는 일반 텍스트 메모 앱입니다. 기기 한 대는 무료, Pro는 월 $6입니다. 아직 후기는 없습니다.

이어서 해 보기

히어로는 목업 B에서, 가격표는 목업 A에서 가져와 주세요.

우리 Astro 프로젝트의 site/ 아래에 만들고 검토를 다시 실행해 주세요.

미리 준비할 것

  • 제품명, 대상 고객, 헤드라인 약속
  • 기능 세 개에서 네 개와 각각의 구체적인 세부 사항, 플랜과 가격
  • 책임질 수 있는 증거(실제 후기, 수치, 사실)
  • PopNow API 키, 그리고 브랜드가 이미 정해져 있다면 DESIGN.md

가이드: AI로 랜딩 페이지 만드는 법

비슷한 스킬

전체 보기 →

자주 묻는 질문

코드를 쓰기 전에 목업을 먼저 만드는 이유는 무엇인가요?

스타일을 말로 설명하는 것보다, 완성된 것처럼 보이는 페이지들 사이에서 고르는 편이 더 빠르고 정직합니다. 또 빌드에 구체적인 목표가 생기므로, 스크린샷 비교가 코드가 어디서 벗어났는지 정확히 말할 수 있습니다.

PopNow는 무엇을 생성하고 비용은 얼마인가요?

목업(장당 약 30~35크레딧)과, 원하면 깔끔한 히어로 및 섹션 이미지(장당 약 35~75크레딧)를 생성합니다. 일반적인 전체 실행은 약 275크레딧이고, 목업 하나만 쓰는 간편 모드는 약 35크레딧입니다. 모든 생성은 먼저 견적을 보여 주고, 동의해야만 실행됩니다.

설치해야 할 것이 있나요?

Node와 Python 3, 그리고 스크린샷용 로컬 Chrome, Chromium, Edge가 필요합니다. 프로젝트에 Playwright가 이미 있으면 그것을 씁니다. 그 밖의 의존성은 없습니다.

페이지에 목업 이미지의 글자가 들어가나요?

아니요. 목업은 그림이며 작은 글자는 깨질 수 있습니다. 헤드라인, 기능, 가격, FAQ는 내 브리프에서 가져오고, 에이전트가 초안을 쓴 것은 모두 목록으로 보여 주어 내가 확인하게 합니다.