Communitygithub.com

bishoe01/blueprint-extractor

슬래시-커맨드 스타일 URL-to-DESIGN.md 추출기. 사용자가 /extract를 입력하거나, 공개 HTTPS 웹사이트 URL에서 DESIGN.md 추출을 요청하거나, 디자인 시스템, 디자인 청사진, 브랜드 토큰, 비주얼 스타일, UI 영감, 에이전트 지원 디자인 스펙을 URL로부터 요청할 때 사용합니다.

blueprint-extractor란 무엇인가요?

이 스킬은 주어진 공개 HTTPS URL에서 디자인 패턴을 추출하여 `DESIGN.md` 문서를 생성하는 워크플로우를 제공합니다. 사용자가 `/extract <url>` 형식으로 명령을 입력하거나 자연어로 추출을 요청하면, 해당 웹사이트의 CSS, computed style, 스크린샷 등의 증거를 수집하고 분석하여 체계적인 디자인 토큰(색상, 타이포그래피, 간격, 레이아웃 등)을 추출합니다. 추출된 토큰은 `blueprint.json`에 저장되며, 이를 바탕으로 9개 섹션으로 구성된 표준 `DESIGN.md` 템플릿을 자동으로 작성합니다. 이 과정에서 템플릿 준수 여부, 토큰 신뢰도 등을 자체 검증하고, 불확실한 값은 정성적 관찰로 표시하여 정확성을 높입니다. Claude Code, Cursor 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, 기존 프로젝트의 도메인 정보는 유지하면서 타겟 사이트의 비주얼 언어만 전이하는 데 중점을 둡니다.

지원 대상~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add bishoe01/blueprint-extractor
원본 보기→모든 스킬 둘러보기

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

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Extract

공개 웹사이트로부터 근거 기반 DESIGN.md를 생성합니다. 관찰 가능한 디자인 패턴을 추출하되, 실행 가능한 코드로 사이트를 복제하거나 공식 브랜드 가이드라인을 주장하지 마십시오.

명령어 동작

사용자가 /extract <url>을 입력하면 이 워크플로우를 즉시 실행하라는 요청으로 처리합니다.

사용자가 /extract만 입력하면 공개 HTTPS URL을 요청하고, 사용자가 제공할 때까지 추출을 시작하지 않습니다.

기본 출력:

  • 증거 번들: .blueprint-extractor/<slug>/
  • 최종 문서: 사용자가 다른 경로를 요청하지 않는 한 현재 프로젝트의 DESIGN.md

워크플로우

  1. 대상 URL의 유효성을 검증합니다.
  2. 사용자 프로젝트에 .blueprint-extractor/<slug>/ 증거 폴더를 생성합니다.
  3. 공개 페이지 데이터에서 증거를 수집합니다:
    • HTML 제목 및 메타데이터
    • 연결된 CSS 및 인라인 CSS
    • 대표 요소의 computed style
    • 브라우저 도구 사용 가능 시 데스크톱 스크린샷 1440x900
    • 브라우저 도구 사용 가능 시 모바일 스크린샷 390x844
  4. 가져온 CSS, computed style 또는 기록된 스크린샷에서만 구체적인 토큰을 추출합니다.
  5. 최종 산문을 작성하기 전에 blueprint.json과 sources.json을 먼저 작성합니다.
  6. references/DESIGN_TEMPLATE.md의 정확한 9개 섹션 계약을 사용하여 DESIGN.md를 합성합니다.
  7. 최종 확정 전에 자체 검토 패스를 실행합니다:
    • 관찰된 컴포넌트 레시피로 구현 유용성 향상
    • 스크린샷으로 뒷받침되는 경우 정성적 테마 언어 개선
    • 추출된 증거와 스크린샷 추론 동작, 구현 가이드라인 분리
    • 추출된 CSS에서 보이거나 존재하지 않는 광범위한 제품 주장 제거
    • 대상 프로젝트의 도메인, 정보 구조 및 핵심 워크플로우는 유지하고 시각적 언어만 전이
    • 재사용 전 소스 도메인 컴포넌트 추상화(예: "playlist" → "collection list", "album art" → "visual thumbnail")
    • 정성적 또는 추론으로 표시되지 않는 한 DESIGN.md에서 지원되지 않는 예제는 제외
  8. 템플릿 및 증거에 대해 최종 Markdown의 유효성을 검증합니다.
  9. 최종 응답에 출력 경로와 신뢰도 경고를 보고합니다.

URL 안전

URL이 안전하지 않거나 범위를 벗어난 경우 간단한 설명과 함께 요청을 거부합니다:

  • https://가 아님
  • localhost, loopback, private IP, link-local 또는 private hostname
  • 인증 필요 또는 페이월 콘텐츠
  • HTML이 아닌 응답
  • 연결 불가, 빈 응답, 또는 너무 많은 리디렉션
  • 로그인 우회, 비공개 대시보드 스크래핑, Figma 추출 또는 실행 가능 코드 복제 요청

폼, 로그인 흐름, 체크아웃 흐름, 파괴적 동작 또는 사용자별 페이지를 따르지 마십시오.

추출

scripts/extract-blueprint.mjs가 존재하고 의존성이 사용 가능하면 먼저 실행하고 그 아티팩트를 진실 공급원으로 사용합니다. 사용할 수 없으면 사용 가능한 브라우저, HTTP 및 파일 시스템 도구를 사용하여 동등한 증거를 수동으로 수집합니다.

시각적 추측보다 결정적 증거를 선호합니다:

  • 색상은 CSS, computed style, SVG 속성 또는 샘플링된 스크린샷에서 가져와야 합니다.
  • 글꼴 패밀리는 CSS, computed style 또는 @font-face에서 가져와야 합니다.
  • 중단점은 미디어 쿼리에서 가져오거나 스크린샷에서 추론된 것으로 명시적으로 표시해야 합니다.
  • 간격, 반경, 그림자, 테두리 및 모션은 CSS 또는 computed style을 인용해야 합니다.
  • 스크린샷만 사용 가능한 경우 관찰 내용을 정성적으로 유지하고 가상의 숫자 토큰을 피하십시오.

blueprint.json 및 sources.json을 생성하거나 편집하기 전에 references/EXTRACTION_SCHEMA.md를 읽으십시오. 추출이 부분적이거나 차단된 경우 references/FAILURE_MODES.md를 읽으십시오. 생성된 DESIGN.md를 좋은 예제 또는 릴리스 품질 출력으로 처리하기 전에 references/QUALITY_CHECKLIST.md를 읽으십시오.

합성 규칙

사용자가 요청한 언어를 사용하십시오. 언어가 요청되지 않은 경우 DESIGN.md를 영어로 작성하십시오.

최종 DESIGN.md는 정확히 다음 H2 섹션을 이 순서대로 포함해야 합니다:

  1. 1. Visual Theme & Atmosphere
  2. 2. Color Palette & Roles
  3. 3. Typography Rules
  4. 4. Component Stylings
  5. 5. Layout Principles
  6. 6. Depth & Elevation
  7. 7. Do's and Don'ts
  8. 8. Responsive Behavior
  9. 9. Agent Prompt Guide

DESIGN.md에 출처, 신뢰도 또는 부록 섹션을 추가하지 마십시오. 신뢰도 경고는 최종 어시스턴트 응답 또는 증거 번들에 넣으십시오.

DESIGN.md의 각 구체적인 토큰은 blueprint.json으로 추적 가능해야 합니다. 불확실한 발견은 정확한 값 대신 정성적 관찰로 표시하십시오.

최종 문서를 건조한 토큰 덤프로 만들지 마십시오. 증거를 재사용 가능한 디자인 가이드라인으로 변환하십시오:

  • 캡처된 페이지에서 볼 수 있는 경우에만 사이트 아키타입 이름을 지정하십시오(예: "dashboard shell", "editorial landing page", "commerce catalog", "media player", "docs site").
  • 유명 브랜드는 보수적으로 다루십시오: 캡처된 페이지, CSS 또는 computed 샘플이 지원하지 않는 한 잘 알려진 제품 패턴, 브랜드 전설 또는 공식 시스템 주장을 가져오지 마십시오.
  • 대상 앱의 도메인 모델, 정보 구조 및 사용자 워크플로우를 유지하십시오. 소스 사이트는 시각적 언어를 제공할 뿐, 대상 프로젝트를 소스 사이트의 제품 카테고리로 전환할 권한을 부여하지 않습니다.
  • 전이 가능한 디자인 특성과 전이 불가능한 소스 도메인 객체를 분리하십시오. 색상, 타이포그래피, 간격, 밀도, 모양, 표면 레이어링 및 인터랙션 느낌을 전이하고, 사용자가 명시적으로 해당 제품 구조를 요청하지 않는 한 트랙, 플레이리스트, 카트, 문서 페이지, 대시보드 또는 체크아웃 흐름과 같은 도메인 객체는 전이하지 마십시오.
  • 소스 컴포넌트가 유용한 경우 도메인 중립적 패턴으로 표현하십시오: "playlist sidebar" 대신 "collection/navigation sidebar", "track row" 대신 "repeated content item", "album art" 대신 "visual thumbnail or accent block".
  • 산문에서 관찰된 토큰, 스크린샷 추론 레이아웃 동작 및 구현 가이드라인의 구분을 유지하십시오.
  • 관찰된 반복 컴포넌트를 간결한 레시피(용도, 표면, 타이포그래피, 간격, 반경, 테두리/그림자, 인터랙션)로 변환하십시오.
  • 일회성 장식 값보다 페이지 전체에 일반화되는 패턴을 선호하십시오.
  • 추출된 중단점과 구현 편의 중단점을 구분하십시오.
  • 7. Do's and Don'ts를 사용하여 강조 색상 남용, 지원되지 않는 컴포넌트 추가, 소스 사이트의 도메인 모델 가져오기, 대상 프로젝트의 제품 카테고리 변경 등 가능한 오독을 방지하는 간결한 제약 조건을 제공하십시오.
  • 9. Agent Prompt Guide를 실용적으로 만드십시오: 빠른 색상 참조, 예제 컴포넌트 프롬프트 및 증거가 지원하는 경우 반복 가이드라인.
  • 가이드라인은 영감을 주고 구현 준비가 된 상태로 유지하되, 에이전트가 대상 사이트를 복제하도록 지시하지 마십시오.

검증

완료 전:

  • DESIGN.md가 의도된 출력 경로에 존재하는지 확인합니다.
  • H2 섹션 이름과 순서가 references/DESIGN_TEMPLATE.md와 일치하는지 확인합니다.
  • 각 16진수 색상, 글꼴 패밀리, 중단점, 반경, 그림자 및 간격 값이 blueprint.json에 나타나거나 추론/정성적으로 명시적으로 표시되었는지 확인합니다.
  • 예제 또는 릴리스 후보를 생성할 때 출력이 references/QUALITY_CHECKLIST.md를 충족하는지 확인합니다.
  • 검증에 실패하면 증거를 수정하거나 지원되지 않는 값을 다운그레이드한 후 결과를 제시합니다.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community