dense-tool-ui은(는) 무엇을 하나요?
'조용하고 밀도 높으며 키보드 우선'인 도구 UI를 위한 측정된 참조: 중첩 콘텐츠 패널, 구분선 없는 44px 행, ⌘K 명령 팔레트, 인라인 편집, 그림자 대신 LCH 회색 단계. 그리고 이와 일치하는 단색 랜딩 페이지.
구조와 동작을 복사하고 브랜드는 절대 복사하지 마세요. 다크 + Inter + 보라색 악센트는 AI 생성기가 기본으로 생성하는 것과 정확히 일치합니다. 항상 프로젝트에 맞게 --accent-h와 --font를 변경하세요.
파일
| 경로 | 읽을 시점 |
|---|---|
assets/app-template.html | 앱/대시보드/백오피스를 구축할 때. 실행 가능한 셸: 리스트/보드, 상세, ⌘K, 생성 모달, 토스트, 다크/라이트, ?selftest. |
assets/landing-template.html | 랜딩 페이지를 구축할 때. 블러 헤더, 히어로 + 제품 샷, 매니페스토, 기능 섹션 + 스펙 드로어, 체인지로그, 사용자 평가, 가격 + 비교 테이블, 푸터. ?selftest. |
references/app.md | 셸, 사이드바, 리스트, 보드, 이슈/프로젝트 상세, 모달, ⌘K, 필터 메뉴, 단축키의 정확한 크기. |
references/tokens.md | 색상 단계 (다크 + 라이트), 타입 스케일, 라디, 그림자, 이징. |
references/landing.md | 랜딩, 가격 및 고객 페이지 구조, 반응형 중단점, 마케팅 토큰. |
워크플로
- 일치하는 템플릿을 프로젝트에 복사하세요. 원본은 절대 편집하지 마세요.
- 브랜드 변경:
--accent-h(예: teal 190, orange 50, green 150)와--font를 설정한 다음 제품명, 데이터 및 카피를 변경하세요.app-themelocalStorage 키를 이름을 바꾸세요. - 샘플 데이터를 교체하세요. DOM 형태를 유지하세요:
.grp > .row,.col > .card,.detail > .doc + .props. CMDS에 명령을[label, [keys], fn]으로 추가하세요. 단일 키 단축키는keydown리스너에 추가하며, 이 리스너는 이미 입력 필드에서의 타이핑을 무시합니다.- 템플릿에 없는 화면을 추가하기 전에 관련
references/파일을 읽으세요. - 검증:
file.html?selftest를 열고 탭 제목이SELFTEST OK <n>인지 확인하세요. 그런 다음 1280px 및 390px, 다크 및 라이트에서 확인하세요.
규칙
- 밀도 우선: 13px 본문, 44px 행, 행 구분선 없음, 장식 아이콘 없음. 색상은 상태, 레이블 및 화면당 기본 버튼 하나에만 사용.
- 그라디언트, 글로우 또는 블러가 아닌 배경 단계로 깊이 표현 (⌘K 뒤에도 블러 없음). 테두리는 1px 낮은 알파 링 섀도우.
- 모든 액션에는 단축키가 있으며, 단축키가 표시됨 버튼, 메뉴 및 툴팁에. 컨텍스트 인식 ⌘K.
Ctrl/⌘+Enter제출. - 제자리에서 편집하고 즉시 저장: 저장 버튼 없음. 속성은 선택기를 여는 버튼. 생성은 링크가 있는 토스트로 종료.
- 빈 상태는 능동적으로: 얇은 선 일러스트레이션, 한 문장, 단축키를 표시하는 기본 버튼.
- 삭제는 소프트: 확인, 복원 가능 상태 유지, 보존 기간 명시.
- 리스트와 보드는 동일한 데이터. '표시 옵션'을 통해 사용자가 그룹화, 정렬 및 표시 열을 선택할 수 있음.
- 랜딩: 거의 단색, 강조를 위한 두 가지 텍스트 톤, 헤더와 프리푸터에 반복되는 하나의 밝은 CTA, 히어로 이미지로 실제 제품 사용.
복사 금지
원본 제품의 로고, 제품명, 일러스트레이션, 아이콘 세트, 마케팅 이미지 또는 카피. 측정값, 구조 및 동작만 가져오세요.