이미지를 활용한 Next.js 랜딩 페이지 구현
Next.js, 이미지 생성 도구, Playwright 검증을 활용하여 이미지로부터 랜딩 페이지를 복제하는 복합 워크플로우입니다.
프롬프트
/goal 첨부된 이미지의 랜딩 페이지를 Next.js를 사용하여 구현하고, 복제 정확도를 95% 이상으로 높이세요.
이미지 이외의 방법으로 구현하기 어려운 부분은 image_gen을 사용하여 적절한 에셋을 생성하세요.
- 아이콘과 이미지는 원본 이미지와 최대한 일치해야 합니다.
원본 이미지에서 관련 부분을 크롭하여 참조 이미지로 image_gen에 전달하세요 (codex exec -i를 사용하여 참조 이미지를 전달하고 표준 입력을 통해 프롬프트를 제공하세요).
- 반응형을 보장하세요. 375px에서 1440px 너비까지 확인하여 가로 스크롤, 요소 겹침, 잘림 현상이 없도록 하세요 (고정 너비 카드는 w-full max-w-[Npx]를 사용하고, 절대 위치 지정은 넓은 화면에서만 사용하세요).
- Playwright 스크린샷 루프를 실행하여 원본과 비교하고 수정하는 과정을 반복하세요. npm run build가 성공하면 완료됩니다.
이 프롬프트 사용법
- 1
위의 전체 프롬프트를 복사하세요.
- 2
claude-fable-5을 지원하는 플랫폼(예: YouMind)을 열고 프롬프트를 붙여넣으세요.
- 3
원하는 아이디어에 맞게 주제, 스타일, 세부 정보를 바꾼 뒤 생성하세요.
이것은 YouMind 프롬프트 라이브러리의 무료 AI 프롬프트입니다. 복사하고 변형해 쓸 수 있는 수천 개의 웹페이지 프롬프트가 더 있습니다.
더 많은 웹페이지 프롬프트 보기
더 둘러보기
AI 라이브러리
AI 프롬프트 검색
AI가 수만 개의 프롬프트를 검색해줍니다. 모델·기간·키워드로 필터링하고 노출, 북마크, 리포스트 등 인기 지표로 정렬할 수 있어요.
비전 도구
이미지를 프롬프트로
어떤 사진이든 상세한 AI 이미지 프롬프트로 변환하세요. 무료 Image to Prompt 변환기가 구도, 스타일, 조명을 분석해 몇 초 만에 같은 느낌을 재현할 수 있습니다.
크리에이터를 위해, 영원히 무료.
YouMind는 전 세계 크리에이터가 신뢰하는 AI 창작 파트너입니다. 이곳의 모든 프롬프트는 더 빠르고 더 나은 창작을 돕기 위해 엄선되었습니다.