인터랙티브 목업
진정한 대안을 탐색하고, 사용자가 선택하게 한 다음, 그 선택이 브라우저에서 작동하도록 만드세요 — 선택을 조용히 재설계하지 않고.
사용 시기
- "목업", "프로토타입", "몇 가지 방향을 보여줘", "이것을 클릭 가능하게 만들어줘"와 같은 요청.
- 디자인 리뷰가 명세서를 생성했고 사용자가 그것을 직접 체험해보길 원할 때.
- 정보 아키텍처가 아직 확정되지 않은 새로운 화면.
사용하지 말아야 할 때
- 빌드 없이 비평만 필요한 경우 — 디자인 리뷰 워크플로를 사용하세요.
- 앱의 실제 프레임워크에서의 프로덕션 구현.
- 단일 패딩, 색상 또는 텍스트 변경.
- 실제 사용자 데이터나 프로덕션 데이터가 필요한 모든 것. 프로토타입은 합성 데이터만 사용합니다.
입력
- 작업 및 제약 조건 (플랫폼, 뷰포트, 사용 가능한 토큰).
- 대표적인 합성 데이터. UI에 합성 데이터임을 명시하세요. 프로덕션 데이터나 개인 데이터를 절대 붙여넣지 마세요.
- 선택 사항: 존중해야 할 디자인 리뷰 또는 명세서.
- 선택 사항: 사용자가 이미 선택한 방향. 이 경우 분기 단계를 건너뛰고 바로 3단계로 이동하세요.
워크플로
1. 분기: 두세 가지 방향 브리핑 생성
templates/direction-brief.md를 사용하여 방향별로 브리핑을 작성하세요. 모든 방향은 동일한 제약 조건, 데이터 및 작업을 공유합니다. 방향은 단순한 색상 구성표가 아닌 정보 아키텍처 또는 상호작용 모델에서 달라야 합니다 — 예: 목록 우선 vs 집중 모드 vs 보드 형식.
- 런타임이 진정한 독립 워커(하위 에이전트 또는 별도 세션)를 지원한다면, 방향을 독립적으로 생성하고 그렇게 명시하세요.
- 그렇지 않으면 직렬로 생성하고 다음과 같이 레이블을 지정하세요: "방향이 단일 에이전트에 의해 직렬로 생성되었습니다."
각 방향을 templates/direction.html에서 가져와 정적이며 독립적인 HTML 파일로 빌드하세요. 정적이란 대표적인 레이아웃과 상태를 의미합니다. 상호작용은 아직 필요하지 않습니다.
2. 비교하고 사용자가 선택하도록 함
templates/comparison.html에서 각 방향을 연결하고 의미 있는 트레이드오프(각각이 최적화하는 것, 희생하는 것, 적합한 사용자)를 명시하는 비교 페이지를 만드세요. 멈추고 사용자에게 선택을 요청하세요. 사용자가 선택 권한을 명시적으로 위임하지 않는 한, 선택 전에 인터랙티브 버전을 만들지 마세요.
3. 엄격한 접목: 인터랙티브 프로토타입 구축
references/graft-rules.md를 따르세요. 요약:
- 선택된 방향의 HTML 소스를 읽습니다.
- 마크업 구조, CSS 및 시각적 결정을 유지합니다.
- 충돌 가능성이 있는 새로운 클래스나 ID는 네임스페이스를 부여합니다.
- 바닐라 자바스크립트로 작동하는 상호작용을 추가합니다.
- templates/change-ledger.md를 사용하여 모든 변경 사항을 원장에 기록합니다. 순수한 추가가 아닌 모든 변경에는 이유가 필요합니다.
침묵적 재설계 금지. 선택된 방향에 결함이 있으면 원장에 기록하고 변경 전에 질문하세요.
4. 품질 게이트
references/prototype-quality.md에 대해 프로토타입을 확인하세요: 오프라인 작동, 뷰포트 메타, 반응형, 키보드, 가시적 포커스, 축소된 움직임, 빈/로딩/오류 상태, 비활성화된 기본 동작 없음, 합성 데이터 레이블링.
기본값
- 아티팩트당 하나의 독립적인
.html파일: 인라인 CSS 및 JS, CDN 없음, 웹 폰트 없음, 외부 이미지 없음 (인라인 SVG 또는 CSS 사용). - 시스템 폰트 스택.
file://에서 서버 없이 작동.- 자동으로 게시, 배포 또는 업로드하지 않음.
출력
<output-dir>/
├── directions/
│ ├── a-<name>.html
│ ├── b-<name>.html
│ └── c-<name>.html (선택 사항)
├── comparison.html
├── prototype.html
└── change-ledger.md
정직성
프로토타입은 상호작용과 레이아웃을 시연합니다. 이는 네이티브 구현 가능성, 성능, 접근성 준수 또는 프로덕션 준비 상태의 증거가 아닙니다. 핸드오프 시 이를 명시하세요.
라이선스 고지
다음 고지는 이 독립형 스킬 및 관련 파일과 함께 제공됩니다.
MIT License
Copyright (c) 2026 jamesonedge
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.