ui-designer

name	ui-designer
description	UI Action Designer v1.1. 피그마→DS→PRD(파싱/작성/역추론)→Action→Task→SHE→UX_GATE→지식유입→4방향→HTML. 일반/TURBO 2모드. P1: UI Action, UI설계, UI제안, 피그마, figma, SHE, 화면설계, Action, Task, UI패턴, PRD, PRD작성, 터보UI, UI 터보, TURBO. P2: 설계해줘, 제안해줘, 분석해줘, PRD 만들어줘, 터보로 제안해줘, design, propose, turbo UI. P3: UI design, design system, user flow, action-task, PRD frame, product requirements, turbo UI, parallel proposal. P5: HTML로, 제안서로, 비교표로, PRD로. NOT: 디자인시스템구축·애플디자인스타일(→apple-design-style)·프로토타입코딩.
@uses	["references/tokens.md","references/snippets.md","references/forbidden.md","references/qc.md","references/prd-frames.md","references/she-protocol.md","references/ux-principles.md","references/knowledge-injection.md","references/proposal-rules.md","references/ios26-patterns.md","references/md3-patterns.md"]

UI Designer — UI 디자이너

UI설계·UI제안·화면설계·UI패턴·터보UI 전용 엔진 — 피그마 디자인시스템에서 Action>Task 구조로 UI 제안을 생성.

Skill Boundaries

• 하는 것 — UI Action Designer v1.1.
• 안 하는 것 — 디자인시스템구축·애플디자인스타일(→apple-design-style)·프로토타입코딩.

①입력→②DS추출→[토큰게이트]→③분석(PRD 3경로)→④추출→⑤SHE→[SHE게이트]→⑤-b UX_GATE→⑥지식유입→⑦제안→⑧산출

UX 원리 허브: @ref: references/ux-principles.md — Nielsen 10 + Norman 5 단일 출처. 이 스킬은 허브 §A+§B 전체 적용.

---

When to Use

• 사용자가 "설계해줘", "제안해줘", "분석해줘", "PRD 만들어줘", "터보로 제안해줘" 같은 표현으로 발동
• 도메인 작업이 필요한 시점
• 안 쓸 때 — 디자인시스템구축·애플디자인스타일(→apple-design-style)·프로토타입코딩.

Prerequisites

#	체크	미충족 시
1	대상·입력 명확 (스킬 발동 의도 확인)	1줄 확인 후 진입
2	references/ 폴더 접근 가능	inline fallback

4블록 참조 구조

html-skill-refactor spine 공통. 허브형 스킬이라 4블록=인덱스, 풀스펙은 기존 7개 스포크에 유지.

블록	역할	로드 시점
references/tokens.md	DS 토큰·SHE 등급·UX_GATE 15·4방향축·재현도 인덱스	§② 진입시 1회
references/snippets.md	단계별·경로별·공통 프리미티브 인덱스	단계 전환시
references/forbidden.md	8단계 게이트 금지 + 용어·SHE·제안·TURBO·HTML·리서치 금지	§⑤·§⑦·§⑧ + TURBO 발동시
references/qc.md	8단계 게이트 + UX_GATE 15 + 산출·PRD 정합성·설치·TURBO QC	각 단계 종료 + §⑧

로딩 규칙: 4블록은 인덱스. 실제 상세는 기존 7 스포크(prd-frames·she-protocol·ux-principles·knowledge-injection·proposal-rules·ios26-patterns·md3-patterns)로 위임.

---

⛔ 절대 규칙

#	규칙
1	발동 조건 외 임의 실행 금지
2	출력 형식 준수 — 내부 라벨 사용자 노출 금지
3	UP 존댓말·호칭 규칙 우선 적용

---

용어

용어	정의	역할
Action	시스템 기능 단위 (상위). 예: 구매하기, 업로드	KPI 단위
Task	Action 내 유저 수행 단계 (하위). 예: 옵션선택, 결제입력	퍼널 단위

Action > Task (1:N). Action=전환율 단위, Task=퍼널 단계 단위. 전 단계에서 이 정의 준수.

---

①입력

항목	설명
피그마	PDF·이미지·URL(MCP). 재현도: MCP 95%+ > DevMode 90%+ > PDF 7080% > 스크린샷 6075%
PRD	PDF·md·텍스트. 미제공 → ③에서 B·C분기
정규화	형식 무관 → "화면 단위" 파싱. 1 PDF 페이지 = 1 화면

Figma MCP 우선: get_design_context+get_screenshot→화면·토큰·컴포넌트 일괄. get_variable_defs→변수·스타일 직참조. 미연결→폴백+"MCP 연결 시 정확도 향상" 1회 안내.

---

②DS 추출

토큰 추출(색상·타이포·간격·radius·shadow·elevation)→컴포넌트 인벤토리→토큰 고정(이후 전 단계 제약).

🚪 게이트: 토큰 테이블 → 형 승인. 토큰 오류 = 이후 전부 오류.

---

③분석

경로별 로드 규칙: A경로(PRD 있음) → prd-frames.md §파싱 섹션만. B경로(PRD 없음, 경량) → prd-frames.md §심플PRD 섹션만. C경로(역추론) → prd-frames.md §역추론 섹션만. 전체 파일 로드 금지 — 경로 판별 후 해당 섹션만 Read.

경로	조건	실행
A. 파싱	PRD 있음	prd-frames.md §1→§2 유형식별→매핑룰 추출→형 확인
B. PRD작성	PRD 없음+"PRD부터"	C경량→prd-frames.md §3 팩터선택→심플PRD→형 확인→A복귀
C. 역추론	PRD 없음+피그마만	화면 시퀀스 역추론→형 확인. ⑧§4 정합성 검증 스킵

공통: Action 식별→Task 분해→사용자 흐름 추출→Task 우선순위(핵심 vs 보조 경로)

---

④추출

UI 구조(레이아웃·컴포넌트·계층) + 인터랙션 패턴(탭·스와이프·롱프레스 등) 식별.

---

⑤SHE 필터

SHE = Simple → Hide → Embody(Explain). 복잡한 시스템을 "겉은 단순하게, 내부는 숨기고, 사용 시점에 드러나게" 설계하는 애플식 인터랙션 원칙. SHE는 범용 원칙(trigger-dictionary 참조)이며, 이 스킬에서는 UI 화면에 특화된 운용(노출 등급·숨김 트리거·이중 게이트)을 다룸. 상세 → references/she-protocol.md

단계	정의	핵심 질문
S (Simple)	표면을 극도로 단순화 — 처음 보는 UI는 최소 정보만	"없으면 Action 자체 불가?" → YES=노출 / NO=숨김. 4축 테이블 필수
H (Hide)	복잡한 기능·구조를 숨김 — 학습비용 제거, 인지부하 차단	"어떤 행동·상태 뒤에 등장?" → 트리거 매핑. 삭제 ❌, 접근경로 보존
E (Embody)	필요 시 자연스럽게 드러남 — 설명이 아니라 경험으로 이해	"행동만으로 이해?" → 이중 게이트(객관+형 확인)

핵심: 단순함 = 기능이 적음 ❌ / 복잡함을 숨긴 상태 ✔ — UX의 본질은 타이밍 제어(언제·누구에게·어떤 행동 뒤에 보여줄지).

🚪 게이트: Before/After + 타이밍 설계표 + 등급 근거 → 형 승인.

---

⑤-b UX_GATE — Nielsen 10 + Norman 5 검증

역할: SHE 게이트 통과 후, 제안 직전 UX 원리 전수 점검. 허브 로드: @ref: references/ux-principles.md#A + #B.

SHE 관계: SHE = 타이밍·노출 제어 / UX_GATE = 상호작용 품질. SHE 결과 위에 얹음.

🚪 게이트: 15원리 중 12개+ PASS → ⑥ 진행. 11↓ → SHE L3 재설계 or ④ 롤백. 체크리스트 → qc.md §2.

SHE 충돌시: SHE 결정 우선 + 원리 조정안 제시.

⑥지식 유입

해당 Action·Task 사례만. 개념적 지식 ✗. 상세 → references/knowledge-injection.md

라이트(references/ 번들) vs 풀(+WebSearch). 범용 원칙 차단: "모든 Task에 성립" → 인용 불가.

---

⑦제안

4방향(표준/iOS26/AOS/창의적). 토큰 범위 내 + SHE 적용 결과 위에서. 상세 → references/proposal-rules.md

최소 2가지는 정보 계층 또는 인터랙션 흐름이 달라야 함.

---

⑧산출

HTML 파일. 화면별 4가지 제안 비교. HTML 스타일은 html-div-style 참조. UI 비교표 디폴트: 6번 Blueprint.

CASCADE: 아웃풋(PRD .md, HTML 와이어프레임 등 파일) 생성 시 design-skill을 Skill tool로 발동 필수. 대화문 분석만으로 끝나면 skip.

산출 항목	내용
비교 매트릭스	구현난이도·사용성·신규성·플랫폼적합도
SHE 적용표	노출 등급·숨김 요소·드러남 트리거
참조 사례 출처	지식 유입 사례·가이드라인
화면별 제안서	화면 × 4제안 (HTML 렌더링)

PRD 정합성 검증 (PRD 존재 시): prd-frames.md §4. 핵심경로 Task ✗→수정재제안 / △2+→의도적 생략 확인 / ✓80%미만→스코프 괴리 분석.

코드 산출 (형 명시 시만): MCP→프레임워크 코드 / 미연결→HTML·CSS. 산출 후 스크린샷 비교 검증 필수.

---

TURBO 모드

트리거: "터보로 제안" · "TURBO" · "UI 터보" 명시.

불변 (시퀀셜): ①입력·②DS게이트·③경로판정·④추출·⑤SHE게이트·⑤-b UX_GATE(15 중 12+)·⑧PRD정합성·design-skill CASCADE.

병렬 타겟: ⑥ 지식유입(Action당 Agent)·⑦ 4방향 제안(방향별 Agent)·⑧ 화면별 HTML 블록(화면별 Agent).

품질 방어: 범용지식 혼입·4방향 중복구조·토큰 이탈·SHE 위반·N9/D3 누락 → 재발행·시퀀셜 복귀. 상세 → references/forbidden.md §6·qc.md §6.

예상 단축: 45~60%.

---

PRE_WRITE — PRD·Action·Task·제안서 작성 직전 룰

목적: PRD 문장·Action 명·Task 명·4방향 제안서 작성 시점에 동사·단문·결과형 강제. UX_GATE 사후검증 + PRE_WRITE 사전생성 = 이중 게이트.

5룰 (작성 직전 강제)

#	룰	UI 결로 변환	FAIL 신호
1	Action 단문 동사	Action명 = 동사 ≤8자 (구매하기·업로드·예약하기)	"구매 기능"·"제품 업로드 시스템"
2	Task 단문 동사	Task명 = 동사 ≤10자 (옵션선택·결제입력)	"결제 정보 입력 화면"
3	PRD 1행 1요건	1요건 1문장 ≤40자. 묶기 ✗	"A하면서 B도 가능하게"
4	제안서 단언형	4방향 제안 헤드 ≤15자, 결론·주장형	"표준적인 접근" 라벨식
5	AI식 사전회피	"사용자 경험을 향상", "직관적이고 효율적인", "최적화된 흐름" — 작성 단계 차단	UX 관용어

단계별 PRE_WRITE

• ③ PRD 작성·역추론: 요건 1행 1문장 ≤40자. 동사시작
• ④ Action·Task 추출: 모두 동사. 명사형 ✗
• ⑤ SHE·⑤-b UX_GATE: PRE_WRITE 통과한 라벨로 검증
• ⑦ 4방향 제안: 헤드 단언형. 비교 매트릭스 셀 ≤15자

자체검증

#	체크	위반
1	Action·Task 동사시작·단문?	명사형 = 동사 변환
2	PRD 1행 ≤40자·1요건?	묶기 = 분리
3	AI식 UX 관용어 hit?	hit ≥ 1 = 평문 변환

---

---

§CONFIRM_GATE

산출물 송출 직전 형 컨펌 1회. → shaper-skill/references/_common/confirm-gate.md

§INV NO_WORK_LABEL

산출물·대화 작업 라벨 ZERO. → shaper-skill/references/no-work-label.md

Output Path

산출물	경로
주 산출물	mnt/outputs/ui-designer_{topic}_{YYYY-MM-DD}.md
형식	HTML로, 제안서로, 비교표로, PRD로.
리서치 결과 (해당 시)	{VAULT}/_skills research/ui-designer/{YYYY-MM-DD}_{topic}.md

Reference Index

파일	내용	언제
references/forbidden.md	forbidden	해당 단계 진입 시
references/ios26-patterns.md	ios26 patterns	해당 단계 진입 시
references/knowledge-injection.md	knowledge injection	해당 단계 진입 시
references/md3-patterns.md	md3 patterns	해당 단계 진입 시
references/prd-frames.md	prd frames	해당 단계 진입 시
references/proposal-rules.md	proposal rules	해당 단계 진입 시
references/qc.md	qc	해당 단계 진입 시
references/she-protocol.md	she protocol	해당 단계 진입 시
references/snippets.md	snippets	해당 단계 진입 시
references/tokens.md	tokens	해당 단계 진입 시
references/ux-principles.md	ux principles	해당 단계 진입 시

Next Phase

본 스킬 작업 후 자연스럽게 이어지는 흐름:

• 후속 작업 → apple-design-style

Failure Modes (Gotchas)

함정	대응
PDF 토큰 과신	② 게이트 검증
SHE L1 과잉	4축 판정 엄수
범용 지식 혼입	Task-특정만
Action/Task 혼용	용어표 참조
PRD 없이 과신	형 확인

세부 금지: → references/forbidden.md

Version

• v1.1 (2026-04-23) — html-skill-refactor spine 적용. 4블록 인덱스(tokens·snippets·forbidden·qc) 추가, 기존 7 스포크 유지(허브 특성상 풀스펙 분산). ## 4블록 참조 구조 섹션 신설. 중복 구분선 정리
• v1.0 — 초기