screen-spec-analyzer
화면정의서·기획서·UI 캡처(Figma 등)를 보고 그 화면을 그리는 데 필요한 API 응답 데이터(필드·타입·null 여부)를 추출해 필드 표로 정리한다. 요청 시 그 표로 API 계약/DTO를 설계하거나 기존 API가 화면 요구와 맞는지 검증한다. 화면 이미지·화면정의서·Figma URL이 API·DTO·응답 필드 요청과 함께 주어지면 반드시 사용. "
SKILL.mdskills/screen-spec-analyzer/SKILL.md
GitHub화면 캡처 → API 응답 데이터
핵심은 화면을 그리려면 서버가 내려줘야 하는 응답 데이터를 필드 표로 뽑는 것이다. 기본 출력은 필드 표와 확인 질문뿐이다.
모드
- 추출(기본): 아래 절차대로 필드 표를 만든다.
- design: 사용자가 API 설계·DTO·OpenAPI를 명시적으로 요청할 때만. 추출 후
references/design.md를 따른다. - verify: 사용자가 기존 API 검증을 명시적으로 요청할 때만. 추출 후
references/verify.md를 따른다.
요청에 없는 모드로 넘어가지 않는다.
입력
- 화면 캡처 1장 이상. Figma 커넥터가 연결돼 있고 프레임 URL이 주어지면 커넥터로 레이어 텍스트를 직접 가져온다.
- 화면정의서 설명 텍스트가 있으면 캡처보다 우선한다.
- 코드베이스가 있으면 기존 응답 DTO 1~2개를 읽고 네이밍·날짜 포맷·공통 응답 래퍼·페이지네이션 방식을 따른다.
분석 (내부에서만 하고 출력하지 않는다)
- 마커(01, 02…) 단위로 요소를 훑는다. 마커가 없으면 위→아래로 A, B…를 붙인다. 마커 박스가 요소와 어긋나면 의미상 가장 가까운 요소를 기준으로 한다. 읽을 수 없는 글자는 추측하지 않고
[판독불가]로 둔다. - 요소를 응답 포함 여부로 가른다.
- 포함: 서버 원천 값, 계산 값의 원천(D-7 → 마감 일시), 조회자별 값(내 투표 여부, 좋아요 여부, 버튼 활성 여부 →
viewer.*하위) - 제외: 고정 문구, 화면 이동, 쓰기 액션 자체(단 액션의 활성 여부·결과 상태는 조회자별 값으로 포함)
- 고정 문구가 규칙을 암시하면(예: "종료 전 결과 비공개") 응답 형태에만 반영한다(예: 종료 전
null). - 서버 시각에 의존하는 상태(진행중/종료)는 서버가
status로 확정한다.
- 포함: 서버 원천 값, 계산 값의 원천(D-7 → 마감 일시), 조회자별 값(내 투표 여부, 좋아요 여부, 버튼 활성 여부 →
- 캡처에 안 보이는 경우 중 응답 필드를 바꾸는 것만 점검한다: 다른 상태에서 생기는 필드, 표시 개수와 총 개수 차이(페이지네이션), 답글 같은 계층, 목업 데이터 모순.
출력
<결론 한 줄: 리소스 N개와 엔드포인트 후보>
### <엔드포인트 후보 또는 리소스명>
| 필드 | 타입 | null | 근거 | 비고 |
|---|---|---|---|---|
확인 필요
1. <질문> → <영향 필드>
- 필드: 점·
[]경로 표기(author.name,comments[].likeCount). - 타입: string | integer | long | boolean | decimal | date | datetime | enum(보인 값, 추정 값은
…) | object | array. - null: Y/N.
- 근거: 마커 번호. 화면 근거 없이 구현상 필요한 필드(id, 커서)는
-. - 비고: 필요할 때만 짧게 쓴다. 계산 원천, null이 되는 조건, 추정·가정 여부.
- 근거 없는 필드는 만들지 않는다. 증가하는 하위 목록(댓글 등)은 별도 리소스 표로 뺀다.
- 확인 필요는 응답 필드를 바꾸는 것만, 최대 5개. 나머지는 합리적으로 가정해 표에 반영하고 비고에 "가정"이라고 적는다.
- 여러 화면이면 화면별로 표를 만들고, 공통 리소스(작성자 등)는 한 번만 정의한다.
- 인벤토리, 점검 목록, 액션·규칙 표, 요청 스키마, 개념 설명은 출력하지 않는다.
채워진 예시는 references/example.md를 본다.