Firecrawl 웹사이트 디자인 클론
사용자가 하나의 URL을 에이전트가 즉시 사용할 수 있는 실용적인 디자인 시스템 파일로 변환해 달라고 요청할 때 사용합니다.
기본 결과: 한 줄로 모든 웹사이트의 디자인 시스템을 추출하여 DESIGN.md 형식으로 정리합니다.
이 스킬은 Firecrawl 스크래핑을 중심으로 한 간단한 워크플로우처럼 작동해야 합니다: 페이지의 보이는 콘텐츠, 구조, 메타데이터, 링크 및 사용 가능한 시각적 신호를 수집한 다음, 그 결과를 깔끔한 디자인 시스템 마크다운 파일로 종합합니다.
온보딩 인터뷰
소스 URL, 대상 스택, 구현 요청 여부를 맥락에서 유추합니다. 사용자가 URL을 제공하고 디자인 시스템을 요청하면 즉시 진행합니다.
차단된 경우에만 최대 1-3개의 간결한 질문을 합니다. 예: 웹사이트 URL, DESIGN.md만 출력할지 아니면 함께 구현할지, 또는 필요한 대상 스택.
호스트 에이전트의 일반 프롬프트 또는 모달 UI를 사용합니다. 하네스별 질문 함수를 언급하지 마십시오.
Firecrawl 수집 계획
Firecrawl을 CLI 또는 동등한 도구 인터페이스를 통해 사용합니다. 항상 제공된 URL에 대해 두 개의 병렬 스크래핑으로 시작합니다:
- 구조화된 디자인 토큰과 전체 페이지 이미지 세트를 위해
branding및images형식을 함께 사용합니다. - 시각적 컨텍스트를 위한 전체 페이지 스크린샷.
예시:
firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty &
firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
wait
branding과 images를 하나의 호출에 결합해도 여전히 단일 크레딧으로 처리되며 필수입니다. branding 블록은 선별된 브랜드 에셋(logo, favicon, ogImage, logoHref)만 표시하므로, images 없이는 에이전트가 페이지의 실제 콘텐츠 이미지(히어로, 제품 사진, 캐러셀 슬라이드, 기능 시각 자료, 일러스트레이션, 액세서리 사진, 페이지 끝부분 아트워크 등)를 놓칠 수 있습니다. tesla.com/cybertruck과 같은 제품 페이지에서 branding 블록에는 히어로가 없습니다. images만이 메인 사이버트럭 히어로(예: Cybertruck-Hero-Desktop-NA-SA-APAC.png)와 페이지의 나머지 사진들을 반환합니다.
스크린샷 스크래핑이 로컬 파일 대신 원격 이미지 URL(예: 서명된 스토리지 링크)을 반환하는 경우, 동일한 .firecrawl/ 경로에 다운로드하여 DESIGN.md가 안정적인 로컬 에셋을 참조할 수 있도록 합니다.
구조화된 branding 출력을 색상, 타이포그래피, 컴포넌트, 브랜드 에셋(로고, 파비콘, ogImage), 개성 및 신뢰도 정보의 기본 소스로 사용합니다. images 목록을 페이지 콘텐츠 이미지(히어로 사진, 제품 사진, 캐러셀, 기능 시각 자료, 일러스트레이션, 장식 그래픽)의 진실 공급원으로 사용합니다. 스크린샷을 레이아웃, 계층 구조 및 전반적인 느낌에 대한 주요 시각적 참조 자료로 사용합니다. 최종 결과물에 이러한 형식이 충분하지 않은 경우에만 추가 형식을 보충합니다.
수집:
- 색상, 타이포그래피, 간격, 버튼, 로고, 브랜드 이미지, 개성 및 신뢰도에 대한 브랜딩 데이터
- 선별된 브랜드 에셋 외의 히어로, 제품, 기능 및 섹션 이미지를 위한 전체
images목록 .firecrawl/에 로컬로 저장되어DESIGN.md에 포함될 수 있는 전체 페이지 스크린샷- 제목, 카피 계층 구조, CTA, 탐색 및 섹션 순서가 필요한 경우 페이지 마크다운
- 브랜드, 제품 및 페이지 목적 단서가 필요한 경우 메타데이터 및 링크
- 브랜딩 출력, 이미지 목록 및 스크린샷만으로 클래스, 글꼴 이름, CSS 변수 또는 컴포넌트 구조를 유추하기에 충분하지 않은 경우에만 HTML
- 사용자가 더 넓은 사이트 시스템을 요청하는 경우에만 관련 페이지
기본적으로 과도하게 크롤링하지 마십시오. 첫 번째 버전은 하나의 대표 페이지에서 유용해야 합니다.
추출할 내용
사이트의 디자인 언어를 유추하고 문서화하십시오:
- 색상: 기본, 보조, 강조, 배경, 테두리, 텍스트, 상태
- 타이포그래피: 감지 가능한 글꼴 패밀리, 서체 크기 척도, 굵기, 줄 높이, 제목/본문 처리
- 간격: 컨테이너 너비, 섹션 리듬, 그리드 간격, 패딩 척도, 밀도
- 레이아웃: 페이지 구조, 히어로 패턴, 카드, 그리드, 탐색, 푸터, 반응형 가정
- 컴포넌트: 버튼, 입력 필드, 카드, 배지, 탐색 항목, 가격 책정 블록, 사용후기, 기능 행, 양식
- 이미지 및 아이콘: 스타일, 형태 언어, 일러스트레이션/사진 처리, 로고 제약 조건;
branding.images는logo,favicon,ogImage,logoHref만 전달하므로, 선별된 브랜드 에셋에 의존하지 말고 전체images목록에서 대표적인 히어로, 제품, 기능 및 섹션 이미지를 가져옵니다 - 모션 및 상호작용: 호버 상태, 전환, 관찰 가능하거나 유추 가능한 애니메이션 스타일
- 음성 및 콘텐츠 패턴: CTA 문구, 제목 스타일, 제품 카피 리듬
스크래핑 출력에서 값을 정확히 측정할 수 없는 경우에는 '추정됨'으로 표시하고 실용적인 근사치를 제공합니다.
병렬 작업
적절한 경우 하위 에이전트 또는 동등한 병렬 작업 실행기를 사용합니다. 자연스러운 분할 방식으로는 여러 페이지 사이트의 경우 연구자당 한 페이지씩, 또는 색상, 타이포그래피, 간격 및 컴포넌트에 대해 각각 한 명의 검토자를 두는 것입니다.
각 병렬 연구자는 소스 URL, 추출된 증거, 유추된 디자인 토큰 및 신뢰도 정보를 반환해야 합니다.
최종 결과물
다음 구조로 DESIGN.md를 생성하거나 반환합니다. 상단 근처에 전체 페이지 스크린샷을 포함하여 코딩 에이전트가 토큰과 함께 시각적 컨텍스트를 얻을 수 있도록 합니다.
# DESIGN.md: [소스 사이트]
## 소스
- URL: [소스 URL]
- 캡처 날짜: [날짜]
- 증거: [사용된 스크래핑/스크린샷/HTML/링크]
## 참조 스크린샷
이 스크린샷을 레이아웃, 계층 구조, 밀도 및 느낌에 대한 시각적 진실 공급원으로 사용하십시오. 아래 토큰은 동일한 페이지를 기계가 읽을 수 있는 형태로 설명합니다.
## 디자인 요약
[시각적 언어와 에이전트가 재현해야 할 내용에 대한 간략한 설명]
## 디자인 토큰
### 색상
[알려진 경우 16진수 값이 포함된 명명된 색상 역할; 추정된 값은 명확히 표시]
### 타이포그래피
[글꼴, 대체 권장 사항, 척도, 굵기, 제목/본문 규칙]
### 간격 및 레이아웃
[간격 척도, 컨테이너, 그리드, 반경, 그림자, 테두리]
## 컴포넌트
[버튼, 카드, 탐색, 양식, 히어로, 기능 섹션, 가격 책정, 푸터 등]
## 페이지 패턴
[섹션 순서, 일반적인 레이아웃, 반응형 동작]
## 콘텐츠 스타일
[음성, CTA 스타일, 제목 패턴, 카피 밀도]
## 에이전트 구축 지침
[AI 코딩 에이전트가 이 스타일로 새 사이트를 만들기 위해 따를 수 있는 구체적인 지침]
## 재실행 입력
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [stack]
output: DESIGN.md
사용자가 구현을 요청하는 경우, 먼저 DESIGN.md를 생성하거나 업데이트한 다음, 이를 구축의 진실 공급원으로 사용합니다.
품질 기준
- 사용자가 타사 로고, 이미지, 상표 또는 저작물에 대한 권리가 있다고 암시하지 마십시오.
- 일회성 관찰보다는 재사용 가능한 디자인 토큰을 선호합니다.
- 관찰된 사실과 추정된 근사치를 명확히 구분합니다.
- 다른 에이전트가 컨텍스트에 붙여넣고 구축할 수 있도록 출력을 간결하게 유지합니다.
- 검토를 위해 소스 URL과 스크래핑 결과물을 보존합니다.