태블릿

ultrahand: 태블릿

인터랙티브 Claude 아티팩트로 태블릿 화면을 디자인하세요. 아티팩트는 iPad와 Android 태블릿 크기 사이를 두 방향 모두에서 전환하고, 분할 너비(1/3, 1/2, 2/3)에 스냅되며, 창을 전체 너비에서 320까지 드래그하는 동안 실시간으로 재배치됩니다. 적용하는 모든 규칙은 references/principles.md에 있으며, 각 규칙은 references/sources.md를 인용합니다. 크기, 분할 및 크기 클래스는 references/presets.md에 있습니다.

1. 요구 사항 수집

추론할 수 없는 것만 물어보세요. 그리기 전에 다음을 확정하세요:

• 플랫폼: iPadOS, Android 또는 둘 다. 둘 다인 경우 48유닛 타겟과 플랫폼 중립 패턴을 사용합니다.
• 범위: 한 화면 또는 플로우. 플로우인 경우 화면 목록과 사람들이 화면 간에 이동하는 방식을 나열하세요: 사이드바 또는 레일, 목록에서 세부 정보로, 시트, 팝오버 또는 새 창.
• 기본 작업: 각 화면이 수행하는 한 가지 작업과 이에 맞는 표준 레이아웃(목록-세부 정보, 지원 창, 피드 또는 단일 창).
• 실제 콘텐츠: 이름, 길이, 개수 및 가장 긴 그럴듯한 문자열. Lorem Ipsum으로 디자인하지 마세요.
• 데이터 상태: 로드되는 것, 비어 있을 수 있는 것, 실패하거나 오프라인이 될 수 있는 것.
• 입력: 터치만, 또는 키보드, 트랙패드, 마우스 또는 Pencil도 포함. 달리 명시되지 않는 한 모두 가능하다고 가정합니다.
• 멀티태스킹: 이 앱 외에 사람들이 하는 일(나란히 참조, 콘텐츠 끌어오기/내보내기). 320 너비에서 전체 화면까지의 창을 예상하세요.
• 제약 조건: 브랜드 색상, 글꼴, 기존 디자인 시스템 및 네이티브 앱인지 웹인지 여부.
• 테마: 색상, 크기 또는 간격을 선택하기 전에 프로젝트의 테마(design/THEME.md, *.tokens.json; shared/theme/README.md 참조)를 찾으세요. 있는 경우 해당 테마로 디자인하세요: node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html을 실행하고, 빌드에 --head theme.html을 전달하고, 해당 테마의 사용자 정의 속성(var(--color-surface), var(--space-gap-group))만 사용하고, 인벤토리의 컴포넌트를 재사용하세요. 디자인에 테마에 없는 것이 필요하면 가장 가까운 토큰을 사용하고 질문 사항에 추가 사항을 나열하세요. 값을 임의로 만들지 마세요. 테마가 없으면 shared/theme/rules.md의 필수 사항을 따르고 theme 스킬을 제안하세요.

2. 참조 읽기

디자인하기 전에 references/principles.md와 references/presets.md를 읽으세요. 새로운 패턴을 만들기보다는 플랫폼 자체 패턴(사이드바 또는 레일, 분할 보기, 팝오버, 메뉴 바 명령)을 사용하세요.

3. 화면 구성

각각 검사를 통과한 컴포넌트라도 합쳐지면 지저분한 화면이 될 수 있습니다. 빌드하기 전에, 플러그인의 구성 규칙(shared/composition/principles.md 참조)을 사용하여 섹션을 형성하고 섹션이 화면을 형성하는 방법을 계획하세요:

• 섹션 맵을 작성하세요. 각 화면의 섹션(사이드바, 목록 창, 도구 모음이 있는 세부 정보 창, 인스펙터)을 나열하고, 각각의 단일 작업, 사용 빈도순으로 정렬된 구성원, 그리고 하나의 강조점을 명시하세요. 무엇이 기본 콘텐츠이고 무엇이 크롬인지 말하세요: 콘텐츠가 지배하고 크롬은 뒤로 물러납니다.
• 공간으로 그룹화하세요. 그룹 내부의 간격은 그룹 간의 간격보다 명확히 작아야 합니다. 공간이 그룹을 보여줄 수 없을 때만 컨테이너를 추가하세요.
• 역할당 하나의 스타일, 섹션당 하나의 강조점. 같은 역할, 같은 스타일; 상태와 레이블은 버튼처럼 보이지 않아야 합니다. 강한 악센트는 섹션당 한 가지에만 가고, 선택된 상태는 조용한 처리를 사용합니다.
• 작게 유지하세요. 약 세 가지 타입 크기, 한 곳에 하나의 사실, 자주 사용되는 구성원은 보이고 드문 구성원은 메뉴 뒤에. 변경으로 무언가가 추가되면 먼저 재구성하고 그 자리를 얻은 것만 추가하세요.

4. 캔버스 아티팩트 빌드

플러그인의 공유 크기 조정 가능 캔버스(shared/canvas/; README.md에 전체 계약이 있음) 위에 빌드하세요. 화면을 screen.html로, 디자인의 자체 설정을 config.json으로 작업 폴더에 작성한 다음 빌드하세요:

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/tablet/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<디자인 이름>" --out index.html

index.html을 아티팩트로 게시하세요. references/presets.md에서 캔버스는 다음을 얻습니다:

• 전체 화면: ipad-mini 744, ipad 820, ipad-13 1032 및 android-tablet 800. 회전하면 각각 가로 방향이 제공됩니다.
• 분할 보기: ipad-split, ipad-13-split 및 android-split, 앱이 분할기의 한쪽에 있는 가로 방향 장치. 분할기는 1/3, 1/2 및 2/3에 스냅됩니다(드래그하거나 포커스하고 화살표 키를 누르세요). Full은 가로 방향의 전체 화면 사전 설정입니다.
• 자유 크기 조정: 사전 설정 크기에서 320 × 450까지 드래그 핸들.
• 검사: 320 너비 재배치, 키보드가 올라간 가로 방향(1180 × 420).

드래그하는 동안 레이아웃은 실시간으로 재배치되어야 합니다. 전체 너비에서 절반 너비로 갈 때 계속해서 다시 렌더링되어야 하며, 840과 600 중단점을 넘을 때 다시 로드하거나 상태를 잃지 않아야 합니다. 판독값에는 현재 너비와 크기 클래스(압축, 중간, 확장, 큼)가 표시됩니다.

• **config.json**은 title과 states(예: 기본, 로딩, 빈, 오류)를 설정합니다. Android 전용 디자인은 "initialPreset": "android-tablet"으로 설정하고, iPadOS와 Android를 함께 사용하는 경우 "minTarget": 48으로 설정합니다.
• 화면 계약: [data-screen] 섹션이 있는 하나의 <template id="uh-screen">과 클릭을 위한 data-nav, data-nav-replace, data-nav-back 및 data-show-state. 크기 클래스별로 @container screen (width >= 600px) 및 (width >= 840px) 또는 뷰포트의 data-width-class를 사용하여 레이아웃을 지정하고, 사전 설정이나 @media로는 절대 지정하지 마세요. 가장자리는 [data-screen]에 선언된 var(--uh-safe-*)로 패딩합니다(:host는 이를 볼 수 없음). 텍스트는 rem 단위로, 히트 영역, 아이콘 및 거터는 px 단위로 지정하여 200% 텍스트가 컨트롤이 아닌 단어를 키우도록 합니다. 색상은 light-dark()를 사용합니다. 동작은 window.ultrahandSetup = function (canvas) { … }에 작성됩니다.
• 내장 토글: 밝음/어두움, 200% 텍스트, 상태 선택기 및 탭 타겟 표시. 직접 만들지 마세요. 시트, 팝오버 또는 메뉴를 연 후에는 canvas.refresh()를 호출하세요.
• 포인터와 키보드는 항상 활성화: 뷰어는 마우스와 키보드로 아티팩트를 조작하므로 모든 컨트롤에 호버 상태, 플랫폼에 있는 경우 오른쪽 클릭 컨텍스트 메뉴, 보이는 :focus-visible 포커스 및 단축키 힌트를 제공하세요. 탭 타겟 오버레이로 터치를 확인하세요. 자체 토글 뒤에 이를 숨기지 마세요.
• 창 모드 iPad 상태에서는 선행 도구 모음 버튼이 상단-선행 창 컨트롤과 겹치지 않도록 유지하세요.
• 주요 플로우를 클릭 가능하게 만드세요: 내비게이션 전환, 행 선택 또는 푸시, 창 숨기기 및 표시, 시트 및 팝오버 열기 및 닫기. 절대 alert, confirm 또는 prompt를 사용하지 마세요.

5. 모든 크기 클래스 디자인

넓은 쪽에서 좁은 쪽으로 작업하고, 각 문제가 나타나는 크기에서 수정하세요:

1. 확장 / 큼, 가로 전체 화면 (예: ipad 1180): 창, 내비게이션(사이드바 또는 레일) 및 밀도를 선택하세요. 줄 길이와 컨트롤 너비를 제한하세요.
2. 중간, 세로 전체 화면 및 2/3 분할 (예: 820, 787): 더 적은 창으로 축소하고, 레일 또는 상단 탭 바를 사용하세요.
3. 압축, 1/2 및 1/3 분할 (예: 590, 393): 하단 바 또는 탭 바가 있는 휴대폰 레이아웃, 한 번에 하나의 창, 목록으로 돌아가기 위해 뒤로 가기.
4. 드래그 전체 너비에서 320까지 천천히 드래그하고 다시 돌아오세요. 선택, 스크롤 위치 및 입력된 텍스트가 유지되는지 확인하세요. 목록-세부 정보가 좁아질 때 열린 세부 정보를 유지하고, 넓어질 때 해당 항목을 선택하는지 확인하세요.

그런 다음 추가 사례를 확인하세요: 320 너비 재배치, 키보드가 올라간 가로 방향, 그리고 android-tablet 사전 설정(Android가 범위에 있는 경우) 두 방향 모두.

6. 제시 전 자체 점검

모든 항목을 확인하세요. 실패한 항목을 수정하거나, 이름을 지정하고 왜 허용 가능한지 설명하세요.

구성 (구성 감사 실행, node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs", 가장 큰 크기와 가장 작은 크기에서, 또는 육안으로 확인):

• 흐리게 했을 때 화면이 의도된 섹션을 보여주고, 기본 콘텐츠가 먼저 눈에 띕니다. 의도하지 않은 밝은 부분이 없습니다.
• 각 섹션에는 하나의 작업이 있고, 구성원은 기능과 빈도별로 그룹화되며, 그룹 간 간격이 그룹 내 간격보다 명확히 큽니다.
• 각 섹션에는 최대 하나의 강하게 강조된 요소가 있습니다. 선택된 상태는 조용합니다.
• 역할당 하나의 스타일: 각 섹션의 컨트롤 스타일을 세고 추가 스타일을 정당화하세요. 레이블이나 상태가 버튼처럼 보이지 않습니다.
• 행과 섹션은 공유 가장자리에 정렬됩니다. 화면에 약 세 가지 타입 크기가 있습니다.
• 두 번 표시된 사실이 없고, 여기서 작업에 도움이 되지 않는 화면의 어떤 것도 없습니다.
• 변경 라운드 후: 추가된 것을 나열하세요. 화면이 필요한 것보다 더 복잡하지 않습니다.
• 테마 값만 사용: 원시 색상 없음, 8포인트 스케일을 벗어난 간격 없음, 스케일을 벗어난 타입 크기 없음, 재구축보다는 인벤토리 컴포넌트 재사용(shared/theme/rules.md NN-1, NN-2, NN-6, EV-4).

컴포넌트 및 플랫폼:

• 레이아웃은 장치가 아닌 너비 클래스(600 / 840)로 전환됩니다. 모든 기능은 320에서 전체 화면까지 모든 너비에서 접근 가능합니다.
• 크기 조정은 실시간으로 재배치되고 선택, 스크롤, 입력 및 재생을 유지합니다. 중단점에서 재설정되는 것이 없습니다.
• 내비게이션은 너비에 맞습니다: 압축에서는 하단 바, 그 위에서는 레일, 상단 탭 바 또는 사이드바. 5개 이하의 최상위 탭이 있으며, 숨겨지거나 비활성화된 것이 없습니다.
• 다중 창 레이아웃은 표준 패턴을 따릅니다. 각 창에서 선택이 강조 표시되고, 숨겨진 창에는 뒤로 돌아갈 수 있는 방법이 두 가지 이상 있으며, 어떤 세부 정보 창도 비어 있지 않습니다.
• 늘어나는 것이 없습니다: 버튼, 필드, 시트, 대화 상자 및 이미지에는 최대 너비가 있고, 텍스트에는 읽기 쉬운 줄 길이가 있습니다.
• 탭 타겟은 최소 44 × 44 pt(iOS) 또는 48 × 48 dp(Android)이며 포인터가 있어도 24 × 24 미만이 아닙니다. 기본 콘텐츠는 중앙에 있고 자주 사용되는 컨트롤은 측면 가장자리에서 접근 가능합니다.
• 어떤 방향에서도 상태 표시줄, 홈 표시기, 작업 표시줄 또는 iPad 창 컨트롤 아래에 인터랙티브한 것이 없습니다.
• 포인터: 모든 컨트롤에 호버 상태가 있고, 오른쪽 클릭 및 길게 터치로 컨텍스트 메뉴가 열리며, 호버에서만 사용할 수 있는 것은 없습니다.
• 항목 전환, 패널 닫기 또는 시트 닫기는 입력된 텍스트를 절대 잃지 않습니다. 실행 취소는 두 번의 연속 삭제를 견디고 항목을 창으로 되돌립니다.
• 키보드: Tab 및 화살표로 주요 플로우가 작동하고, 포커스가 항상 보이며, 표준 단축키가 작동하고, Esc는 닫기, 취소 또는 지우기를 수행합니다.
• 모든 드래그 앤 드롭에는 드래그가 아닌 대안이 있고, 유효한 대상을 표시하며, 실행 취소할 수 있습니다.
• 두 방향 모두 작동하며, 키보드가 올라간 가로 방향에서 포커스된 필드가 계속 보입니다.
• 레이아웃은 200% 텍스트에서도 유지되며, 텍스트는 최소 4.5:1, UI는 최소 3:1의 명암비를 두 모드(밝음 및 어두움)에서 유지합니다.
• 로딩, 빈 및 오류 상태가 화면뿐만 아니라 각 창에 대해 디자인되었습니다.
• 디자인이 320 너비에서 수평 스크롤 없이 작동합니다.

7. 제시

아티팩트 링크를 공유하세요. 몇 줄로 섹션 맵(각 섹션의 작업과 강조점), 주요 결정과 각 결정 뒤에 있는 원칙(소스 키 인용), 각 너비 클래스에서 레이아웃이 어떻게 변경되는지, 이유와 함께 수락한 자체 점검 항목, 제안된 테마 추가 사항(theme 스킬용) 및 미해결 질문을 명시하세요.