aievolutionpl/social-motion-agent

모션 UI 폴리시 (Motion UI Polish)

문제점: 모델이 코딩한 프레임은 한눈에 기계가 만든 것임을 알 수 있는 공통된 특징을 공유합니다. 인디고 그라데이션, 동일한 크기의 네 개 카드, 모든 곳에 하나의 라디우스와 하나의 평평한 그림자, 작은 회색 텍스트, 아이콘 대신 이모지, 카드 한쪽 면의 컬러 막대 등이 그것입니다. 이 스킬은 렌더링 전에 이러한 특징들을 제거하고, 측정 가능한 것은 측정합니다.

프로젝트 루트는 이 폴더보다 세 단계 위에 있습니다. 독트린 출처: tools/repos/ux-ui-agent-skills (MIT, sources.lock.json에 스냅샷 있음). 장면에 필요한 부분만 읽으십시오.

단계

1. templates/frame-tokens.css와 templates/frame-starter.html을 작업의 source/ 디렉토리로 복사합니다. 토큰 상단의 브랜드 블록만 변경합니다 (강조색, 표면색; 프로덕션 브랜드 브리프에서 색상을 가져옵니다). 장면에서 색상, 크기 또는 그림자를 하드코딩하지 마십시오. 대신 변수를 사용하십시오.

2. 토큰을 사용하여 장면을 구축합니다. 모션은 순수한 시간 함수입니다 (window.seek(t), 타이머나 Math.random 사용 금지). 이는 vstudio 계약과 HTML 렌더러가 기대하는 방식입니다. 효과는 추측하지 말고 motion-effect-picker 스킬을 사용하여 선택하십시오.

3. 완성된 레이아웃을 보여주는 시간에, 각 출력 형식의 모든 고유 장면을 게이트합니다.

   python -S studio.py polish output/jobs/ID/source/scene.html --format 9:16 --seek 4.2 --shot output/jobs/ID/previews/scene-916.png
   

   이 명령은 다음 상황에서 실패합니다: 프레임 밖의 텍스트, 텍스트 겹침, 읽을 수 있는 최소 크기 미만의 텍스트, 이모지, 그리고 slop_tells 및 taste_audit에서 HIGH 수준의 발견 사항이 있는 경우. 경고 (안전 영역 밖, 약한 계층 구조, 잘린 텍스트)는 침묵이 아닌 결정이 필요합니다.

4. 스크린샷을 열고 확인하십시오. 게이트는 측정 가능한 정확성을 증명할 뿐, 취향을 증명하지는 않습니다. 그런 다음 아래의 적대적 체크리스트를 실행하고 엄격한 디자이너가 거부할 부분을 수정하십시오.

5. 그런 다음에만 렌더링하십시오. 작업의 HANDOFF.md에 어떤 장면이 polish를 통과했는지와 시크 시간을 기록하십시오.

비디오 프레임을 위한 기본 규칙

1. 하나의 요소가 이끈다. 표시 요소(display type)는 본문 크기의 최소 2.5배 이상이어야 합니다. 동일한 크기의 카드 네 개는 생성된 것으로 읽힙니다. 하나의 항목에 더 큰 크기를 주거나 고유한 행을 할당하십시오.
2. 실제 타입 스케일 (토큰): 레이블 2.1, 본문 2.8, 리드 3.6, 제목 6.4, 표시 9, 히어로 17 (cqmin 단위, 1 cqmin = 짧은 변의 1%). 짧은 변의 2% 미만은 허용되지 않습니다. 숫자는 .num (tabular) 클래스를 사용하십시오.
3. 4px 리듬 (--sp-*). 관련 항목은 관련 없는 항목보다 더 좁게 배치하십시오.
4. 각각 역할이 있는 여러 라디우스와 그림자 (칩, 패널, 카드, 필; 각각 두 개의 레이어가 있는 --sh-1..3). 모든 곳에 하나의 라디우스와 하나의 그림자를 사용하지 마십시오.
5. 전체 헤어라인 테두리 또는 표면 대비. 카드, 알림 또는 콜아웃의 한쪽 면에 컬러 막대를 사용하지 마십시오. 상태는 아이콘과 단어로 표시하십시오.
6. 의미에 따른 색상. 하나의 강조색만 사용하십시오. 위험 색상은 파괴적이거나 부정적인 경우에만 사용하십시오. 하드코딩된 인디고-보라 그라데이션, 순수 #000 텍스트 또는 배경 (토큰은 색조가 있는 거의 검은색을 사용)은 사용하지 마십시오.
7. 이모지 및 장식용 픽토그래프 사용 금지. 인라인 SVG 아이콘 (currentColor) 또는 단어를 사용하십시오. 화면상의 텍스트에 대시 문자를 사용하지 마십시오 (작업 공간 규칙).
8. 대비: 본문 4.5:1, 큰 텍스트 3:1. 푸티지 위의 캡션은 스크림 또는 필이 필요하며 (.pill-caption), 맨 텍스트는 사용하지 마십시오.
9. 안전 영역. 9:16 비율은 상단 17%와 하단 30%의 너비를 텍스트 없이 유지해야 합니다 (플랫폼 UI). 측면은 5.6%입니다. 16:9 비율은 모든 방향으로 5.6%입니다. 토큰은 --safe-*를 설정하고 게이트가 이를 확인합니다.
10. 홀드. 텍스트 블록은 떠나기 전에 최소 0.5초에 단어당 0.3초를 더한 시간 동안 정지 상태를 유지해야 합니다. 등장은 0.4초에서 0.7초, 빠르게 들어와 부드럽게 착지합니다 (ease-out). transform과 opacity만 변경하십시오.
11. 극단적인 데이터: 긴 이름, 0, 100%, 많은 항목. 장면이 이들로 인해 깨지지 않아야 합니다. 하나의 극단적인 경우를 테스트하십시오.

적대적 체크리스트 (승인 전)

• 헤드라인을 가렸을 때, 눈이 여전히 어딘가에 머무는가, 아니면 아무데도 머무르지 않는가?
• 장식만을 위한 요소가 있는가? 제거하십시오.
• 눈을 가늘게 떴을 때, 경쟁하는 두 개의 초점이 있는가?
• 숫자가 단위, 출처 또는 비교 대상 없이 표시되어 있는가?
• 브랜드 이름만 바꿔도 장면이 동일하게 보이는가? 그렇다면 방향성이 없는 것입니다. tools/repos/ux-ui-agent-skills/taste/aesthetic-systems.md에서 에스테틱을 선택하거나 design-systems/library/<name>/DESIGN.md (138개)에 있는 명세를 참고하여 토큰 블록에 반영하십시오.

심화 참고 자료 (필요시 로드)

필요 사항	tools/repos/ux-ui-agent-skills/ 내의 파일
안티-슬롭 독트린, 금지된 기본값	taste/design-taste.md
모션 문법 (등장, 지연, 호버)	taste/motion-choreography.md
차트 및 고밀도 데이터 화면	components/data-viz.md, tokens/data-viz.json, examples/terminal/
팔레트, OKLCH 스케일, 다크 모드	.claude/rules/tokens-and-color.md
UI 카피, 레이블, 빈 상태	content/voice-tone.md
점수가 있는 리뷰 루브릭	workflows/design-review.md, .claude/agents/design-critic.md
명명된 룩 (Stripe, Linear, Apple 등)	design-systems/library/ + taste/aesthetic-systems.md

필요할 때만 상위 게이트를 직접 실행하십시오 (해당 폴더에서, DS_REQUIRE_BROWSER=1, 시스템 Chrome 사용): node scripts/slop_tells.mjs <file>, node scripts/taste_audit.mjs <file>, node scripts/measure_render.mjs <file> (실제 렌더링에 대한 WCAG 대비 검사). 이 결과는 경험적 증거입니다: 강력한 신호이지 최종 판결이 아닙니다. 상위 체크아웃을 편집하지 마십시오.