Guides intentional UI design for web components, pages, and apps via domain exploration, native color palettes, signature elements, and default replacements. For typography, spacing, dark mode, dashboards.
From humaninloopnpx claudepluginhub deepeshbodh/human-in-loop --plugin humaninloopThis skill uses the workspace's default tool permissions.
references/CRAFT-PRINCIPLES.mdreferences/VALIDATION-CHECKS.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Craft intentional interface designs through systematic discovery. Generic output happens when structural decisions (typography, navigation, data visualization) are treated as mere infrastructure rather than design itself.
Violating the letter of these rules is violating the spirit of these rules. Following "most" of the discovery process or applying "some" intentional choices is not compliance.
Before proposing any direction, explore these four elements. Do not skip any.
Identify 5+ concepts native to the product's world. These are nouns, verbs, textures, and metaphors that belong to the domain. Required even for familiar domains.
| Product Type | Domain Concepts |
|---|---|
| Financial dashboard | Ledger, balance, flow, precision, trust |
| Developer tools | Terminal, pipeline, build, deploy, logs |
| Healthcare | Vitals, chart, monitor, care, clinical |
| Creative tools | Canvas, brush, layer, blend, palette |
Identify 5+ colors that exist naturally in the product's physical or conceptual space. Build palettes that feel native, not applied over the product. Required even when brand colors exist.
| Product Type | Color World |
|---|---|
| Financial | Deep navy, muted gold, slate gray, paper white |
| Developer | Terminal green, dark gray, syntax highlighting hues |
| Healthcare | Clinical white, vital blue, alert amber, soft green |
| Creative | Rich pigments, canvas cream, ink black |
Define one distinctive element that could only belong to this product. This is the unforgettable detail. Required even for internal tools.
Examples:
Name 3 obvious choices and deliberately replace them. If the first thing that comes to mind is the solution, it is probably a default. Required even when defaults seem appropriate.
| Default | Replacement Strategy |
|---|---|
| White cards on white background | Surface elevation via subtle tint |
| Standard 12-column grid | Asymmetric or breaking layout |
| Inter/Roboto font | Domain-appropriate typeface |
| Purple gradient accent | Color from product's world |
No exceptions:
Define these three elements with specifics before coding:
Intent must be systemic. Every token, color, and spacing decision reinforces the stated feeling.
Build systems, not random choices. See CRAFT-PRINCIPLES.md for complete token architecture.
Every color traces back to these primitives:
| Primitive | Purpose |
|---|---|
| Foreground | Text colors (primary, secondary, muted) |
| Background | Surface colors (base, elevated, overlay) |
| Border | Edge colors (default, subtle, strong) |
| Brand | Primary accent |
| Semantic | Functional colors (destructive, warning, success) |
Surfaces stack. Build a numbered system:
Level 0: Base background (app canvas)
Level 1: Cards, panels (same visual plane)
Level 2: Dropdowns, popovers (floating above)
Level 3: Nested overlays (stacked)
Level 4: Highest elevation (rare)
In dark mode, higher elevation = slightly lighter. The difference between levels should be subtle: a few percentage points of lightness, not dramatic jumps.
Study Vercel, Supabase, Linear. Their surfaces are barely different but still distinguishable. Their borders are light but not invisible.
The squint test: Squint at the interface. Hierarchy should remain perceivable. No single border or surface should jump out. If borders are the first thing noticed, they are too strong.
Pick a base unit (4px or 8px). Use multiples throughout. Every spacing value should be explainable as "X times the base unit."
| Context | Spacing Scale |
|---|---|
| Micro | Icon gaps, tight element pairs |
| Component | Within buttons, inputs, cards |
| Section | Between related groups |
| Major | Between distinct sections |
Symmetrical padding rule: TLBR must match. Exception: when content naturally creates visual balance.
/* Correct */
padding: 16px;
padding: 12px 16px; /* Only when horizontal needs room */
/* Avoid */
padding: 24px 16px 12px 16px;
Build distinct levels distinguishable at a glance:
| Level | Treatment |
|---|---|
| Headlines | Heavier weight, tighter letter-spacing |
| Body | Comfortable weight for readability |
| Labels/UI | Medium weight, works at smaller sizes |
| Data | Often monospace, use tabular-nums |
Do not rely on size alone. Combine size, weight, and letter-spacing.
Choose ONE approach and commit:
| Strategy | Character | When to Use |
|---|---|---|
| Borders-only | Clean, technical, dense | Utility-focused tools |
| Subtle shadows | Soft lift, approachable | General applications |
| Layered shadows | Rich, premium, dimensional | Cards as physical objects |
| Surface shifts | Background tints establish hierarchy | Minimal, elegant |
Do not mix approaches. Inconsistent depth strategy is jarring.
| Mistake | Fix |
|---|---|
| Borders too visible | Use low opacity rgba (0.05-0.12 alpha for dark mode) |
| Dramatic surface jumps | Subtle lightness changes (2-5%) |
| Mixed hues for surfaces | Gray variations, same hue family |
| Harsh dividers | Subtle borders instead of hr elements |
| Missing interaction states | Define hover, focus, active for all controls |
| Pure white cards on color | Use tinted whites matching background |
| Decorative gradients | Gradients must serve function |
When any of these thoughts occur, STOP immediately:
All of these mean: The discovery process is being skipped. Restart with proper exploration.
| Excuse | Reality |
|---|---|
| "Requirements are clear, no discovery needed" | Discovery prevents template output. Do it anyway. |
| "User wants speed over exploration" | Exploration takes 5 minutes. Rework from generic output takes hours. |
| "This is a standard component" | Standard is exactly what discovery prevents. |
| "I know what works for this type of product" | Experience creates blind spots. Fresh exploration reveals better options. |
| "Defaults exist because they work" | Defaults exist because they are easy. Easy is not distinctive. |
| "Can refine aesthetics later" | "Later" rarely comes. Aesthetic debt compounds. Build right from start. |
| "Internal tool, users do not care" | Internal users deserve craft. Poor tools reduce productivity. |
Before finalizing any interface design (see references/VALIDATION-CHECKS.md for detailed validation):
Discovery:
Intent:
Execution:
Validation: