菜单
Use when evaluating information density, whitespace, spacing systems, and compact vs comfortable modes in a design.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when starting a new design project, when context seems insufficient for design decisions, or when explicitly gathering requirements before visual design work.
Use when starting a design critique, visual design review, or wireframing process for any app or service. Orchestrates the full design-crit pipeline from brief through visual facets to design direction.
Use when a design brief is confirmed and the project needs a plan for which design facets to evaluate and in what order.
Use when auditing a design for accessibility — keyboard navigation, screen reader support, touch targets, focus management, color contrast, and cognitive load. Typically runs as the last facet to audit accumulated decisions.
Use when evaluating color palettes, theming, dark mode, contrast, and color tokens for a design system.
Use when evaluating interactive component patterns — buttons, forms, cards, modals, tables, and other UI building blocks.
| name | crit-density-spacing |
| description | Use when evaluating information density, whitespace, spacing systems, and compact vs comfortable modes in a design. |
Reference: Read ../../reference/crit-loop.md for compare view, feedback round-trip, convergence, and locking mechanics.
You are a designer critiquing the density and spacing system for this project. Density is a sensory facet -- it applies to surfaces, layouts, and components that are already locked. Your job: generate density options, evaluate them against usability and user context, and guide the user to a locked spacing direction.
Before generating any options, read these files in order:
.design-crit/state.json -- current facet state, round number, all prior locked decisions.design-crit/brief.md -- project brief (target users, device, context of use, scope)../../reference/crit-loop.md -- shared crit loop mechanics../../reference/design-principles.md -- option generation principles, convergence toneRead every locked facet's winning option file. Density decisions apply to existing structure. Pay special attention to:
State in your critique: "Building on the locked [facet]: [summary]" for each.
Check for feedback-round-{N}.json in .design-crit/facets/density-spacing/. If found and
unprocessed, read it and continue the crit loop from that round.
Every option must define a spacing scale. The scale is the atomic unit system that all spacing derives from.
Choose one base unit per option. The two common approaches:
Define named tokens for the scale. Use T-shirt sizing or numbered steps:
space-xs: 4px (or 0.5 base)
space-sm: 8px (1 base)
space-md: 16px (2 base)
space-lg: 24px (3 base)
space-xl: 32px (4 base)
space-2xl: 48px (6 base)
space-3xl: 64px (8 base)
space-4xl: 96px (12 base)
Each option HTML must render the full scale as a visual reference: labeled bars showing each step with its pixel value and token name.
All spacing in the option must use scale tokens. No arbitrary pixel values. This includes:
Position each option on the density spectrum. The spectrum is not good-to-bad; it is context-dependent. Every position has valid use cases.
| Zone | Padding | Use Case | Example Products |
|---|---|---|---|
| Spacious | Generous whitespace, large margins, breathing room | Marketing sites, landing pages, luxury products | Apple.com, Stripe, Notion marketing |
| Comfortable | Balanced padding, readable spacing | Consumer apps, general SaaS, content platforms | Gmail, Slack, Notion app |
| Compact | Reduced padding, tighter gaps, more visible content | Power tools, productivity apps, data-informed workflows | Linear, VS Code, Figma |
| Dense | Minimal padding, maximum information per viewport | Dashboards, trading platforms, admin panels | Bloomberg Terminal, Grafana, Jira board view |
Read the target users and context of use from the brief to determine the right zone:
Regardless of density zone, interactive elements must meet minimum touch target sizes.
| Platform | Minimum Target Size | Source |
|---|---|---|
| iOS | 44 x 44 pt | Apple Human Interface Guidelines |
| Android | 48 x 48 dp | Material Design |
| Web (touch) | 44 x 44 px | WCAG 2.5.8 (AAA) / common practice |
| Web (mouse-only) | 24 x 24 px minimum, 32+ recommended | WCAG 2.5.8 |
Dense layouts can have small visual elements but must maintain touch target size through padding. A 16px icon button in a compact layout still needs 44px of tappable area on touch devices. Methods:
In each option HTML, annotate at least three interactive elements with visible touch target overlays showing the actual tappable area vs the visual element.
Whitespace is not empty space -- it is a design element. Each option must demonstrate intentional whitespace.
| Function | What It Does | Example |
|---|---|---|
| Grouping | Associates related elements (Gestalt proximity) | Tighter spacing within a card, larger gap between cards |
| Separation | Creates visual boundaries without lines | Section spacing in a form |
| Emphasis | Draws attention to isolated elements | A CTA button with generous surrounding space |
| Rhythm | Creates visual cadence and scanability | Consistent vertical spacing between list items |
| Rest | Gives the eye a place to rest, reduces cognitive load | Margins around content blocks |
In your critique, identify at least two places in each option where whitespace is doing meaningful work and one place where it could be improved. Be specific: "The 32px gap between the sidebar and content creates clear separation, but the 8px gap between form labels and inputs feels too tight for this comfortable density."
If the brief's user base includes both casual and power users, or if the product has both overview and detail views, consider offering a compact mode toggle.
A settings toggle or UI control that switches between comfortable and compact. Implement with a CSS class on the root element that adjusts spacing scale multipliers.
:root { --density-factor: 1; }
[data-density="compact"] { --density-factor: 0.75; }
[data-density="spacious"] { --density-factor: 1.25; }
Different density levels for different parts of the UI within the same view. Sidebar navigation is compact; main content area is comfortable; marketing sections are spacious.
Density shifts based on viewport size. Desktop gets compact (mouse precision); tablet gets comfortable; phone gets spacious (touch targets). This overlaps with the responsive facet but the spacing scale definition lives here.
Include compact mode in at least one option when:
Generate 2-4 density options. Each must target a different zone on the density spectrum or present a different spacing strategy. Maximize variety.
Example option set for a project management SaaS:
Each option HTML must include:
Refine survivors based on feedback. Common refinements:
Score every option against these questions in your critique. Be specific -- cite pixel values, screen areas, and user scenarios.
When generating compare.html for this facet, follow all rules from crit-loop.md with
these additions:
When the user locks a density option:
state.json with status: "locked", locked_option, locked_summary,
decided_by, decision_rationale, rounds_completed.locked_summary must capture: base unit (4px or 8px), density zone, compact mode
(yes/no), and touch target compliance status.design-tokens.json at the direction
stage. Ensure all CSS custom properties are parseable.Use these to inform option generation and critique. Apply them to the specific project.
| Pattern | When It Works | Watch Out For |
|---|---|---|
| 8px grid everywhere | Simple, consistent, easy to maintain | Too coarse for dense data UIs |
| 4px base with 8px multiples | Fine control where needed, round numbers | More tokens to manage |
| Content-driven density | Different density per content type | Inconsistency if not systematic |
| Viewport-responsive density | Adapts to device automatically | Unexpected layout shifts on resize |
| User-toggleable density | Serves both power and casual users | Two layouts to test and maintain |
| Fixed sidebar, fluid content | Sidebar compact, content comfortable | Density mismatch at boundary |
Line height is both a typography and spacing decision. If typography is already locked, use its line height as a spacing input. If not yet locked, define line height ranges that the typography facet should respect.
Grid gutters and column gaps are defined by the layout facet. Density refines the interior spacing WITHIN those grid cells. Do not change the grid structure.
Component internal padding (button padding, card padding, input height) is refined here. The component facet defined structure; density defines breathing room within that structure.
--space-xs, --space-sm, etc.) for
clean token extraction.