# Interface Craft > Refine visual hierarchy, typography, spacing, density, color, material, and optical alignment. Use when an interface looks unresolved, cramped, flat, or busy, or when tightening visual quality before release. - Skill: `dragoon0x/interface-craft` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add dragoon0x/interface-craft` - Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/interface-craft/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: dragoon0x (https://skillmd.com/u/dragoon0x) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/dragoon0x/interface-craft --- # Interface Craft ## Mission Make the interface feel deliberate. Craft is not adding detail; it is removing ambiguity from visible decisions until the result feels coherent and appropriate. ## Inspect first Study existing typography, spacing, color, shape, borders, shadows, iconography, imagery, density, and states before changing the visual language. ## Hierarchy first Determine what should be seen first, understood second, acted on, and kept quiet. Use size, weight, contrast, position, spacing, density, grouping, and shape with restraint. ## Typography Evaluate family, weight, size, line height, tracking, measure, wrapping, truncation, baseline, and optical weight together with surrounding whitespace. A technically correct font size can still be wrong if the composition gives the heading excessive visual mass. ## Spacing Spacing creates relationships. Use larger gaps to separate ideas and smaller gaps to bind related elements. Avoid uniform spacing everywhere. ## Optical alignment Inspect icons, circles, logos, glyph-heavy labels, buttons, pills, and asymmetric imagery. Mathematical alignment is only the starting point. ## Density Dense interfaces can be excellent for frequent expert workflows when hierarchy is strong. Sparse interfaces can be excellent when focus matters. Never equate sparse with premium or dense with clutter. ## Color Use color for hierarchy, state, emphasis, interaction, category, and brand. Check light, dark, disabled, error, success, selected, and focus conditions. ## Material Borders, shadows, tonal surfaces, blur, and overlap all communicate relationships. Avoid stacking multiple elevation signals without purpose. ## Icons Check metaphor, optical size, weight, alignment, consistency, accessible naming, and interaction states. ## Imagery Check crop, focal point, aspect ratio, loading, fallback, accessibility, and visual weight. ## Diagnosis When something feels wrong, find the cause before prescribing. "Too much whitespace" may actually be weak grouping. "Flat" may actually be weak hierarchy. "Busy" may actually be competing emphasis signals. ## Micro-detail audit Inspect baseline drift, one-off spacing, inconsistent radii, mismatched shadows, weak focus treatment, awkward wrapping, cramped labels, accidental borders, mismatched icon weight, and unfinished empty/loading states. ## Restraint Before adding a detail ask what it communicates. If the answer is only "more polished," consider removing competing detail instead. ## Reference artifact Use `references/craft-review.md` to review hierarchy, typography, rhythm, density, color, material, optical alignment, and state consistency. ## Completion criteria Hierarchy is immediately legible, relationships are intentional, the visual grammar is coherent, and remaining imperfections are low-impact rather than structural. ## Expert Review Protocol ### First pass: understand Before changing anything, identify the actual user outcome, the existing system, the relevant constraints, and the evidence available. Do not begin by choosing a visual treatment. ### Second pass: compare Ask: - What is the simplest credible solution? - What is the strongest alternative? - What does the current solution cost? - What behavior does each option teach the user? - Which decision is easiest to reverse? - Which failure would be most expensive? Choose deliberately. ### Third pass: stress Do not review only the happy path. Apply pressure through: - repetition - interruption - missing content - long content - slow operations - narrow space - large text - keyboard use - touch use - focus changes - error recovery - restoration Use only scenarios that are relevant to the surface. ### Fourth pass: inspect the implementation When code exists, verify that the implementation preserves the interface decision. Look for: - duplicated sources of truth - styling that bypasses the system - state that can become stale - behavior that differs from adjacent components - abstractions that obscure rather than simplify - dependencies that are not earning their cost - performance work performed without evidence ### Fifth pass: critique the result Ask: > If this were shipped tomorrow, what would users notice that the builder has stopped noticing? Look for: - friction - ambiguity - inconsistency - unnecessary movement - weak recovery - hidden state - visual noise - inaccessible behavior - fragile edge cases ### Sixth pass: distinguish polish from substance A useful change improves one or more of: - understanding - speed - confidence - recovery - accessibility - consistency - maintainability If a change improves none of these and only adds decoration, treat it as suspect. ### Seventh pass: verify A claim is complete only when an appropriate form of evidence supports it. Use: - direct interaction - tests - runtime inspection - visual comparison - accessibility checks - performance measurement - source inspection Do not claim a check that did not occur. ### Completion standard Stop when: 1. the intended outcome is achieved 2. important states are handled 3. meaningful failure modes were considered 4. the interface fits its surrounding system 5. important claims are verified 6. remaining imperfections are lower-value than the risk of further change The goal is not maximal polish. The goal is a result that is difficult to improve without changing the underlying decision.