UI 컴포넌트 인벤토리 추출기
스케치에서 모든 컴포넌트, 상태, 데이터 필드를 식별하여 이후 재작업을 방지합니다.
프롬프트 개요
추천 팁
초기에 이름을 정규화하여 디자인과 엔지니어링이 같은 언어를 사용하도록 하세요. | 데이터가 캡처되는 곳에 검증을 문서화하여 QA 속도를 높이세요. | 디자인 시스템 확장을 줄이기 위해 새 컴포넌트보다 변형을 선호하세요. | 포커스 순서 및 ARIA 역할 힌트와 같은 접근성 상태를 캡처하세요.
운영팀 제공NexusAi Technology해결하는 문제
예상치 못한 컴포넌트가 늦게 나타나 일정이 지연되는 문제를 해결합니다. 상태와 데이터 요구사항을 포함한 요소를 조기에 인벤토리화합니다.
상태 커버리지 매트릭스
모든 인터랙티브 요소가 모든 상태에서 동작을 정의하도록 보장합니다.
데이터 계약
필드, 타입, 검증을 나열하여 엔지니어링과 일치시킵니다.
변형 규율
변형을 합리적으로 그룹화하여 확장을 줄입니다.
접근성 훅
관련된 곳에 포커스 순서 및 ARIA 힌트를 제안합니다.
AI 프롬프트 지침
역할: 거친 UI 스케치에서 컴포넌트 인벤토리를 추출하고 상태 및 데이터 계약을 매핑하는 디자인 시스템 리드 역할을 수행하세요.
이 작업이 중요한 이유: 견고한 컴포넌트 인벤토리는 중복을 방지하고 엔지니어링 요구사항을 명확히 하며 목업의 일관성을 유지합니다.
중요한 경계:
- 프레젠테이션 컴포넌트와 데이터 기반 컴포넌트를 구분하세요.
- 모든 상태(기본, 호버, 포커스, 활성, 비활성, 로딩, 비어 있음, 오류)를 캡처하세요.
- 각 데이터 바인딩 컴포넌트에 대해 최소한의 데이터 필드와 검증을 정의하세요.
사용자 입력:
- 스케치 설명 및 스케치 내 존재하는 라벨.
- 알려진 데이터 소스 또는 API(있다면).
- 접근성 및 현지화 제약 조건.
목표:
1) 컴포넌트를 나열하고 분류(아톰, 분자, 유기체).
2) 모든 인터랙티브 상태와 전환 정의.
3) 데이터 필드, 검증, 오류 메시지 매핑.
4) 재사용 가능한 패턴과 명명 제안 표시.
분석 워크플로우:
1) 스케치를 후보 컴포넌트로 파싱.
2) 이름을 일관된 명명 규칙으로 정규화.
3) 유사 요소를 단일 재사용 컴포넌트와 변형으로 그룹화.
4) 인터랙티브 요소의 상태 머신 문서화.
5) 의존성 식별(인증, 권한, 네트워크).
필수 출력 형식:
- 요약(목적, 범위, 가정)
- 컴포넌트 표(이름, 유형, 상태, 데이터, 검증, 재사용성, 메모)
- 주요 컴포넌트의 상태 다이어그램(텍스트)
- 위험 및 미해결 질문
품질 관리:
- 모든 인터랙티브 요소는 최소한 포커스 및 비활성 상태를 고려.
- 검증 규칙은 구체적이고 테스트 가능.
- 데이터 필드는 타입과 필수/선택 사항 포함.
검증 체크리스트:
- 컴포넌트 이름은 고유하고 일관됨.
- 변형이어야 할 중복 컴포넌트 없음.
- 모든 오류 상태에 복사 가이드 포함.
최종 지침: 디자인 및 엔지니어링에 전달하기 적합한 깔끔하고 한눈에 보기 쉬운 인벤토리를 출력하세요.
예상 결과
요약: 온보딩 및 프로젝트 목록 화면용 인벤토리; 이메일 우선 인증 가정. 컴포넌트 표(발췌): - TextInput.Email | 아톰 | 상태: 기본/포커스/오류 | 데이터: email:string | 검증: RFC 5322 | 재사용성: 높음 | 메모: 필드 아래 인라인 오류 - Button.Primary | 아톰 | 상태: 기본/로딩/비활성 | 데이터: 해당 없음 | 검증: 해당 없음 | 재사용성: 높음 | 메모: 왼쪽에 진행 스피너 - ProjectCard | 분자 | 상태: 기본/호버/비어 있음 | 데이터: name:string, tasks:int | 검증: 이름 ≤ 60자 | 재사용성: 중간 | 메모: 배지가 작업 수 표시 위험 및 미해결 질문: - 오류 문구 톤이 정의되지 않음. - 비밀번호 규칙 및 현지화 정책 필요.
실행 과정
Claude에서 인벤토리 추출
Claude를 열고 스케치 설명과 제약 조건이 포함된 프롬프트를 붙여넣으세요. 컴포넌트 표, 상태, 데이터 필드를 요청하세요. 재사용 가능한 명명 규칙이 포함된 구조화된 인벤토리를 기대하세요.
9 minChatGPT에서 교차 검증
Claude의 출력을 ChatGPT에 붙여넣고 접근성, 검증, 오류 문구의 누락 부분을 요청하세요. 정제된 상태 목록과 구체적인 검증 규칙을 기대하세요.
6 min기본안 승인
ChatGPT에 고유 ID와 변형 명명 규칙이 포함된 최종 표를 생성하도록 요청하여 목업 시작 전에 팀과 공유하세요.
5 min
