Felo API PlatformFelo API Platform

콘텐츠

제품 브리프를 랜딩 페이지로 바꾸기

청중을 조사하고 브리프를 LiveDoc에 저장한 뒤 그 맥락으로 Landing Page 작업을 만들고 호스팅 페이지가 준비될 때까지 폴링합니다.

소요 시간30분난이도중급업데이트2026-10-30
대상창업자제품 마케팅성장 팀

프롬프트 복사

대괄호 항목을 바꾼 뒤 Claude Code, Codex 또는 터미널에 접근할 수 있는 AI에 붙여넣으세요. Felo 스킬을 설치하고 크레딧을 쓰기 전에 확인한 뒤 워크플로를 실행합니다.

[제품]을 위한 [대상] 대상 랜딩 페이지를 만들어 주세요.

목표: [가입 / 데모 / 대기자 명단]. 톤: [톤]. 언어: [언어].
소재: [제품 브리프 URL 또는 브리프 붙여넣기]. 반드시 포함: [증명 포인트, 가격, CTA].

Chat과 Web Fetch로 대상과 경쟁사 페이지 두세 개를 조사하세요. 브리프와 조사를 LiveDoc에 저장하고, 그 LiveDoc을 컨텍스트로 Landing Page 작업을 만드세요. 완료될 때까지 폴링하고 호스팅된 페이지 링크를 반환하세요.

다음을 작성해 주세요.
1. 페이지 개요: 히어로, 증명, 기능, 반론, CTA.
2. 호스팅된 페이지 링크.
3. 컨텍스트로 사용한 LiveDoc 링크.
4. 검증이 필요한 주장 체크리스트.

규칙:
- 지표, 고객, 후기, 가격, 컴플라이언스 주장을 지어내지 마세요.
- 모든 주장을 브리프나 가져온 페이지로 추적할 수 있게 하세요.
- 조사나 페이지 생성에 크레딧을 쓰기 전에 먼저 물어보세요.
- 게시하거나 도메인을 연결하지 말고, 검토용 호스팅 링크를 반환하세요.
- 개요를 ./landing-page-outline.md에 쓰고 채팅에서 요약해 주세요.

복사 내용에는 설치 단계와 안전 규칙도 포함됩니다.

완성되는 것

실행 시 예제 출력입니다. 실시간 생성이 아닙니다.

랜딩 페이지 개요 예시(발췌)

랜딩 페이지 개요

히어로: “탭 30개를 열지 않고 시장을 조사한다.” 서브헤드: 한 번에 출처와 초안 브리프. 증명: 브리프당 절약 시간, 모든 주장이 출처로 연결. 기능: 검색, 페이지 추출, X 신호, LiveDoc 증거. 반론: “숫자를 지어내나?” 아니다. 데이터가 없으면 “데이터 없음”. CTA: 질문 하나로 시작.

페이지: https://felo.ai/ai-page/... 컨텍스트: https://felo.ai/livedoc/...

실제 호출

개발자용: 같은 워크플로를 실행 순서대로 담은 복사 가능한 코드.

실제 API 호출 보기
  1. 청중과 대안 조사하기

    Chat으로 청중이 누구이고 무엇이 필요한지 묻고 Web Fetch로 경쟁사 페이지 2~3개를 읽습니다.

    landing.ts
    const BASE = "https://openapi.felo.ai";
    const headers = {
      Authorization: `Bearer ${process.env.FELO_API_KEY}`,
      "Content-Type": "application/json",
    };
    
    async function felo<T>(path: string, body?: unknown): Promise<T> {
      const res = await fetch(`${BASE}${path}`, {
        method: body ? "POST" : "GET",
        headers,
        body: body ? JSON.stringify(body) : undefined,
      });
      if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
      return res.json() as Promise<T>;
    }
    
    type ChatData = {
      data: { answer: string; resources: { link: string; title: string }[] };
    };
    type ExtractData = { data: { content: string } };
    
    const research = await felo<ChatData>("/v2/chat", {
      query: "Who is [audience] and what do they need from [product]?",
    });
    
    const pages = await Promise.all(
      research.data.resources.slice(0, 2).map((source) =>
        felo<ExtractData>("/v2/web/extract", {
          url: source.link,
          output_format: "markdown",
          with_readability: true,
        }).then((page) => ({ ...source, content: page.data.content })),
      ),
    );

    예제 출력

    { "answer": "…", "resources": [{ "link": "https://example.com", "title": "…" }] }
  2. 브리프를 LiveDoc에 저장하기

    LiveDoc을 만들고 제품 브리프를 문서 리소스로 추가하며 가져온 경쟁사 페이지도 붙입니다.

    landing.ts
    type LiveDocData = { data: { short_id: string } };
    
    const doc = await felo<LiveDocData>("/v2/livedocs", {
      name: "Landing page: [product]",
      description: "Product brief, audience research and competitor notes",
    });
    
    await felo(`/v2/livedocs/${doc.data.short_id}/resources/doc`, {
      title: "Product brief",
      content: "[paste the brief: audience, problem, proof, pricing, CTA]",
    });
    
    await felo(`/v2/livedocs/${doc.data.short_id}/resources/urls`, {
      urls: pages.map((page) => ({ url: page.link, title: page.title })),
    });
    
    console.log(doc.data.short_id); // page context
  3. 랜딩 페이지 작업 만들기

    /v2/landing_page에 페이지 프롬프트와 LiveDoc short_id를 보내 task_id를 받습니다.

    landing.ts
    type LandingTaskData = { data: { task_id: string } };
    
    const task = await felo<LandingTaskData>("/v2/landing_page", {
      query:
        "Create a landing page for [product] for [audience]. Goal: [signup]. " +
        "Use the product brief and research in the LiveDoc. Return a hero, proof, " +
        "features, objections and one CTA. Do not invent claims.",
      livedoc_short_id: doc.data.short_id,
    });
    
    console.log(task.data.task_id);

    예제 출력

    { "data": { "task_id": "019cad6d-e874-55ef-d577-686344b5a7e9" } }
  4. 완료될 때까지 폴링하기

    작업 기록을 조회해 COMPLETED가 되면 ai_page_html을 읽습니다.

    landing.ts
    type TaskState = {
      data: { task_status: string; ai_page_html?: string; ppt_url?: string };
    };
    
    async function waitForPage(taskId: string) {
      for (let attempt = 0; attempt < 40; attempt++) {
        const state = await felo<TaskState>(`/v2/tasks/${taskId}/historical`);
        if (state.data.task_status === "COMPLETED") {
          return state.data.ai_page_html ?? state.data.ppt_url;
        }
        if (["FAILED", "EXPIRED", "CANCELED"].includes(state.data.task_status)) {
          throw new Error(`Landing page task ${state.data.task_status}`);
        }
        await new Promise((resolve) => setTimeout(resolve, 3000));
      }
      throw new Error("Landing page task timed out");
    }
    
    const pageUrl = await waitForPage(task.data.task_id);
    console.log(pageUrl);

    예제 출력

    {
      "task_status": "COMPLETED",
      "ai_page_html": "https://felo.ai/ai-page/9qiLTmT77fA3aVurrMHvRJ",
      "ppt_url": "https://felo.ai/slides/9qiLTmT77fA3aVurrMHvRJ"
    }
  5. 공유 전 리뷰하기

    주장, 가격, 법무 표현, CTA 링크를 확인한 뒤 공유합니다.

포함되는 것

  • 공개 페이지 기반 청중·경쟁사 조사
  • 제품 브리프와 조사를 저장한 LiveDoc
  • 그 맥락에서 생성된 호스팅 페이지
  • 공유 전 주장·링크·CTA 리뷰 목록

하지 않는 것

  • 호스팅 페이지만 만들고 사이트 배포나 자체 도메인 연결은 하지 않음
  • 생성 카피는 공유 전 사람 리뷰가 필요
  • A/B 테스트나 analytics 연동은 하지 않음
  • 브리프와 페이지에 없는 주장은 검증할 수 없음
  • 로고, 브랜드 시스템, 맞춤 일러스트는 만들지 않음

자주 묻는 질문

무엇을 생성하나요?

제품 브리프와 조사에 기반해 Felo에 호스팅되는 랜딩 페이지입니다. 링크를 받는 것이지 배포된 사이트가 아닙니다.

자체 도메인을 쓸 수 있나요?

이 워크플로에서는 쓰지 않습니다. 리뷰용 호스팅 페이지를 반환하고 도메인 연결과 배포는 별도 단계입니다.

고객 후기나 지표를 지어내나요?

아니요. 프롬프트가 생성을 금지하고 모든 주장을 브리프나 가져온 페이지에 연결합니다. 근거 없는 내용은 제외합니다.

반복 개선할 수 있나요?

네. LiveDoc의 브리프를 수정하고 새 맥락으로 새 Landing Page 작업을 만듭니다.

맞춤 이미지도 디자인하나요?

페이지 구조와 카피를 담당합니다. 맞춤 일러스트와 브랜드 소재는 범위 밖입니다.

페이지 하나 비용은?

조사와 페이지 생성은 사용량 기반 크레딧입니다. 현재 요금은 가격 페이지에 있고 프롬프트는 쓰기 전에 승인을 요청합니다.

관련 워크플로

내 방식으로 바꾸기

같은 레시피를 실제 배포 방식에 맞게 조정합니다.

PDF 브리프로 시작하기

multipart로 PDF를 보내면 플랫폼이 LiveDoc 리소스로 저장하고 페이지 작업에 넘깁니다.

두 포지셔닝 버전 만들기

같은 LiveDoc으로 다른 각도의 작업 두 개를 만들고 비교한 뒤 하나를 다듬습니다.

슬라이드에 재사용하기

같은 LiveDoc을 PPT 작업에도 넘겨 페이지와 deck의 스토리를 맞춥니다.

이 레시피의 배경이 되는 참고 페이지와 다음에 볼 곳.