unvibe은(는) 무엇을 하나요?
이 스킬은 생성된 것처럼 보이는 인터페이스를 디자인된 것처럼 바꿉니다. 새로운 스타일을
발명하지 않습니다: 전문적인 인터페이스가 공유하고 생성된 인터페이스가 놓치는 작고 측정된 디테일의
카탈로그를 프로젝트 고유의 색상에 매핑하여 적용합니다. 실제 프로덕션 SaaS(references/case-study.md)에 대한
2일간의 폴리시 작업에서 추출되었습니다. 모든 규칙은 그것을 어겼을 때 눈에 띄었기 때문에 존재합니다.
색상을 매핑하고 숫자는 유지하세요. 비율(반경, 패딩, 크기, 지속 시간, 가중치)이 품질을 결정합니다. 색상만이 당신이 적응해야 할 유일한 것입니다.
시작하기 전에
references/tells.md를 읽으십시오 (UI가 생성된 것처럼 보이게 만드는 요소와 각각에 대한 대체재).- 프로젝트의 디자인 토큰과 모든 디자인 문서를 읽으십시오.
references/porting.md의 토큰 테이블을 채우십시오. - 소유자에게 어떤 화면이 가장 거슬리는지와 그들이 좋아하는 것이 무엇인지 물어보십시오. 그들이 좋아하는 것은 유지하십시오; 그들이 이해하는 것을 절대 제거하지 마십시오 ("나는 이것이 이해하기 쉬워서 좋아요 — 그냥 형식만 더 좋게 해주세요"는 다시 디자인하는 것이 아니라 스타일을 변경하라는 의미입니다).
- 스택을 확인하십시오: React 여부, Tailwind 3/4 또는 일반 CSS, 기존 컴포넌트 라이브러리 여부, headless 라이브러리(React Aria) 여부.
워크플로우
1단계 · 기초 (한 번에, 전체 앱)
토큰(assets/css/unvibe.css 섹션 1, 매핑됨), 브랜드 색상의 네이티브 잔재, 표 형식 숫자,
축소된 모션, 모션 곡선. 그런 다음 단어: 추적된 대문자 레이블, 이모지 제목, 배지의 ✓ 글리프,
느낌표 제거 (카탈로그 §0–§1). 빠르고, 눈에 띄고, 위험이 없습니다.
2단계 · 컨트롤 (한 번에, 전체 앱)
릴리프가 있는 버튼과 화면당 하나의 기본 버튼(§2) · 채워진 필드, 행당 하나의 높이(§3) · 네이티브
셀렉트 대신 실제 메뉴(§4; 먼저 모든 호출 사이트를 감사하십시오, references/pitfalls.md) · 모든 예/아니오에
스위치, 중요한 것에는 스위치 카드, 눈에 띄는 선택에는 라디오 카드, 태그(§6) · 알약이 미끄러지는
분할 컨트롤(§5).
3단계 · 가장 눈에 띄는 화면을 레퍼런스로 재구축
사람들이 가장 많이 보는 3~5개의 화면을 선택하고 각각을 가장 가까운 전문 템플릿에 맞춰 측정하여
재구축하십시오(references/method.md): 분석 개요 → KPI 타일(§9); AI 화면 → 에이전트 스레드(§12); 활동 →
피드(§11); 설정 → 행(§7); 대량 목록 → 데이터 그리드(§10); 긴 작업 → 저널(§13); 날짜 → 프리셋 +
두 달(§15).
4단계 · 정리
나머지 모든 화면에 동일한 디테일을 적용하십시오: 하나의 테이블 헤더 밴드, 하나의 필드 스타일, 하나의 메뉴, 하나의 배지 스타일, 채워진 영역으로서의 콜아웃, 프레임 블록으로서의 목록, 모든 목록 페이지에서 동일한 필터 높이(§8, §10, §16). 형제 화면 간의 불일치는 그 자체로 티(tell)입니다.
5단계 · 증명
scripts/capture.mjs로 프로덕션과 브랜치의 before/after를 캡처하고 scripts/compare.mjs로
나란히 비교 페이지를 만드십시오. 한눈에 차이가 명확한 쌍만 유지하십시오. 그런 다음 푸시하기 전에
references/verification.md의 전체 회귀 방지 패스를 실행하십시오.
황금 규칙
- 선택 ≠ 동작. 차분한 색상이 선택된 것을 표시합니다. 화면당 하나의 기본 동작에만 브랜드 색상을 사용합니다.
- 호버 ≠ 선택됨. 호버는 중립적입니다; 선택됨은 옅은 색조와 체크 표시입니다.
- 세 가지 표면: 캔버스, 떠 있는 것을 위한 흰색, 필드와 타일을 위한 더 어두운 움푹 들어간 채움.
- 추적된 대문자, 이모지 제목, 체크 글리프, 색상이 있는 왼쪽 막대는 금지.
- 행의 모든 컨트롤은 높이와 채움이 동일합니다.
- 모든 예/아니오는 스위치입니다; 체크박스는 목록과 동의를 위한 것입니다.
- 설정은 행입니다: 왼쪽에는 기능, 오른쪽에는 컨트롤; 잠긴 행은 회색으로 이유를 표시합니다.
- 숫자는 채워진 타일에서 24/34이며, 아이콘 칩과 의미에 따라 색상이 지정된 델타 알약(비용이 오르면 빨간색)이 함께 있습니다.
- 모든 곳에서 하나의 테이블 헤더 밴드, 문장 형식, 16px 프레임; 선택된 행은 3px 내부 막대를 얻습니다.
- AI 답변은 스레드의 텍스트이며, 읽은 내용과 실제 경과 시간이 표시됩니다; 가짜 단계는 절대 금지.
- 모션은 상태 변경을 따릅니다, 호버를 절대 따르지 않습니다; 누르면 .985로 축소; 메뉴와 모달은 나타납니다.
- 추측된 숫자나 장식적인 컨트롤은 절대 금지. 데이터가 없으면 "미확정"이라고 말하십시오; 필드가 아무것도 하지 않으면 제거하십시오.
- 형제 화면은 같은 패스에서 처리하십시오.
- 눈에 보이는 차이만 보여주고 회귀가 없음을 증명하십시오.
이 스킬에 포함된 것
| 경로 | 용도 |
|---|---|
references/catalogue.md | 정확한 값이 있는 모든 디테일 (§0 기초 → §17 절대 금지) |
references/tells.md | 생성된 UI의 티(tell)와 그 대체재 |
references/method.md | 레퍼런스 기반 재설계: 선택, 측정, 매핑, 재구축, 증명 |
references/pitfalls.md | 폴리시가 가져오는 버그 (모달 내 메뉴, 중복 키, 이름 손실, CSS 레이어, 테스트) |
references/verification.md | before/after 및 회귀 방지 패스 |
references/porting.md | 토큰 매핑, Tailwind 3/4, 기타 프레임워크, 리트로핏 순서, 다크 단계 |
references/case-study.md | 이 스킬이 나온 실제 작업과 소유자의 말 |
assets/css/unvibe.css | 드롭인 스타일시트 (일반 CSS, uv- 클래스, :root의 토큰) |
assets/react/* | Select, NativeSelect(<select> 드롭인), Switch/SwitchCard, SettingsRow, Accordion, NumberField, Segmented(미끄러지는 알약), RollingNumber, ThinkingIndicator, DateRangePicker, useFlipToFit |
scripts/capture.mjs | [data-shot] 요소의 헤드리스 Chrome 스크린샷, 또는 콘솔 확인이 포함된 앱 화면 |
scripts/compare.mjs | 나란히 before/after 페이지 |
demo/index.html | 모든 패턴, before 및 after, 가상 데이터 포함 |
에셋 사용하기
- CSS:
assets/css/unvibe.css를 프로젝트에 복사하고, 섹션 1을 프로젝트의 토큰에 매핑한 후, 기본 스타일 다음에 가져오십시오. 클래스를 그대로 사용하거나 프로젝트 고유의 클래스 이름으로 변환하십시오 (값은 유지). - React: 필요한 컴포넌트를 복사하십시오;
react-aria-components(및 날짜 범위의 경우@internationalized/date)에 의존합니다. Tailwind 클래스를 포함하지 않습니다. - 기존 컴포넌트 라이브러리: 교체하는 대신 카탈로그의 숫자를 사용하여 해당 부품의 스타일을 다시 지정하십시오.
반환할 것
- before/after 페이지 (눈에 띄는 차이만).
- 변경된 내용을 유형별로 간단히 나열하고, 영향을 받은 화면.
- 회귀 방지 보고서: 감사한 내용, 브라우저에서 테스트한 상호작용, 콘솔 상태, 테스트, 빌드. 확인되지 않은 것은 명확히 말하십시오.