플랫폼에서 탐색
페이지, 버전 및 흐름 단계별로 캡처된 화면과 동영상을 살펴보세요.
인터페이스 컨텍스트 플랫폼
을 모든 각도에서 이해하세요.
Reconstruct는 여러 플랫폼의 제품과 애플리케이션에 대한 스크린샷, 동영상 및 구조화된 컨텍스트를 제공합니다. 플랫폼에서, MCP를 통한 에이전트로, 또는 API로 살펴보세요.
app.example.com / settings
계정 / 설정
Reconstruct / capture 저장됨
페이지/settings
뷰포트데스크톱 · 모바일
요소기하 정보 + 스타일
상태화면 + 시나리오
제품
하나의 소스. 세 가지 사용 방법.
하나의 카탈로그가 시각적 탐색을 에이전트 및 개발 도구와 연결합니다.
에이전트에 컨텍스트 제공
MCP를 통해 에이전트에 페이지 구조, 요소 치수 및 저장된 화면을 제공하세요.
API로 개발
자체 도구와 워크플로에 구조화된 제품 및 인터페이스 컨텍스트를 통합하세요.
MCP 벤치마크 결과
더 적은 시간. 더 적은 토큰.
더 적은 총 토큰 수
더 많은 컨텍스트. 더 적은 토큰 사용.
절약한 시간90.4%
절약한 비용89.0%
더 적은 모델 호출66.7%
더 빠른 재구성. 더 적은 비용.
벤치마크에서 관찰된 절감 효과입니다. 결과는 작업에 따라 다릅니다.
작동 방식
찾아보세요. 또는 요청하세요.
카탈로그에 있는 제품으로 시작하세요. 원하는 제품이 없으면 추가를 요청하세요.
- 01
제품 찾기
캡처된 카탈로그를 탐색하세요.
- 02
누락된 항목 요청
요청을 제출하면 운영 담당자가 제품을 카탈로그에 추가합니다.
- 03
작업 방식 선택
플랫폼, MCP 또는 API.
AI 에이전트를 위한
에이전트에게 제공 실제 모습.
에이전트는 MCP로 페이지, 요소 및 흐름을 검사하고 저장된 데스크톱 및 모바일 화면과 결과를 비교합니다.
Reconstruct 스킬은 검사, 디자인, 구현 및 검증을 위한 즉시 사용 가능한 워크플로를 제공합니다. 작업에 필요한 스킬을 설치하고 MCP를 연결하여 캡처된 제품 컨텍스트를 활용하세요. 스킬 살펴보기 또는 다음 가이드 참고 에이전트 연결 가이드.
에이전트로 시작capture / product / versionMCP
product / version pages
01/dashboard데스크톱 · 모바일
02/settings데스크톱 · 모바일
03/billing데스크톱 · 모바일
저장된 캡처 · 구조 예시
에이전트로 시작
에이전트에 제공하세요 살펴볼 공간.
코딩 에이전트에 Reconstruct MCP를 연결하고 프롬프트로 시작하세요. 편집기를 떠나지 않고 에이전트가 캡처된 제품을 검사할 수 있습니다.
01
MCP 서버 연결
액세스가 활성화되면 에이전트의 MCP 설정에 이 URL을 추가하세요. 다음을 참고하세요: 에이전트 연결 가이드.
https://reconstruct.dev/mcp02
Reconstruct 스킬 설치
프로젝트에서 이 명령을 실행하고 필요한 워크플로를 선택하세요. 다음을 참고하세요: 스킬 가이드.
npx skills add https://reconstruct.dev03
캡처된 제품 선택
열기 Reconstruct platform 제품을 선택한 후 에이전트에 캡처된 버전과 페이지를 찾아 달라고 요청하세요.
04
프롬프트 붙여넣기
아래 예시로 시작하고 대괄호 안의 내용을 바꾸세요.
Reconstruct MCP를 사용하려면 캡처된 카탈로그에 접근할 수 있어야 합니다.
에이전트 프롬프트MCP
제품 이해하기
설치된 reconstruct-inspect 스킬과 Reconstruct MCP로 [product]를 탐색해 주세요. 사용 가능한 캡처 버전, 환경, 페이지 및 뷰를 고정하고 누락된 식별자를 추측하지 마세요. 이용 가능한 페이지, 흐름, 스크린샷 및 동영상을 보여주세요. 구현을 제안하기 전에 캡처된 내용을 요약하고 누락된 부분을 알려주세요.
보내기 전에 대괄호 안의 내용을 바꾸세요
시작하기
하나의 인터페이스. 다양한 가능성.
캡처된 제품을 살펴보거나 워크플로에 맞는 액세스 수준을 찾아보세요.