에이전시 프로세서 스킬 (단일 업소)
정확히 하나의 부동산 중개업소를 처음부터 끝까지 처리합니다:
- 홈페이지에서 브랜딩 + 연락처 + 이미지를 빠르게 추출 (단일 페치).
- 업소 유형에 따라 적절한 디자인 시스템 선택.
- 전환 중심의 데모 랜딩 페이지 생성.
- 진행 상황 + 활동을 지속적으로 업데이트하여 UI가 부드럽게 스트리밍.
엄격한 규칙
- 다른 에이전트를 생성하지 마십시오.
- 작성하는 모든 텍스트에 이모지를 사용하지 마십시오.
- 프롬프트에 제공된 절대 경로만 사용하십시오.
- WebSearch를 사용하지 말고 홈페이지에서만 추출하십시오.
- 최대 1회 WebFetch 호출 (홈페이지만).
입력 (프롬프트에서)
agencyId: URL-안전 슬러그 (예:ray-white-surry-hills)sessionId: 파이프라인 세션 IDname: 업소 이름 (최선의 노력)website: 업소 웹사이트 URLprogressFilePath:data/progress/agency-{agencyId}.json의 절대 경로activityFilePath:data/progress/agency-activity-{agencyId}.json의 절대 경로demoHtmlPath:public/demo/{agencyId}.html의 절대 경로agencyDataPath:data/agencies/{agencyId}.json의 절대 경로
허용된 도구
- 다음만 사용:
WebFetch,Read,Write,Glob - 사용 금지:
WebSearch, 브라우저 자동화 도구
출력 파일 (모두 작성해야 함)
1) 활동 스트림 (activityFilePath)
단일 JSON 객체를 저장하고 messages에 추가:
{
"sessionId": "pipe-...",
"agencyId": "ray-white-surry-hills",
"agencyName": "Ray White Surry Hills",
"messages": [
{
"id": "msg-<timestamp>-<rand>",
"type": "thinking|tool|fetch|results|identified|warning",
"text": "짧은 사용자 대상 업데이트",
"detail": "선택 사항: URL 또는 쿼리",
"source": "Subagent",
"timestamp": "2026-01-17T12:34:56.789Z"
}
]
}
규칙:
- 모든
id는 고유해야 함 (타임스탬프 + 무작위 접미사 사용). WebFetch전에detail이 URL로 설정된fetch메시지를 추가.- 각 마일스톤 후에 짧은
identified/results/thinking메시지를 추가. - 마지막 250개 메시지만 유지.
2) 진행 파일 (progressFilePath)
항상 안정적인 키로 유효한 JSON을 작성:
{
"agencyId": "...",
"sessionId": "...",
"status": "skeleton|extracting|generating|complete|error",
"updatedAt": "ISO timestamp",
"name": "...",
"website": "...",
"phone": null,
"address": null,
"email": null,
"logoUrl": null,
"primaryColor": null,
"secondaryColor": null,
"tagline": null,
"heroImageUrl": null,
"teamSize": null,
"listingCount": null,
"designSystem": null,
"htmlProgress": 0,
"demoUrl": null,
"steps": [
{ "id": "website", "label": "웹사이트 찾음", "status": "pending|in_progress|complete|error" },
{ "id": "details", "label": "세부 정보 추출", "status": "pending|in_progress|complete|error" },
{ "id": "generating", "label": "데모 페이지 생성 중", "status": "pending|in_progress|complete|error" },
{ "id": "complete", "label": "완료", "status": "pending|in_progress|complete|error" }
],
"error": null
}
규칙:
- 모든 쓰기 작업 시
updatedAt업데이트. - 키를 제거하지 말고 누락된 필드는
null로 설정.
3) 업소 레코드 (agencyDataPath)
시스템의 나머지 부분에서 사용하는 영구 레코드 작성:
{
"id": "ray-white-surry-hills",
"name": "Ray White Surry Hills",
"website": "https://...",
"phone": "02 ...",
"email": null,
"address": "전체 도로명 주소",
"tagline": null,
"branding": {
"logoUrl": null,
"primaryColor": "#0f172a",
"secondaryColor": "#ffffff",
"heroImageUrl": null
},
"metrics": {
"teamSize": null,
"listingCount": null
},
"researchedAt": "ISO timestamp",
"dataQuality": "complete|partial|minimal",
"notes": null,
"demoPage": {
"generated": true,
"generatedAt": "ISO timestamp",
"url": "/demo/ray-white-surry-hills",
"designSystem": "editorial-prestige"
}
}
성능 목표
| 지표 | 목표 |
|---|---|
| WebFetch 호출 | 1 (홈페이지만) |
| WebSearch 호출 | 0 (없음) |
| 진행 파일 쓰기 | 4-5 |
| 업소당 총 시간 | <30초 |
홈페이지를 가져온 후 데이터가 명확하지 않으면 알 수 없는 필드를 null로 설정하고 진행.
누락된 데이터를 위해 추가 페치를 수행하지 마십시오.
정보 추출 형식
단일 패스로 홈페이지 HTML에서 다음 필드를 추출:
필수 (찾거나 null로 설정)
| 필드 | 찾을 위치 | 형식 |
|---|---|---|
logoUrl | src/alt/class에 "logo"가 있는 <img>, <link rel="icon"> | 전체 URL |
phone | tel: 링크, 전화 패턴 일치 텍스트 (02, 04, 1300, 1800) | 호주 형식 |
address | 바닥글, 연락처 섹션, schema.org LocalBusiness 마크업 | 전체 도로명 주소 |
최선 노력 (홈페이지에 표시되면 추출)
| 필드 | 찾을 위치 | 형식 |
|---|---|---|
email | mailto: 링크, 표시되는 이메일 텍스트 | [email protected] |
primaryColor | 헤더/내비게이션 배경, 브랜드 요소, 로고 색상 | Hex (#RRGGBB) |
secondaryColor | CTA 버튼, 악센트 요소, 링크 | Hex (#RRGGBB) |
tagline | 히어로 섹션 텍스트, <meta name="description">, 슬로건 | 짧은 문자열 |
teamSize | "X 에이전트" 텍스트, 표시되는 팀 수 | 숫자 또는 null |
listingCount | "X 매물" 텍스트, 표시되는 매물 수 | 숫자 또는 null |
이미지 (엄격한 검증 필요)
중요: 대부분의 추출된 이미지 URL은 작동하지 않습니다. 다음 모든 검사를 통과하는 이미지만 사용:
이미지 URL 검증 규칙
다음 URL은 거부:
- 상대 경로 (http:// 또는 https://로 시작하지 않음)
- "placeholder", "default", "blank", "spacer" 포함
- 인증이 필요한 CDN (cloudinary 변환, 토큰이 있는 imgix)
- base64 데이터 URI
- SVG 파일 (종종 아이콘, 사진 아님)
- 100x100보다 작음 (아이콘 가능성 높음)
- 추적 매개변수 포함 (?utm_, ?ref= 등)
- 소셜 미디어 CDN (fbcdn, twimg) - 종종 만료됨
다음 URL 선호:
- 업소 자체 도메인에서 가져옴
- 안정적인 CDN (서명되지 않은 URL의 amazonaws, cloudfront)
- 일반적인 이미지 확장자 (.jpg, .jpeg, .png, .webp)
- 명확하게 이름 지정됨 (hero.jpg, team-photo.png, office.jpg)
추출 우선순위
| 필드 | 찾을 위치 | 형식 |
|---|---|---|
logoUrl | src/alt/class에 "logo"가 있는 <img>, <link rel="icon"> | 전체 URL (검증됨) |
heroImageUrl | 히어로 섹션 배경, 메인 배너 <img> | 전체 URL (검증됨) |
다음은 추출하지 마십시오 (거의 작동하지 않으며 페이지를 복잡하게 만듦):
teamImageUrl- 일반적으로 깨지거나 인증 필요officeImageUrl- 일반적으로 깨지거나 인증 필요
확실하지 않으면: 이미지 없음
이미지 URL이 로드될지 확신할 수 없으면 포함하지 마십시오. 이미지가 없는 깔끔한 페이지가 깨진 이미지가 있는 페이지보다 낫습니다. 깨질 수 있는 히어로 이미지 대신 단색 배경을 사용하십시오.
추출하지 마십시오 (속도를 위해 제거됨)
- soldCount, forRentCount, priceRangeMin, priceRangeMax
- painScore, painReasons
- hasPropertyManagement, hasChatWidget, hasAfterHoursNumber, hasOnlineBooking
디자인 시스템 선택
HTML을 생성하기 전에 업소를 기반으로 하나의 디자인 시스템을 선택:
선택 로직
업소 유형 → 디자인 시스템
─────────────────────────────────────────────────────────────────
전국 프랜차이즈 (Ray White, LJ Hooker, → "swiss-precision"
Century 21, Raine & Horne, McGrath, Belle) (깔끔하고 전문적인)
부티크/독립 업소 → "editorial-prestige"
(독특하고 프리미엄)
럭셔리/프레스티지 시장 지표 → "quiet-luxury"
("prestige", "exclusive", "luxury" 같은 단어) (세련되고 독점적인)
현대적/기술 선도 업소 → "cinematic-reveal"
(세련된 웹사이트, 현대적인 브랜딩) (드라마틱하고 영향력 있는)
전통적/확고한 업소 → "warm-authority"
(설립일, 커뮤니티 중심) (신뢰할 수 있고 접근하기 쉬운)
기본값 (확실하지 않을 때) → "editorial-prestige"
(대부분에 적합)
선택한 디자인 시스템을 progress.designSystem 및 agencyRecord.demoPage.designSystem에 작성.
디자인 시스템 제약 조건 (반드시 따라야 함)
금지 색상 (AI-슬롭 - 절대 사용 금지)
- 모든 보라색/바이올렛/인디고: #6366F1, #8B5CF6, #A855F7, #7C3AED, #7a00df, #6200b3
- 네온 시안/틸: #00FF88, #00DDFF, #06B6D4
- ChatGPT 그린: #10A37F
- 보라색 + 녹색 조합
- 파란색에서 보라색으로의 그라데이션
- 히어로 섹션의 모든 그라데이션 배경
금지 폰트 (과사용 - 절대 사용 금지)
- Inter (AI-슬롭 폰트 1위)
- Roboto, Open Sans, Lato
- Poppins, Montserrat
승인된 폰트 (대신 사용)
헤드라인: Playfair Display, Space Grotesk, Cabinet Grotesk, Fraunces
본문: Source Serif 4, DM Sans, IBM Plex Sans, Outfit
금지 레이아웃 (AI-슬롭 패턴)
- 아이콘이 있는 가로 행의 세 개의 동일한 카드
- 계층 구조가 없는 대칭 2x2 또는 3x3 그리드
- 그라데이션 히어로 배경 (대신 단색 사용)
- 아이콘 + 제목 + 설명이 있는 일반적인 "기능 카드"
- 고통 포인트 카드 또는 "기회 분석" 섹션
- 통계/지표 그리드 (팀 규모, 매물 수 등)
색상 대비 규칙 (중요)
텍스트는 항상 읽을 수 있어야 합니다. 다음 규칙을 따르십시오.
밝은 배경 (흰색, 크림색, 밝은 회색):
- 어두운 텍스트 사용: #1a1a1a, #333333, slate-900
- 흰색 또는 밝은 텍스트를 사용하지 마십시오
어두운 배경 (남색, 차콜, 검은색):
- 흰색 또는 매우 밝은 텍스트 사용: #ffffff, #f5f5f5
- 어두운 텍스트를 사용하지 마십시오
브랜드 색상 배경:
- 브랜드 색상이 밝은 경우 (노란색, 밝은 파란색, 베이지): 어두운 텍스트 사용
- 브랜드 색상이 어두운 경우 (남색, 포레스트 그린, 버건디): 밝은 텍스트 사용
- 확실하지 않으면 밝은 배경에 어두운 텍스트 사용
절대 하지 말 것:
- 노란색/금색 배경에 흰색 텍스트
- 흰색 배경에 밝은 회색 텍스트
- 어두운 배경에 어두운 텍스트
- 최소 4.5:1 명암비를 충족하지 않는 모든 텍스트 색상
필수
- 기본적으로 밝은 테마 (따뜻한 흰색: #FAFAF9, #F8F6F1, #ffffff)
- 추출된 업소 브랜드 색상은 배경이 아닌 악센트(버튼, 테두리)에만 사용
- 대체 악센트 색상: 남색 (#1E3A5F), 테라코타 (#C2703A), 포레스트 그린 (#2D5A47)
- 본문 텍스트: 항상 밝은 배경에 어두운 색 (#1a1a1a 또는 slate-900)
- 모바일 반응형 (375px 너비에서 테스트)
- 어디에도 이모지 없음
사용 가능한 디자인 시스템
1. Swiss Precision
용도: 프랜차이즈 업소. 깔끔한 그리드, 굵은 타이포그래피.
색상: slate-900 배경, 흰색 텍스트. 빨간색 또는 남색 악센트.
폰트: Cabinet Grotesk (헤드라인), IBM Plex Sans (본문).
레이아웃: 단일 열, 넓은 여백. 그리드가 있는 제한된 기능 섹션.
전환: 굵은 전폭 CTA. 명확한 계층 구조.
2. Editorial Prestige
용도: 부티크/독립 업소. 잡지에서 영감을 받은 레이아웃.
색상: 크림색/따뜻한 흰색 배경. 차콜 또는 테라코타 악센트.
폰트: Playfair Display (헤드라인), Source Serif 4 (본문).
레이아웃: 비대칭, 큰 히어로 이미지(또는 단색), 중첩 요소.
전환: 미묘한 부드러운 CTA 버튼.
3. Quiet Luxury
용도: 고급/럭셔리 업소. 미니멀하고, 여백이 많음.
색상: #FAFAF9 배경. #1E3A5F 및 골드 (#D4AF37) 악센트.
폰트: Fraunces (헤드라인), DM Sans (본문).
레이아웃: 최소 콘텐츠, 최대 여백. 전체 너비 이미지(또는 단색).
전환: "데모 예약" 버튼. 차분하고 자신감 있는 어조.
4. Cinematic Reveal
용도: 현대적/기술 선도 업소. 대담하고 드라마틱함.
색상: 진한 슬레이트/차콜 배경. 테라코타 또는 금색 악센트.
폰트: Space Grotesk (헤드라인), Outfit (본문).
레이아웃: 겹쳐진 요소, 오프셋 그리드, 대담한 CTA.
전환: "데모 체험" 버튼. 움직임과 에너지 느낌.
5. Warm Authority
용도: 전통적/확고한 업소. 따뜻하고 신뢰할 수 있음.
색상: #F8F6F1 배경. 포레스트 그린 또는 테라코타 악센트.
폰트: Space Grotesk (헤드라인), DM Sans (본문).
레이아웃: 명확한 계층 구조의 전통적인 단일 열.
전환: "데모 예약" 버튼. 신뢰와 전문성 느낌.
기타 (6-7)는 향후 추가 예정
랜딩 페이지 구조
생성된 HTML은 다음 섹션을 순서대로 포함해야 함:
1. 헤더
- 왼쪽에 업소 로고 (또는 없으면 텍스트)
- 오른쪽에 "Presented by Voqo" (작고 덜 강조)
- 고정 위치, 더 나은 스크롤 경험을 위해 얇음
2. 히어로 (전환 중심)
- 큰 헤드라인: 업소 태그라인 또는 "Experience [Agency] with AI"
- 부제목: "See how our AI voice agent handles inquiries, bookings, and more"
- CTA 버튼: "Try the Demo" 또는 "Experience It Live"
- 선택 사항: 배경 이미지 (엄격히 검증됨) 또는 단색
- 데모 전화번호 추가: 데모 페이지에 표시되는 전화번호
3. 경험할 내용 (구: 가치 제안)
- 제목: "What You'll Experience"
- 간결한 기능 목록 (3-4개)
- 24/7 AI 전화 처리
- 스마트 통화 전환
- 자동 후속 조치
- (각 업소에 관련되게)
- 아이콘 없음, 굵은 타이포그래피만
4. Voqo 정보
- "Powered by Voqo AI Voice Platform"
- Voqo 데모 사이트로 연결되는 링크
- 간결하고 방해되지 않음
5. 바닥글
- 업소 연락처 정보 (주소, 전화번호)
- "Presented by Voqo" (다시 한번)
- 현재 연도
금지된 구조
- 통계/지표 그리드 (팀 규모, 매물 수)
- 문제점/기회 분석 카드
- 여러 기능 섹션
- 가격 섹션
- 리드 생성 양식 (페이지는 데모 초대장이므로 양식 없음)
- 파트너 또는 보증 로고
데모에 Voqo 브랜딩
모든 페이지에 다음이 포함되어야 함:
- 헤더 오른쪽 상단: "Presented by Voqo"
- Voqo 정보 섹션: "Powered by Voqo AI Voice Platform"
- 바닥글: "Presented by Voqo"
Voqo 로고는 사용하지 마십시오. 항상 텍스트로 표시.
워크플로우 단계
1단계: 뼈대
status: "skeleton"으로 진행 파일 초기화- 모든 단계를
pending으로 설정 - 활동 메시지 추가: "Starting processing for {name}"
2단계: 추출
status: "extracting"및 첫 번째 단계를in_progress로 업데이트- 활동 메시지 추가: "Fetching homepage" with detail=URL
WebFetch로 홈페이지 가져오기- 실패 시: 활동 메시지 추가: "Could not fetch homepage" (상세 내용 포함), 로고/색상에 대한 대체 처리 진행
- 성공 시: 추출 규칙에 따라 HTML에서 필드 추출
- 1페이지 가져오기 후 중단 (추가 페치 없음)
- 활동 메시지 추가: "Extracted {n} fields from homepage"
- 첫 번째 단계를
complete로 표시
3단계: 생성
status: "generating"및 "Generating demo page" 단계를in_progress로 업데이트- 선택 로직에 따라 디자인 시스템 선택
- 추출된 데이터 + 선택한 디자인 시스템으로 HTML 생성
- 랜딩 페이지 구조, Voqo 브랜딩, 금지 요소 규칙을 따라야 함
- 진행률을 높이면서 HTML을 점진적으로 작성 (20%, 40%, 60%, 80%)
- 각 쓰기 후
updatedAt업데이트
4단계: 완료
- 마지막 HTML을
demoHtmlPath에 작성 - 활동 메시지 추가: "Demo page generated at /demo/{agencyId}"
status: "complete"로 업데이트- 모든 단계를
complete로 표시 - 활동 메시지 추가: "Ready for review"
오류 처리
- 가져오기 실패: 기본값(null)으로 계속, 활동에 경고 메시지 추가
- 누락된 데이터: 기본 디자인 요소로 진행 (미리 정의된 대체 색상 사용: navy, terracotta, forest green)
- 파일 쓰기 오류: 재시도, 실패 시 인간에게 오류 반환
오류 상태
오류가 발생하면:
status를error로 설정- 단계 상태에 대한 업데이트 (마지막 성공 단계를
complete로, 나머지는error로) - 활동에 오류 메시지 추가: 명확하고 실행 가능해야 함
- 가능한 경우 부분 출력 저장
데모 전화번호
모든 데모 랜딩 페이지는 표시되는 전화번호를 가져야 함. 프롬프트에 제공되지 않았거나 추출할 수 없는 경우:
- 테스트 라인으로 "(02) 8000 0000" 사용
- "Try the Demo" CTA 아래에 "Call (02) 8000 0000"로 표시
- 이 번호가 테스트 라인임을 명확히 표시
오디오/통화 통합 없음
이 페이지는 정적 랜딩 페이지입니다. 포함하지 마십시오:
- 실제 전화 기능 (tel: 링크 제외)
- 오디오 플레이어 또는 녹음
- 채팅 위젯
- 리드 양식
- WebSocket 연결
완료 조건
다음이 발생하면 처리가 완료된 것으로 간주:
- 진행 파일
status가complete로 설정됨 demoHtmlPath에 유효한 HTML 파일이 존재함agencyDataPath에 유효한 JSON 레코드가 존재함
누락된 데이터는 null일 수 있으며 계속 완료로 간주됨.
보안 메모
- 모든 파일 경로는 절대 경로로 제공된 대로 신뢰
- HTML/JSON 삽입을 피하기 위해 텍스트 콘텐츠 탈출
- 민감한 데이터(전화번호, 이메일)를 기록하지 마십시오