opspresso/design
Produce wireframes, prototypes, frontend layouts, technical diagrams, evidence-led charts, HTML reports, interactive explainers, and generated or edited images.
시스템 구조, 처리 흐름, 상태 전이, 시퀀스, 데이터 모델, 조직도와 의존 관계 같은 기술·제품 다이어그램을 설계해 self-contained HTML과 inline SVG로 만들 때 로드한다. 정량 데이터 차트는 tufte-charts가, 화면 구조 탐색은 html-wireframe이, 목업과 프로토타입은 html-prototype이, 제품 UI 코드는 frontend-design이, 전체 리포트 구성은 html-report가, 단계로 나눠 만져 보며 이해하는 설명 지면은 html-explainer가 맡는다.
웹 페이지, 랜딩 페이지, 화면 레이아웃이나 React·Vue 컴포넌트를 설계하고 완성된 코드를 작성할 때 로드한다. 목적에 맞는 시각 방향과 반응형·접근성을 함께 다룬다. 구조가 아직 안 정해졌으면 html-wireframe이, 결정을 검증할 목업과 프로토타입은 html-prototype이, 화면 안에 들어갈 차트의 데이터 표현은 tufte-charts가, 개념을 큰 그림으로 설명하는 지면은 html-explainer가 맡는다.
개념이나 작동 원리를 아무것도 모르는 사람에게 그림으로 설명하는 인터랙티브 HTML 지면을 만들 때 로드한다. 큰 그림과 적은 글자로 단계를 쪼개고, 슬라이더·단계 이동· 토글처럼 만져 보면 이해되는 장치를 넣는다. "쉽게 설명해 줘", "아무것도 모르는 사람에게 설명하듯", "그림으로 보여 줘", "만져 보면서 이해되게", "개념 설명 페이지"가 트리거다. 조사 결과를 산문으로 읽는 리포트는 html-report가, 정적 다이어그램 한 장은 diagram-design이, 제품 결정을 검증하는 목업은 html-prototype이, 수치를 담은 차트는 tufte-charts가 맡는다.
결정을 검증할 목업이나 실제로 동작하는 프로토타입을 자체 완결 HTML 하나로 만들 때 로드한다. 시나리오 하나를 골라 상태 모델을 먼저 세우고 키보드까지 동작하게 만든다. "눌러볼 수 있게 만들어 줘", "목업 하나 뽑아 줘", "이 흐름 태워 보자"가 트리거다. 구조가 아직 안 정해졌으면 html-wireframe이, 제품에 들어갈 UI 코드는 frontend-design이, 읽는 리포트는 html-report가, 개념을 큰 그림으로 설명하는 지면은 html-explainer가 맡는다.
데이터·메모·조사 결과를 브라우저에서 읽을 리포트로 내보낼 때 로드한다. 외부 파일 없이 혼자 열리는 HTML 한 개를 만들고, 편집 지면처럼 여백과 활자로 읽히게 한다. "리포트 만들어줘", "HTML로 뽑아줘", "결과를 보기 좋게 정리해줘"가 트리거다. DOCX·PPTX·PDF·HWPX 파일로 건네야 하면 document-authoring이, 차트의 데이터 표현 원칙은 tufte-charts가, 화면 구조 탐색은 html-wireframe이, 눌러보는 목업과 프로토타입은 html-prototype이, 제품에 들어갈 UI 코드는 frontend-design이, 개념을 처음 접하는 사람에게 큰 그림으로 설명하는 지면은 html-explainer가 맡는다.
화면 구조, 정보 위계, 내비게이션, 작업 순서를 아직 정하지 못했을 때 저충실도 HTML 와이어프레임으로 먼저 검증할 때 로드한다. 구조가 서로 다른 방향을 두셋 만들어 한 파일에서 비교한다. "구조부터 잡자", "레이아웃 두어 개 비교해 줘", "뭐가 어디 들어갈지 보자"가 트리거다. 눌러볼 수 있는 목업과 프로토타입은 html-prototype이, 제품에 들어갈 완성 UI 코드는 frontend-design이, 개념을 큰 그림으로 설명하는 지면은 html-explainer가 맡는다.
사용자가 그림을 요청하거나 이미 있는 이미지를 고쳐 달라고 할 때 로드한다. 아이디어를 영어 프롬프트로 다듬어 GenerateImage로 새로 그리거나, 기존 이미지를 id로 지목해 EditImage로 고친다.
차트·그래프를 고르거나 지표를 시각화해 HTML/SVG·React 코드로 만들 때 로드한다. 데이터와 질문에 맞는 차트 유형을 고르고 불필요한 장식을 줄여 정확하고 읽기 쉽게 표현한다. 화면 레이아웃과 컴포넌트 구조는 frontend-design이, 구조 탐색은 html-wireframe이, 눌러보는 목업은 html-prototype이 맡는다.