design
npx machina-cli add skill tslateman/duet/design --openclawDesign as Intention
Overview
Design is choosing what to do and what to leave out. Every design decision — visual, structural, interactive — should be deliberate. Generic defaults are the enemy. The key is intentionality, not intensity.
Design Thinking
Before implementing, commit to a direction:
- Purpose — What problem does this solve? Who uses it?
- Tone — What should it feel like? (Minimal, bold, playful, austere, warm, precise, raw)
- Constraints — Technical limits, accessibility, performance
- Differentiation — What makes this memorable? What's the one thing worth getting right?
Bold maximalism and refined minimalism both work. Timid middle ground does not.
Visual Design
When building interfaces, fight generic AI aesthetics:
Typography
Choose distinctive, characterful fonts. Pair a display font with a refined body font. Avoid defaults (Arial, Inter, Roboto, system fonts). Every font choice signals intent.
Color
Commit to a cohesive palette. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Vary between light and dark — don't default to one.
Motion
Focus on high-impact moments. One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Prioritize CSS-only solutions. Use scroll-triggering and hover states that surprise.
Composition
Unexpected layouts. Asymmetry. Overlap. Grid-breaking elements. Generous negative space OR controlled density — both work, but choose one.
Texture
Create atmosphere and depth. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows. Never default to flat solid backgrounds.
Never: Overused font families, purple-gradient-on-white, predictable card grids, cookie-cutter components. No two designs should converge on the same choices.
API Design
When designing interfaces between systems:
- Consistency — Same patterns everywhere. If one endpoint uses
create, don't useaddelsewhere - Least Astonishment — Every method does what its name suggests, nothing more
- Minimal surface — Expose only what callers need. You can add later but can't remove
- Fail fast — Report errors at the point closest to the mistake
- Self-documenting — If the interface needs a comment, the design needs work
System Design
When designing architecture or structure:
- Single responsibility — Each component does one thing well
- Clear boundaries — Where does one module end and another begin?
- Explicit dependencies — No hidden coupling, no global state
- Reversibility — Prefer decisions you can undo. Isolate the ones you can't
The Test
After designing, ask:
- Can I explain the concept in one sentence?
- Does every element serve the purpose?
- Would someone remember this? Why?
- What did I deliberately leave out?
Match complexity to vision. Elaborate designs need elaborate execution. Simple designs need precision. Elegance comes from committing fully to the chosen direction.
See Also
/naming— Hard-to-name things signal design problems/adr— Capture design decisions and their reasoning/review— Reviews assess design quality alongside correctnessskills/FRAMEWORKS.md— Full framework indexRECIPE.md— Agent recipe for parallel decomposition (3 workers)
Overview
Design is choosing what to do and what to leave out; every decision--visual, structural, and interactive--should be deliberate. Generic defaults are the enemy, and intentionality drives clarity, meaning, and differentiation across UI, APIs, and system architectures.
How This Skill Works
Before implementing, commit to a direction: define Purpose, Tone, Constraints, and Differentiation. Then apply visual design principles (typography, color, motion, composition, texture) and API/system design rules (consistency, minimal surface, clear boundaries) to ensure deliberate choices.
When to Use It
- When asked to build a UI or design a page with a clear look and feel
- When selecting typography, color, motion, and composition to signal intent
- When designing an API or system interface between components
- When architecting a system with clear boundaries and responsibilities
- When reviewing or refining a design to remove defaults and ensure every element serves a purpose
Quick Start
- Step 1: Define Purpose, Tone, Constraints, and Differentiation
- Step 2: Establish a visual language by picking typography, a cohesive color palette, and motion rules; set CSS variables
- Step 3: Run the design test by explaining the concept in one sentence and confirming every element serves the purpose
Best Practices
- Commit to a direction by defining Purpose, Tone, Constraints, and Differentiation
- Choose distinctive typography and a cohesive color palette; avoid default fonts
- Prioritize deliberate motion and composition; favor CSS-only motion and high-impact reveals
- Enforce architectural discipline: single responsibility, clear boundaries, explicit dependencies, and reversibility
- Validate designs with a concise test: can you explain the concept in one sentence and confirm every element serves the purpose
Example Use Cases
- A marketing dashboard UI with bold color accents and staged reveals
- A design system with component boundaries and explicit dependencies
- An API surface with consistent verbs and minimal surface
- An asymmetrical page layout featuring generous negative space
- A design critique that documents what is left out and why
