unslop-components은(는) 무엇을 하나요?

AI가 생성한 앱들은 하나의 실루엣을 공유합니다: 페이지 제목, 4개의 KPI 카드 행, 테이블, 드롭다운이 있는 폼. 그것은 정확하고 잊혀집니다. 컴포넌트는 컴포넌트 라이브러리가 제공하는 것이 아니라 데이터가 무엇인지에 따라 형태를 가져야 합니다.

먼저 기반(unslop-foundation) 위에 구축하세요: 팔레트 토큰, 아이콘 스타일, 일러스트레이션 시스템, 모션 언어, 승인된 컴포넌트 시트. 여기의 컴포넌트들은 해당 토큰과 부품을 사용하며, 색상이나 스타일을 새로 만들지 않습니다.

금지 목록 (기본 모양)

컴포넌트를 먼저 생각하세요: 제품의 구성 요소에 이름을 붙이고, 빌드하고 검토한 후, 화면을 구성합니다. 데이터가 정말로 그러한 경우가 아니라면, 주요 콘텐츠가 다음 중 하나라면 출시하지 마세요:

테두리와 가는 선으로 구분된 행이나 그룹 (공간과 톤으로 구분하세요)
레이블이 있는 폼 (필드 격자 + 저장 버튼)을 편집 방식으로 사용; unslop-foundation/references/designer-standard.md의 편집 패턴을 사용하세요
KPI/통계 카드 행 (한 문장을 사용하거나, 측정하는 대상 안에 숫자를 표시하세요)
셀에 편집 드롭다운이 있는 테이블 (테이블은 많은 행의 많은 속성을 비교할 때 사용합니다)
동일한 카드의 균일한 그리드
기본 인터페이스로서의 폼 (폼은 데이터 입력용이지, 데이터를 보기 위한 것이 아닙니다)
단순한 색상 텍스트나 이름만 있는 알약 형태의 상태 (상태에 형태를 부여하세요, 아래 참조)
진행률, 게이지, 장식용 도넛 링을 위한 파이 차트

데이터 형태에 이름을 붙이세요. 시퀀스/여정, 전체의 부분, 비교, 관계, 시간 경과, 순위, 위치, 계층, 또는 주의가 필요한 항목들의 흐름.
형태에 맞는 폼을 고르세요 references/patterns.md에서. 한 줄을 작성하세요: "이 화면은 경로 맵입니다. 데이터가 영역별로 정렬된 흐름이기 때문입니다."
화면당 하나의 시그니처 컴포넌트를 정의하세요: 사용자가 기억할 만한 것. 그것이 풍부함을 담당하고, 주변의 모든 것은 조용한 텍스트와 얇은 선입니다.
상태에 시각적 언어를 부여하세요 최소 두 가지 채널(모양/채움 및 색상, 색상만 사용하지 마세요)을 사용하며, 모든 화면에서 동일하게 사용합니다.
먼저 보여주고, 그 다음 편집하세요. 기본 보기는 읽기 우선입니다. 편집은 한 단계 더 깊이(세부 정보 블록, 서랍, 세부 페이지)에 있으며, 모든 행에 있지 않습니다.
컨트롤보다 직접 조작. 범례 역할도 하는 필터. "보기" 버튼 대신 대상을 클릭하세요. 드래그는 드롭다운을 더 빠른 것으로 대체할 때만 사용하세요.
밀도에 변화를 주세요. 하나의 큰 순간, 조용한 중간, 작은 지원 세부 사항. 다섯 개의 동일한 상자가 아닙니다.
아래 관문에 대해 확인하세요.

화면의 주요 요소가 테이블, 카드 그리드, 통계 행 또는 폼이 아닙니다.
한 줄의 이유가 선택한 컴포넌트를 데이터 형태와 연결합니다.
상태는 모양/채움과 색상을 사용하며 화면 전체에서 일관됩니다.
읽기 우선: 어떤 화면도 클릭 없이 보이는 드롭다운이나 입력 필드가 몇 개 이상 없습니다.
컴포넌트는 360px에서도 여전히 작동하며(의도적으로 감싸거나, 쌓거나, 스크롤), 키보드로 접근 가능하고 시각적 포커스가 있습니다.
축소 모션(reduced motion)이 존중됩니다; 장식용으로 애니메이션을 사용하지 않습니다.
직접 확인했습니다: 360px 및 1280px에서 Playwright MCP(claude mcp add playwright npx @playwright/mcp@latest)로 스크린샷을 찍었습니다. 확인할 수 없었다면 그렇게 말하세요; 코드만으로 화면을 창의적이거나 완성되었다고 부르지 마세요.

많은 행, 많은 비교 가능한 열, 정렬이 중요한 경우(감사 로그, 가격 목록, 내보내기). 그런 다음 테이블을 디자인하세요: 표 형식의 숫자, 정렬된 열, 조용한 규칙, 행 호버, 얼룩말 줄무늬나 박스형 셀 없음, 셀 내 컨트롤 없음.