가공되지 않은 PRD를 인터랙티브 디자인 도구로 전환하세요

개요

Computer는 단순한 정적 목업을 넘어, 가공되지 않은 PRD를 완전히 인터랙티브한 제품 디자인 환경으로 전환할 수 있습니다. 요구사항을 구조화된 화면과 플로우로 파싱하고, 일관된 HTML/CSS UI를 생성하며, 단일 웹 앱 내에서 범위 지정 편집, 버전 기록, 브랜칭을 통해 팀이 디자인을 반복적으로 개선할 수 있도록 지원합니다.

주요 결과물

Computer는 리치 텍스트 에디터에서 PRD를 가져와 구조화된 요소로 파싱한 후, 실제 내비게이션으로 연결된 현실적인 HTML/CSS 화면 세트로 전환하는 완전한 기능의 DesignFlow AI 웹 앱을 제공했습니다.

파싱 플로우는 화면, 사용자 역할, 플로우, 데이터 모델, 엣지 케이스를 사이드바의 편집 가능한 태그 스타일 카드로 추출하므로 제품 팀이 디자인을 생성하기 전에 구조를 조정할 수 있습니다. 생성 시 DesignFlow AI는 일관된 테마, 실제와 같은 데이터, 페이지 간 클릭 이동이 가능한 공용 내비게이션 바를 갖춘 여러 작업 관리 스타일 화면(대시보드, 작업 보드, 작업 상세 정보, 팀원, 설정)을 생성합니다.

이 앱은 3가지 프리셋 테마와 사용자 지정 색상 및 폰트를 통해 디자인 일관성을 유지하며, 한 번의 클릭으로 타이포그래피, 간격, 컴포넌트에 해당 토큰을 적용합니다. 범위 지정 편집은 모든 프롬프트가 특정 화면과 섹션을 타겟팅하는 필수 범위 선택기로 구현됩니다. 내부적으로 앱은 데이터 섹션(data-section) 속성을 사용하여 선택한 영역만 격리하고 수정하며 다른 모든 화면은 변경하지 않고 그대로 둡니다.

각 편집 작업은 추가 및 삭제가 강조 표시된 시각적 차이를 생성하고, 프롬프트와 결과를 버전 타임라인에 기록하며, 타임라인 슬라이더를 통해 이전 버전에서의 실행 취소/다시 실행 및 브랜칭을 지원합니다. 사이트맵/맵 보기, 썸네일 그리드, 내보내기 유틸리티(자체 포함 HTML, PNG 스크린샷, 화면별 코드 복사)로 워크플로우가 완성되며, 모든 기능이 바닐라 JS로 구축되어 샌드박스 처리된 iframe 내에서 원활하게 실행됩니다.

확대

팁

• PRD 가정 구체화하기 – Computer가 입력에 더 구체적인 형태를 갖추도록 합니다. 예: "SaaS 생산성 앱을 기본 도메인으로 가정하고, PRD가 모호한 경우 대시보드 + 상세 정보 + 설정 패턴을 선호합니다."
• 편집 시맨틱 제한하기 – 가장 중요한 범위 지정 편집 유형을 지정합니다. 예: "명시적으로 요청되지 않는 한 마이크로 카피 편집보다 레이아웃 및 계층 구조 변경(섹션, 카드, 패널)을 우선시합니다."
• 내보내기 대상 정의하기 – 출력물을 어떻게 사용할 것인지 Computer에 알려줍니다. 예: "주요 리팩터링 없이 디자인 시스템 저장소 및 프런트엔드 코드베이스에 쉽게 복사할 수 있도록 내보낸 HTML/CSS를 최적화합니다."