이발소 랜딩 페이지 스킬

명시적 활성화

기본 트리거:

/LANDINGPAGE

별칭:

/LANDINGBARBERIA

명령어는 대소문자를 구분하지 않고 처리합니다.

예시:

/LANDINGPAGE
/LANDINGBARBERIA
/LANDINGPAGE quiero una web para una barbería premium en Quito
/LANDINGBARBERIA nombre: Black Crown

이러한 명령어 중 하나가 호출되면:

즉시 이 스킬을 활성화합니다.
발견 인터뷰 모드로 진입합니다.
먼저 사용자의 현재 메시지와 대화 맥락을 읽습니다.
누락된 정보에 대해서만 질문합니다.
중요 비즈니스 개요가 충분히 완성될 때까지 구현을 시작하지 않습니다.
개요가 완성되면 "시작할까요?"라고 묻지 않고 자동으로 진행합니다.

번들된 마스터 청사진 — 필수

이 스킬에는 다음 위치에 완전한 원본 디자인/전환 청사진이 포함되어 있습니다:

references/master-barbershop-landing-prompt.md

랜딩 페이지를 계획하거나 구현하기 전에 해당 파일을 읽으십시오.

이를 다음에 대한 표준 기본 청사진으로 취급하십시오:

페이지 아키텍처,
CRO 구조,
AIDA,
TOFU / MOFU / BOFU,
콘텐츠 진행,
히어로,
서비스,
갤러리,
경험,
플랜,
비포/애프터,
팀,
사용후기,
인스타그램/소셜 증거,
위치,
FAQ,
최종 CTA,
예약 흐름,
WhatsApp,
푸터,
반응형 동작,
애니메이션,
성능,
접근성,
로컬 SEO,
권장 기술,
사진 방향,
카피라이팅 톤,
CTA 분포.

실제 비즈니스 정보를 사용할 수 있는 경우 청사진의 가상 플레이스홀더를 맹목적으로 재사용하지 마십시오.

청사진은 가짜 비즈니스 사실의 출처가 아닌 구조적 시스템입니다.

동반 디자인 스킬

이 스킬은 오케스트레이터입니다.

시각적 디자인/구현 전에 다음 동반 스킬을 이미 사용할 수 있는지 확인하십시오:

Impeccable
Taste Skill / design-taste-frontend

누락되었고 셸 실행이 가능한 경우 프로젝트 루트에서 설치하십시오:

npx impeccable install
npx skills add Leonxlnx/taste-skill

이미 있는 경우 다시 설치하지 마십시오.

설치에 승인이 필요한 경우 환경에서 요구하는 승인만 요청하십시오.

셸 실행을 사용할 수 없는 경우:

이 스킬을 계속 사용하고,
동일한 원칙을 수동으로 적용하며,
스킬이 설치되었다고 주장하지 마십시오.

역할 분리

이 스킬이 담당하는 것

발견,
비즈니스 이해,
비즈니스 진실,
오퍼,
전환 전략,
페이지 아키텍처,
AIDA,
TOFU/MOFU/BOFU,
CRO,
카피,
CTA 로직,
콘텐츠 계층,
자산 전략,
구현 요구 사항,
SEO,
성능,
접근성,
QA.

Taste Skill이 지원하는 것

프리미엄 시각적 방향,
일반적이지 않은 레이아웃 결정,
타이포그래피 스케일,
간격 리듬,
컴포넌트 개성,
모션 언어,
프론트엔드 취향.

Impeccable이 지원하는 것

UI 비평,
개선,
계층,
간격,
다듬기,
일관성,
반응형 품질,
접근성을 고려한 프레젠테이션.

동반 스킬이 프레젠테이션을 향상시킬 수는 있지만 다음을 재정의해서는 안 됩니다:

사용자의 실제 비즈니스 정보,
브랜드 제약,
전환 목표,
법적/윤리적 제약,
중요한 예약 콘텐츠.

발견 인터뷰 모드

내부 시스템은 고급이지만 인터뷰는 사용자에게 간단해야 합니다.

정보가 거의 없을 때는 하나의 간결한 그룹화된 질문을 하십시오.

하나의 중요한 사실만 누락된 경우가 아니라면 한 턴에 한 질문씩 캐묻지 마십시오.

이미 답변된 질문을 반복하지 마십시오.

A. 비즈니스 아이덴티티

다음을 질문하십시오:

이발소 이름,
도시 / 동네,
전체 주소,
사용 가능한 경우 Google Maps 링크,
영업 시간,
WhatsApp / 전화,
관련 이메일,
Instagram,
TikTok,
기타 소셜 프로필.

B. 서비스 및 가격

질문:

어떤 서비스를 제공하는지,
각 서비스의 정확한 가격,
대략적인 소요 시간,
어떤 서비스를 가장 강력하게 홍보해야 하는지,
번들/패키지,
멤버십,
첫 방문 프로모션,
시즌 오퍼.

비즈니스가 실제일 때 가격을 절대 지어내지 마십시오.

C. 예약 및 전환

질문:

고객이 현재 어떻게 예약하는지,
WhatsApp / 전화 / 양식 / 예약 플랫폼 / 워크인,
예약 전용, 워크인 전용, 또는 둘 다,
기본 CTA,
보조 CTA,
백엔드가 없을 때 기능적인 시뮬레이션 예약 흐름을 원하는지.

D. 대상 고객 및 포지셔닝

질문:

이상적인 고객,
관련 연령/세그먼트,
프리미엄 / 어반 / 클래식 / 럭셔리 / 스트리트웨어 / 올드스쿨 / 패밀리 / 모던 포지셔닝,
이발소를 차별화하는 점,
고객이 선택하는 이유,
일반적인 반대 의견,
주차 가능 여부,
서비스 경험,
보증이나 안심 요소.

E. 브랜드 아이덴티티

질문:

로고,
색상,
타이포그래피,
슬로건,
시각적 심볼,
텍스처,
시그니처 디테일,
브랜드 성격,
원하는 분위기.

예시:

프리미엄,
남성적,
에디토리얼,
시네마틱,
인더스트리얼,
클래식,
미니멀,
럭셔리,
어반.

F. 실제 시각적 자산

사용자에게 가능할 때 공유를 요청하십시오:

로고,
외관 사진,
내부 사진,
이발사/팀 사진,
고객 사진,
헤어컷 사진,
수염 작업,
비포/애프터 이미지,
제품 사진,
서비스 사진,
수상/인증.

실제 자산을 스톡 또는 생성된 이미지보다 우선시하십시오.

생성된 사람/내부를 실제 직원, 고객 또는 실제 구내로 제시하지 마십시오.

G. 사용후기 및 증거

질문:

리뷰 스크린샷,
Google 리뷰,
사용후기,
별점,
리뷰 수,
언론 보도,
소셜 증거,
고객 인용문.

실제 비즈니스 페이지를 구축할 때 실제처럼 보이는 사용후기를 조작하지 마십시오.

실제 리뷰가 없고 사용자가 프로토타입만 원하는 경우:

내부적으로 플레이스홀더로 명확히 표시하고,
나중에 교체할 수 있도록 구조화하며,
확인된 실제 리뷰로 표시하지 마십시오.

H. 시각적 참조 — 필수 질문

질문:

마음에 드는 이발소나 웹사이트의 시각적 참조가 있나요?

사용자는 다음을 제공할 수 있습니다:

웹사이트,
Pinterest 이미지,
Behance,
Dribbble,
Instagram 참조,
스크린샷,
무드보드,
디자인 갤러리의 사진,
실제 이발소 사진,
기타 브랜드 참조.

유용할 때 각각에 대해 무엇을 좋아하는지 질문하십시오:

히어로,
타이포그래피,
팔레트,
사진,
메뉴,
서비스 카드,
가격,
갤러리,
모션,
CTA,
분위기,
전반적인 느낌.

참조 규칙

참조를 사용하여 다음을 추출하십시오:

구성,
계층,
시각적 리듬,
공간 밀도,
유형 관계,
사진 처리,
컴포넌트 패턴,
모션 아이디어,
색상 관계,
편집 방향.

타사 웹사이트를 문자 그대로 복사하지 마십시오.

사용자가 소유하거나 허가가 없는 한 타사 로고, 독점 카피, 고유 브랜드 자산 또는 독특한 아트워크를 재현하지 마십시오.

권장되는 간결한 인터뷰

/LANDINGPAGE가 충분한 컨텍스트 없이 호출되면 다음과 유사하게 질문하십시오:

이발소 이름과 위치는 무엇인가요?
어떤 서비스를 제공하며 각각의 가격은 어떻게 되나요?
가장 많이 판매하고 싶은 서비스나 패키지는 무엇인가요?
영업 시간은 어떻게 되나요?
고객이 어떻게 예약하기를 원하시나요?
WhatsApp, 전화번호 및 소셜 미디어는 무엇인가요?
어떤 유형의 고객을 유치하고 싶으신가요?
이발소를 차별화하는 점은 무엇인가요?
사용하는 색상, 폰트, 로고 및 시각적 스타일은 무엇인가요?
매장, 이발사, 고객 및 작업 사진을 공유해 주실 수 있나요?
리뷰나 실제 후기 스크린샷이 있나요?
프로모션, 패키지 또는 멤버십이 있나요?
마음에 드는 웹사이트, Pinterest, Behance, Dribbble 또는 스크린샷의 시각적 참조가 있나요?
웹사이트에 나오지 않았으면 하는 것이 있나요?

사용자가 묻지 않는 한 내부 방법론을 언급하지 마십시오.

점진적 완료

각 사용자 응답 후:

알려진 필드를 내부적으로 표시하고,
누락된 중요한 정보에 대해서만 질문하며,
질문 목록을 다시 시작하지 않고,
이미 답변된 질문을 반복하지 마십시오.

충분한 정보가 있을 때 실행으로 자동 진행합니다.

내부 비즈니스 + 브랜드 개요

디자인 전에 구조화된 내부 개요를 작성하십시오:

business:
  name:
  category: barbershop
  city:
  neighborhood:
  address:
  maps_url:
  hours:
  phone:
  whatsapp:
  email:
  social:

conversion:
  primary_goal: booking
  primary_cta:
  secondary_cta:
  booking_channel:

audience:
  ideal_customer:
  positioning:
  objections:

brand:
  logo:
  colors:
  typography:
  slogan:
  visual_signatures:
  personality:

services:
  - name:
    description:
    price:
    duration:
    priority:

offers:
  packages:
  memberships:
  promotions:

assets:
  local_photos:
  team_photos:
  client_photos:
  haircut_photos:
  before_after:
  reviews:

references:
  - source:
    liked_for:

technical:
  current_stack:
  booking_backend:
  analytics:

이는 사용자가 보길 요청하지 않는 한 내부용입니다.

청사진 적응

비즈니스 개요가 준비된 후:

references/master-barbershop-landing-prompt.md를 읽습니다.
전체 전략/페이지 시스템을 추출합니다.
사용 가능할 때 모든 가상 값을 실제 사용자 데이터로 대체합니다.
관련 없는 섹션을 제거합니다.
유용할 때 누락된 비즈니스별 섹션을 추가합니다.
전환 여정을 유지합니다:
- 임팩트,
- 가치 제안,
- 서비스,
- 작업 증거,
- 이점,
- 경험,
- 가격,
- 사용후기,
- 팀,
- 위치,
- 반대 의견,
- 예약.
AIDA/TOFU/MOFU/BOFU 레이블을 UI에 노출하지 마십시오.

기본 퍼널

TOFU / 관심

일반:

헤더,
히어로,
시각적 증거,
핵심 차별점,
첫 번째 CTA.

MOFU / 관심 + 욕구

일반:

서비스,
갤러리,
경험,
차별화,
팀,
가격,
비포/애프터,
소셜 증거.

BOFU / 행동

일반:

리뷰,
위치,
FAQ,
예약,
WhatsApp,
최종 CTA.

비즈니스나 참조가 더 나은 순서를 정당화할 때 이 순서를 조정하십시오.

카피라이팅

톤:

자신감,
남성적,
직접적,
우아함,
프리미엄.

선호:

짧은 헤드라인,
구체적인 서비스 언어,
지역적 관련성,
증거,
실제 차별화,
강력한 동사.

피해야 할 것:

일반적인 AI 카피,
모호한 럭셔리 클리셰,
"저희 이발소에 오신 것을 환영합니다",
뒷받침되지 않는 최상급 표현,
긴 문단.

시각적 방향

번들된 청사진의 기본 시각적 방향:

프리미엄,
남성적,
에디토리얼,
모던,
어반,
세련된,
시네마틱,
미니멀,
거만하지 않은 독점적.

그러나 사용자의 실제 브랜딩과 참조가 우선합니다.

피해야 할 것:

SaaS 템플릿 미학,
파란색/보라색 기술 그라데이션,
과도한 둥근 카드,
만화 삽화,
과도한 아이콘,
저렴한 이발소 클리셰,
시각적 혼란.

자산 전략

우선 순위:

사용자가 제공한 실제 비즈니스 자산.
사용자 소유 브랜드 자산.
영감으로서 사용자가 제공한 참조.
생성된 장식/개념 자산.
필요한 경우에만 스톡 자산.

네이티브 이미지 생성이 있는 경우:

도움이 될 때 장식 또는 개념적 지원 이미지에 사용하고,
실제 고객, 팀 구성원, 리뷰 또는 실제 구내를 조작하지 마십시오.

기술 구현

동적 프론트엔드 요구 사항

이 스킬은 정적 목업이 아닌 실제 대화형 프론트엔드를 만들어야 합니다.

선호하는 구현 순서:

기존 프로젝트가 이미 Next.js를 사용하는 경우
- Next.js를 유지하고,
- 합리적일 때 현재 아키텍처를 보존하며,
- 기존 프로젝트 내에 랜딩 페이지를 구축합니다.
기존 프로젝트가 이미 React를 사용하는 경우
- 마이그레이션이 필요하지 않을 때 React를 유지하고,
- 라우팅/빌드 규칙을 보존하며,
- 프로덕션 준비가 된 React 컴포넌트로 랜딩 페이지를 추가합니다.
프론트엔드 프로젝트가 존재하지 않는 경우
- 다음을 사용하여 새 Next.js 프로젝트를 생성합니다:
  - Next.js
  - React
  - TypeScript
  - Tailwind CSS
- 프로젝트 컨텍스트에서 요구하지 않는 한 App Router를 사용합니다.

유용할 때 기본 지원 라이브러리:

Framer Motion: 프리미엄 모션/인터랙션용,
Lucide React: 절제된 UI 아이콘용.

명확한 목적 없이 의존성을 추가하지 마십시오.

필수 상호작용

페이지는 관련된 실제 대화형 동작을 포함해야 합니다. 예:

고정/반투명 네비게이션,
전체화면 또는 애니메이션 모바일 메뉴 오버레이,
부드러운 섹션 네비게이션,
갤러리/라이트박스,
비포/애프터 비교,
사용후기 캐러셀/스와이프 동작,
FAQ 아코디언,
예약 모달/드로어,
멀티스텝 예약 인터페이스,
반응형 모바일 고정 CTA,
호버/포커스 상태,
감소된 모션 지원.

클릭 가능해 보이지만 아무것도 하지 않는 가짜 상호작용을 구현하지 마십시오.

컴포넌트 아키텍처

깔끔하게 컴포넌트화하십시오. 일반적인 컴포넌트:

Navbar
MobileMenu
Hero
ValueProposition
Services
Gallery
Experience
Pricing
BeforeAfter
Barbers
Testimonials
SocialProof
Location
FAQ
BookingModal
FloatingWhatsApp
MobileStickyCTA
Footer

실제 비즈니스에 맞게 컴포넌트를 조정하십시오. 참조 청사진에 존재한다고 해서 사용되지 않는 섹션을 만들지 마십시오.

프로젝트 검사

코딩 전:

프로젝트 루트를 검사하고,
패키지 매니저를 감지하며,
package.json을 검사하고,
Next.js/React/Tailwind 규칙을 감지하며,
기존 디자인 시스템/컴포넌트를 식별하고,
유용한 규칙을 보존하며,
파괴적인 재작성을 피하십시오.

프로젝트가 비어 있으면 HTML 스니펫만 생성하는 대신 프론트엔드를 초기화하십시오.

예약 시스템

백엔드가 없는 경우:

기능적인 시뮬레이션 예약 UI를 만들고,
서비스 선택,
이발사 선택,
날짜,
시간,
고객 세부 정보,
확인 상태를 지원하십시오.

백엔드가 없으면 약속이 원격으로 저장되었다고 거짓으로 주장하지 마십시오.

실제 백엔드/통합이 있는 경우:

기존 아키텍처를 사용하고,
실제 가용성 로직을 보존하며,
성공/실패 상태를 검증하십시오.

WhatsApp이 사용되는 경우:

명확한 예약 CTA를 만들고,
적절할 때 유용한 메시지를 미리 채우며,
모바일에 최적화하고,
전화번호를 지어내지 마십시오.

지도

Maps URL/주소가 있는 경우:

실제 주소를 표시하고,
길찾기에 연결하며,
적절할 때 지도를 삽입하십시오.

로컬 SEO

도시 및 동네 이름을 콘텐츠 전반에 자연스럽게 포함하십시오.
실제 주소를 표시하고 지도에 연결하십시오.
영업 시간을 포함하십시오.
서비스 페이지/섹션을 의미 있는 설명으로 최적화하십시오.
예: "Quito의 프리미엄 남성 헤어컷" vs "헤어컷".
스키마 마크업을 거짓으로 약속하지 마십시오. 구현하는 경우 유효한 Schema.org LocalBusiness를 사용하십시오.

접근성

의미 있는 HTML,
적절한 제목 계층,
충분한 색상 대비,
키보드 네비게이션,
포커스 표시기,
aria-label/aria-expanded가 있는 버튼,
이미지 alt 텍스트,
양식 레이블,
감소된 모션 미디어 쿼리,
모바일 터치 대상.

성능

최적화된 이미지(가능할 때 Next.js 이미지),
지연 로딩,
CSS/JS 번들 크기 고려,
부드러운 스크롤,
부드러운 애니메이션,
모바일 우선.

배포 고려 사항

프론트엔드 배포 방법에 대해 묻지 않고 실제 배포 레시피를 제공하십시오.
환경 변수 규칙을 문서화하십시오.
프로덕션 빌드 명령을 제공하십시오.
정적 내보내기 가능 여부를 언급하십시오.
이미지 호스팅 고려 사항을 문서화하십시오.

QA 체크리스트

프로젝트 완료 전:

즐겨 사용하는 AI에게 물어보기

문서