菜单
Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ihj04982/my-cursor-settings --skill design-guide-1536x864-touch命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | design-guide-1536x864-touch |
| description | Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input. |
This guide applies the principles in docs/ (spacing, hierarchy, touch ergonomics, and dashboard standards) to a fixed 1536 × 864 px viewport with touch as the primary input.
| Property | Value | Notes |
|---|---|---|
| Resolution | 1536 × 864 | Same 16:9 aspect as 1920×1080; linear scale ≈ 80% of Full HD. |
| Input | Touch first | Treat pointer hover as optional; all primary actions must be finger-reachable. |
| Mental model | Panel / kiosk / HMI | Prefer predictable regions, large targets, and low mis-tap risk over dense “mouse” layouts. |
Align with the 1320px / 12-column content logic from the design system, adapted to this width:
(1536 − 1320) / 2 = 108px per side on a full-bleed artboard.From the touch handbook and component specs:
| Rule | Specification |
|---|---|
| Minimum touch height | 44–48px for list rows, icons with actions, and compact controls. |
| Primary actions | Prefer 48px or 56px height for main CTAs and frequent actions. |
| Hit area vs. visible size | Use padding to enlarge the tappable region without oversized visuals (“volume” without clutter). |
| Adjacent targets | Leave enough clear space so taps do not overlap neighbors (fat-finger prevention). |
| Thumb / reach | Place high-frequency actions in stable, easy-to-hit zones; avoid tight grids of small icons. |
Dashboard caveat: Dense dashboards may use 36–40px row heights for data when each cell is not individually tappable; for touch, prefer 44px+ for any interactive row or control. If you use smaller visual buttons, compensate with extra external spacing (compensation rule from white space workshop).
Follow the tier system in design_rationale.md and ui_design_specification.md, with touch-first legibility:
| Tier | Size (reference) | Use |
|---|---|---|
| Screen / page title | 24–28px, bold or semi-bold | Anchors orientation; avoid oversized hero type that steals vertical space from data. |
| Section label | 16–20px as needed | Secondary structure. |
| Body | 16px default for touch-first UIs; 14px allowed for dense commerce/lists if contrast and line height stay strong. | |
| Metadata / captions | 12–13px | Lowest priority; use muted gray (e.g. ~60–70% opacity or ~#767676) vs. primary text. |
Contrast: Prefer bold black / white titles + regular gray secondary over “everything medium weight.” Reduce pure black/white vibration on large fields where the docs recommend softer tones.
This guide consolidates rules and vocabulary from:
touch_friendly_design.md — finger thickness, cards, hierarchy, responsive continuityui_design_specification.md — margins, grid, components, breakpointsdesign_rationale.md — grid, typography tiers, spacing tableProfessional Design System Manual_ Web & Dashboard Standards.md — dashboard type scale, buttons, touch constantsThe Beginner’s Guide to UI Grouping_ Lines vs. Whitespace.md — proximity, 1:2 margin ratio, finger testvisual_hierarchy.md — three depths, GNB auditwhite_space_workshop.md — seven spacing tips, compensation for smaller targetsUse this document as the viewport-specific profile; when a rule conflicts, prioritize touch safety and readability at arm’s length on a fixed 1536×864 display.