ui은(는) 무엇을 하나요?
인터페이스를 구축하고 재스타일링하기 위한 하나의 스킬입니다. Jakub Krehel의 스킬 make-interfaces-feel-better, Impeccable, 그리고 Molveau 자신의 레퍼런스(Emil Kowalski의 작업에서 추출한 취향 가이드 포함)를 하나의 플레이북으로 통합합니다.
시작하기
references/playbook.md를 먼저 읽으세요. 특히 "Do this first" 블록부터 시작하세요; 벤더 파일과 Molveau 레퍼런스는 깊이 있는 내용이나 실제 예제가 필요할 때만 여세요. 플레이북은 통합된 교리(시작 전, 형태 잡기, 레이아웃, 타이포그래피, 색상, 다크 모드, 표면, 아이콘, 컴포넌트 및 상태, 피드백 모션, 반응형 및 네이티브, 리뷰, 개선 패스, 성능, 모형 우선, 프롬프트)로, 출처 태그와 출처 간 의견 차이가 있을 때의 조정 내용을 포함합니다. 아래 표는 깊이 인덱스입니다.
방향 게이트
새로운 페이지, 화면 또는 재스타일을 위한 코드를 작성하기 전에, 요청이 한 줄이더라도 이것을 먼저 수행하세요. 이 스킬의 나머지 부분은 실수를 제거할 뿐, 화면에 개성을 부여하지는 않습니다. 이를 건너뛰면 결과물은 모든 모델이 만드는 평범한 페이지, 즉 세부 사항은 맞지만 누구의 것도 아닌 페이지가 됩니다.
- 다섯 줄. 제품: 무엇을 하는지, 누구를 위한 것인지. 개성: 두세 개의 구체적인 단어(
차분한, 정확한, 약간 따뜻한); 결코깔끔한,현대적인,세련된,미니멀한,프리미엄은 안 됩니다. 세계: 제품이 속한 장소나 재질; 중성색을 물들이고 강조색을 결정합니다. 순간: 풍부한 색상과 디테일을 얻는 한두 곳. 시그니처: 이 제품만이 가지고 있는, 일관되게 사용되는 하나의 작은 디테일. 순간은 단순히 정리되는 것이 아니라, 전달해야 할 내용에 맞게 다시 그려집니다(부드러운 선, 대칭 비교, 실제 스케일이 있는 차트, 또는 무게감과 빛이 표현된 제품 자체의 오브젝트). - 목록화, 그다음 아이디어. 경쟁사가 공유하지 않는 8~12가지 항목(이름, 거리, 브리프의 숫자, 재료, 도구, 의식, 업계에서 사용하는 문서)을 나열하세요. "이 화면에서, [한 항목]이 [장치]가 된다"라고 쓰세요. 그 장치가 바로 순간입니다.
- 2차 기본값을 거부하세요, 브랜드가 이미 그것들을 소유하고 있지 않다면. 이것들은 명백한 특징이 금지되면 모델이 사용하는 것입니다:
- 크림색, 돌색 또는 따뜻한 흰색 배경에 타버린 오렌지색, 테라코타색, 세이지색 또는 포레스트색 강조색, 세리프 제목 글꼴이 있거나 없거나 ("종이와 잉크" 스타일은 더 이상 방향이 아닌 새로운 기본값입니다);
- 반사적으로 Fraunces, Instrument Serif, Playfair 또는 Georgia를 제목 글꼴로 사용; system-ui만 사용;
- 흰색 배경에 Inter 또는 Geist와 하나의 인디고 또는 블루 강조색;
- 영웅, 세 가지 기능, 사용후기, 행동 촉구를 순서대로, 정당성 없이 사용; 앱 화면에서는 막대 차트 위에 동일한 네 개의 통계 카드;
- 중앙에 위치한 작은 제목, 큰 제목, 두 개의 버튼이 전체 첫 화면.
- 교체 테스트. 제품명과 업계를 경쟁사의 것으로 바꿔보세요. 그래도 화면이 맞다면, 주장, 순간, 시그니처를 바꾸고 다시 테스트하세요.
- 보여주고 기다리세요. 다섯 줄과 아이디어를 보여주고 소유자가 피드백을 줄 때까지 기다리세요. 물어볼 수 없다면(사용자가 그냥 만들어 달라고 했거나, 사람 없이 실행하는 경우), 메인 파일 상단에 주석으로 작성하고 정확히 그대로 만드세요.
깊이 보기: anti-slop 플레이북 §2(방향) 및 §12(앱 화면); 실제 레퍼런스를 위한 design-inspiration-index 스킬.
항상 켜짐
- 프로젝트 우선. 프로젝트의 토큰, 컴포넌트,
DESIGN.md, 그리고 관련 화면이 여기의 어떤 기본값보다 먼저 결정됩니다. - 한 번에 하나의 디자인 권위자. 한 번의 패스를 완료한 후에 다른 패스를 적용하세요.
- 화면당 하나의 초점과 하나의 기본 동작, 모든 상태가 설계되어야 함(플레이북 §3, §9).
- 구현 전 모형 제작: 프로젝트가 모형 우선 방식으로 작업할 때( Molveau의 기본값,
references/mockup-first.md), 새 화면이나 재스타일링된 화면의 경우; 그렇지 않으면 프로젝트 자체 리뷰 프로세스를 따릅니다. - UI 완료 전 확인:
anti-slop스킬과 그 탐지기, 그 다음 타입 체크, 린트, 테스트.
인접 스킬: anti-slop 스킬이 바이브 코딩된 특징과 AI 냄새 제거 패스를 담당; motion이 UI 피드백을 넘어선 애니메이션을 담당; ux가 카피, 폼, 포커스, 타겟, 접근성 심화, 오류, 엣지 케이스 및 온보딩을 담당. 리뷰 깊이: design-grill은 심층 감사(7가지 렌즈, 순위 보고), 아래 비평 항목은 더 가벼운 단일 패스, anti-slop은 AI 외형 제거 패스입니다.
작업별 읽을 자료
모든 경로는 이 스킬 폴더를 기준으로 합니다.
| 작업 | 읽을 자료 |
|---|---|
| 통합 규칙, 가치 및 충돌 조정 | references/playbook.md |
| 피드백이 필요한 새 화면 또는 재스타일링된 화면 (아주 작은 수정 제외) | references/mockup-first.md |
| 프로젝트에 아직 토큰이 없을 때의 취향 기본값 | references/taste.md |
| 레이아웃, 그룹화, 정렬, 간격 | references/vendor/jakub/better-layout.md, 그 다음 references/vendor/impeccable/layout.md |
| 타이포그래피: 글꼴, 스케일, 줄 길이, OpenType | references/vendor/jakub/better-typography.md 및 references/vendor/impeccable/typeset.md |
| 색상: 팔레트, 대비, 다크 모드, 토큰 | references/vendor/jakub/better-colors.md, 색상 추가 시 references/vendor/impeccable/colorize.md 추가 |
| 최종 마감: 라디우스, 그림자, 광학 정렬, 아이콘 상태 | references/vendor/feel/make-interfaces-feel-better.md 및 references/vendor/impeccable/polish.md; 정확한 값은 references/vendor/jakub/better-ui.md |
전체 화면 순위 리뷰 (접근성 및 카피는 ux 스킬에 있음) | references/vendor/jakub/better-interface.md (대표 문서) |
| UI 회귀를 위한 브랜치 또는 PR 리뷰 | references/vendor/jakub/interface-review.md |
| 파일, 컴포넌트 또는 라우트의 전체 다중 렌즈 디자인 감사 (무거움: 여러 에이전트 필요) | design-grill 스킬 |
| 히어로, CTA, 내비게이션 바, 모션, 아이콘을 위한 시각적 레퍼런스 또는 영감 | design-inspiration-index 스킬 |
| 화면 비평 또는 디자인 리뷰 | references/vendor/impeccable/critique.md (휴리스틱, 인지 부하, 페르소나); 빠른 분석: references/prompts.md의 프롬프트 4 |
감사: 성능, 테마, 반응형 (접근성은 ux 스킬 사용) | references/vendor/impeccable/audit.md, references/vendor/impeccable/optimize.md |
| 너무 복잡하거나 무거울 때 | references/vendor/impeccable/distill.md, references/vendor/impeccable/quieter.md |
| 너무 밋밋하거나 소심할 때 | references/vendor/impeccable/bolder.md, references/vendor/impeccable/colorize.md, references/vendor/impeccable/delight.md |
| 기술적으로 야심찬 효과 | references/vendor/impeccable/overdrive.md |
| 처음부터 새로운 디자인 계획 | references/vendor/impeccable/shape.md; 새로운 시각적 아이덴티티를 위한 references/vendor/impeccable/new-work.md 및 모드 파일 (references/vendor/impeccable/mode-operate.md, mode-persuade.md, mode-read.md) |
| 앱, 대시보드 및 설정 심화 | references/vendor/impeccable/operate.md |
| 작은 화면, 터치, 기타 플랫폼 | references/vendor/impeccable/adapt.md; 네이티브: references/vendor/impeccable/ios.md, references/vendor/impeccable/android.md, references/vendor/impeccable/adapt.native.md |
DESIGN.md 작성 또는 업데이트, 토큰 및 컴포넌트 추출 | references/vendor/impeccable/document.md, references/vendor/impeccable/extract.md |
| 피드백 모션 레시피 (누름, 진입 및 종료, 아이콘 교체, 테마 전환) | references/vendor/jakub/better-ui/animations.md, references/vendor/jakub/better-ui/enter-exit.md, references/vendor/jakub/better-ui/icon-transitions.md; Emil의 수치는 references/animation.md (전체 워크플로: motion 스킬). 일부 레시피는 더 깁니다 (~500ms 시트, Sonner의 400ms): UI에서 플레이북은 오버레이를 300ms로 제한합니다 (§10) |
| 대화형 컴포넌트 완료 체크리스트 (토스트, 서랍, 메뉴) | references/components.md |
| LLM에 인용되어야 하는 공개 마케팅 사이트 | references/discoverability.md |
| AI 생성 UI에 취향을 강제하는 프롬프트 | references/prompts.md |
| 규칙 뒤에 숨은 철학 | references/quotes.md |
| UI가 바이브 코딩되었거나 평범해 보일 때 | anti-slop 스킬 |
| 카피, 오류, 빈 상태, 접근성 심화 | ux 스킬 |
Impeccable 진입점 references/vendor/impeccable/impeccable.md는 자체 설정 파일과 스크립트가 포함된 전체 명령 세트를 설명합니다. 단일 패스보다는 전체 워크플로가 필요할 때 읽으세요. Impeccable의 clarify, harden, onboard 명령은 ux 스킬에 한 번 vendor로 포함되어 있습니다.
벤더 파일 참고 사항
references/vendor/ 아래의 파일들은 원저자의 파일을 수정 없이 복사한 것이므로, 내부의 상대 링크와 명령 이름(Impeccable의 슬래시 명령, scripts/impeccable, 라이브 모드, 컴포넌트 게이트 등)은 이 설치 환경에 존재하지 않을 수 있습니다. 지침은 따르되, 누락된 도구를 가리키는 부분은 건너뛰세요. 벤더 파일이 브라우저 스크린샷, 하위 에이전트 또는 자동화된 시각적 패스를 요구하는 경우, 프로젝트 자체 규칙을 따르세요(플레이북 충돌 14). 라이선스와 정확한 출처는 각 벤더 폴더(LICENSE, SOURCE.md)에 있습니다.
크레딧 및 라이선스
references/vendor/jakub/는 Jakub Krehel의 스킬입니다 (https://github.com/jakubkrehel/skills), MIT.references/vendor/feel/는 make-interfaces-feel-better by Jakub Krehel (https://github.com/jakubkrehel/make-interfaces-feel-better), MIT.references/vendor/impeccable/는 Impeccable by Paul Bakaus (https://github.com/pbakaus/impeccable), Apache-2.0, LICENSE와 NOTICE가 유지됩니다. 파일 위치가 변경되었고, SKILL.md가 이름이 바뀌었으며,scripts/는 포함되지 않았습니다;SOURCE.md를 참조하세요. 플레이북은 Impeccable의 지침을 의역하고 요약합니다; 해당 각색은 원본의 변경 사항입니다.- 취향 가이드 (
references/taste.md,animation.md,components.md,quotes.md)는 Emil Kowalski의 디자인 엔지니어링 작업 (https://emilkowal.ski) 에서 추출되었으며, 플레이북에서[Molveau/Emil]로 태그됩니다. 단어와 구조는 Molveau의 것입니다 (MIT); 아이디어와 수치는 그의 것입니다.references/quotes.md는 각 인용문의 출처를 표시합니다.references/animation.md는 또한 Rauno Freiberg의 devouringdetails.com을 참조합니다. references/discoverability.md는 Suganthan Mohanadasan의 연구 (suganthan.com) 에서 추출되었습니다.references/playbook.md,references/prompts.md및references/mockup-first.md는 Molveau 자신의 것입니다 (MIT), 각 출처를 태그로 표시합니다.