design-craft

name

design-craft

description

Use this skill when asked to design, build, or improve web interfaces, app screens, landing pages, dashboards, or any UI where visual excellence and brand distinction matter. Also use when the user mentions "make it beautiful," "premium design," "world-class UI," "design system," "brand identity," "visual hierarchy," "make it feel right," "design that converts," "stand out from competitors," or wants design that goes beyond functional to become memorable and emotionally resonant. This skill produces the caliber of work that commands premium rates — design with soul, distinction, and craft.

This skill produces visual design at the level of the world's best independent designers — the ones who are booked solid, raising rates, and turning down work. Every interface must feel intentionally crafted, emotionally resonant, and immediately distinguishable from the sea of generic, template-driven AI output.

The core thesis: in a world where anyone can build functional products, design is the only differentiator. Functional but forgettable does not build brands. The goal is to make people feel something — to create the interface that wins not because it has the cleverest algorithm, but because it feels right, looks right, and makes people excited to use it.

The Design Mind: Think Before Touching a Single Pixel

Before writing any code, engage in genuine design thinking. Not surface-level "pick a color palette" thinking — deep, strategic design reasoning that connects business context to visual decisions.

1. Understand the Soul of the Product

Every product has an emotional core. Find it.

• What transformation does this product offer? A finance app doesn't just track money — it offers control, confidence, peace of mind. A creative tool doesn't just edit — it empowers self-expression.
• Who is the person using this, and what are they feeling? Stressed and rushing? Curious and exploring? Anxious and seeking reassurance? Design for their emotional state, not just their task.
• What should they feel after 3 seconds of looking at this? Name the exact emotion. "Clean" is not an emotion. "Quietly confident that I'm in capable hands" is.
• Where does this live in the market? Who are the 47 other options? What do they all look like? Now do something different.

2. Commit to a Point of View

Generic design comes from hedging. Exceptional design comes from conviction.

Choose a design stance — not a template, not a trend, but a specific philosophy that emerges from the product's soul:

• Engineered precision: Every element mathematically placed. Feels like Swiss watchmaking. (Think: Linear, Stripe)
• Warm authority: Approachable but clearly expert. The trusted advisor. (Think: Notion's recent evolution)
• Quiet luxury: Restrained, confident, every detail considered. Says more with less. (Think: premium fashion, Aesop)
• Creative energy: Alive, kinetic, surprising. Rewards exploration. (Think: Readymag, Pitch)
• Honest utility: No decoration for decoration's sake. Beautiful through pure function. (Think: Craigslist done intentionally, iA Writer)
• Playful intelligence: Smart but never stuffy. Unexpected moments of delight. (Think: early Mailchimp, Figma)
• Dramatic narrative: The interface tells a story. Cinematic pacing. (Think: Apple product pages)
• Raw authenticity: Imperfect on purpose. Human, textured, anti-corporate. (Think: Teenage Engineering)

Or invent something entirely new. The point is: have a stance, execute it with absolute conviction, and let every decision flow from it.

3. Design for Distinction, Not Just Function

Ask: "If someone saw this for 2 seconds and then saw it again a week later, would they recognize it?"

If not, the design lacks distinction. Distinction comes from:

• A signature element (a unique interaction, a distinctive color usage, an unusual layout approach)
• Consistency of voice (every screen feels like it was designed by the same opinionated person)
• Breaking exactly one convention (not zero, not five — one deliberate, meaningful break)

The Craft: Visual Design Principles Executed at Mastery Level

Visual Hierarchy — The Master Principle

Hierarchy answers the question every user asks in the first second: "What do I look at first?" Reference references/visual-hierarchy.md for the complete system covering the hierarchy stack, the seven tools of hierarchy (size, weight, color, space, position, typography treatment, visual complexity), emphasis techniques, and the hierarchy audit.

Every screen must have exactly one Level 1 element. If two elements compete for attention, the hierarchy has failed. Use the squint test: blur your vision — do the right elements still dominate?

Typography — The Foundation of All Great Design

Typography is where mediocre and masterful design diverge most visibly. Reference references/typography-mastery.md for the deep system.

Core non-negotiables:

• Font selection must be intentional and contextual. Never reach for defaults. A finance dashboard has different typographic needs than a creative portfolio. Select fonts that carry the right connotation — fonts speak before words do.
• Hierarchy must be felt, not just seen. The viewer's eye should flow effortlessly through a clear sequence: primary → secondary → tertiary → ambient. Use size, weight, color, and space — not just size alone.
• Typographic scale must be musical. Use a consistent ratio (1.2, 1.25, 1.333, 1.5, 1.618). Every size should feel like it belongs to the same family.
• Line height, letter spacing, and measure are not optional refinements — they are the difference between amateur and professional. Body text: 1.5-1.7 line height, 45-75 characters per line. Headings: tighter line height (1.1-1.3), potentially negative letter spacing at large sizes.
• Pair fonts with intention. Contrast in structure (geometric + humanist, serif + sans), harmony in spirit. Two fonts maximum for most interfaces. Three is a hard maximum.

Color — Psychology, Not Decoration

Reference references/color-psychology.md for the deep system.

Core principles:

• Start with meaning, not aesthetics. What does each color communicate? Blue isn't trustworthy by default — it's trustworthy because every other finance app already trained that association. Sometimes breaking that association IS the move.
• Build a system, not a palette. Define semantic roles: primary action, surface hierarchy (3-4 levels), text hierarchy (3-4 levels), state colors (success, warning, error, info), accent for moments of emphasis. Every color earns its place.
• The 60-30-10 principle is a floor, not a ceiling. 60% dominant (surfaces, backgrounds), 30% secondary (cards, sections, supporting elements), 10% accent (CTAs, key moments, the thing you want noticed). Master this before breaking it.
• Dark mode is not an inversion — it's a redesign. Different luminance relationships, different elevation models (light-on-dark uses luminance for elevation, not shadow), different emotional tone.
• Contrast is a design weapon. High contrast draws the eye. Low contrast recedes. Use this deliberately. Not everything should scream for attention.

Whitespace & Visual Rhythm — The Invisible Instruments

Whitespace is not empty space — it is the primary structural material. Reference references/whitespace-and-rhythm.md for the complete system covering active vs passive whitespace, the three functions of whitespace (grouping, emphasis, pacing), five types of visual rhythm, vertical and horizontal rhythm systems, and page flow techniques.

• Use a spacing scale ruthlessly. Base unit of 4px or 8px. Every margin, padding, and gap should be a multiple. 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. No arbitrary values.
• Generous whitespace signals premium. Cramped layouts feel cheap. Breathing room signals confidence and quality. When in doubt, add more space, not less.
• Group by proximity, separate by distance. Related elements cluster tight. Unrelated elements get real distance between them. The ratio rule: space between groups must be at least 2x the space within groups.
• Create visual rhythm. Alternate between dense informational sections and open breathing sections. Like music — tension and release. Every page needs a rhythmic pattern: regular, alternating, progressive, flowing, or broken.
• Alignment creates invisible structure. Use a grid, but make it serve the content. Baseline grid alignment for text elevates everything.

Layout & Composition — Beyond the Grid

Reference references/layout-composition.md for advanced techniques.

• Break the grid intentionally. A grid is a starting structure, not a prison. The most memorable layouts have one element that breaks the pattern — an oversized image, a pull quote that spans columns, a diagonal element.
• Create focal points. Every screen needs one clear "look here first" moment. If everything is emphasized, nothing is.
• Use asymmetry to create energy. Perfectly symmetrical layouts feel static. A slight imbalance creates visual tension and dynamism.
• Layer depth. Overlapping elements, subtle shadows, varying z-index — create a sense of spatial depth. Flat doesn't mean depthless.
• Consider the scroll narrative. How does the page unfold as someone scrolls? Each viewport should tell a chapter of the story.

Motion & Interaction — Choreography, Not Decoration

Motion is a language. Every animation should communicate something specific.

• Entrances set expectations. How elements appear teaches users what to focus on. Stagger reveals to create reading order. The most important element animates first or most prominently.
• Transitions maintain spatial context. When navigating between states, animation should show the relationship. Where did this panel come from? Where did that element go?
• Micro-interactions reward engagement. Button hover states, toggle animations, scroll-triggered reveals — these tiny moments accumulate into a feeling of craftsmanship.
• Timing is everything. 150-300ms for micro-interactions. 300-500ms for state transitions. 500-800ms for choreographed entrances. Easing curves should feel physical — use cubic-bezier, not linear.
• Restraint is a virtue. One well-orchestrated page entrance beats twenty scattered animations. Motion should guide, not distract.

Contrast & Balance — The Architecture of Visual Interest

Contrast creates interest. Balance creates stability. Reference references/contrast-and-balance.md for the complete system covering seven dimensions of contrast (value, color, scale, weight, shape, texture, space), four types of balance (symmetrical, asymmetrical, radial, mosaic), the tension principle, and layering contrast for maximum effect.

Core principles:

• Layer multiple contrast types. For any two elements that need to be distinct, apply at least two types of contrast simultaneously. Size + color, weight + space, scale + value.
• Contrast must serve hierarchy. The highest contrast points to the most important element. Contrast without purpose wastes attention.
• Balance doesn't mean symmetry. Asymmetrical balance is more dynamic and engaging. A large light element can balance a small dark one.
• Introduce deliberate tension. Perfect balance is stable but can feel inert. A slight, intentional imbalance creates energy.

Visual Texture & Atmosphere — The Subconscious Layer

The elements people can't consciously identify but absolutely feel:

• Backgrounds are environments. They set mood. A subtle gradient mesh feels different from a flat color. A grain texture feels different from clean. Choose consciously.
• Shadows tell stories. Soft, diffused shadows feel gentle and modern. Hard, offset shadows feel bold and graphic. Layered shadows (multiple levels of diffusion) feel realistic and premium.
• Border treatments. Hairline borders feel precise. No borders with shadow separation feels modern. Thick decorative borders feel intentional and bold. The choice matters.
• Subtle patterns and textures. Noise overlays, dot grids, gradient meshes, geometric patterns at low opacity — these add richness that distinguishes crafted design from flat templates.
• Photography and illustration style. If using images, their style must match the design philosophy. A playful interface with corporate stock photos creates cognitive dissonance.

Business-Aware Design

The best design serves business outcomes. Always consider:

• What is the one action this screen wants the user to take? Design everything to support that action. Visual hierarchy should funnel toward it.
• What objections or anxieties might prevent action? Address them visually — trust signals, social proof placement, reassuring microcopy.
• How does this page build or reinforce brand? Every touchpoint is a brand moment. Consistency breeds recognition. Recognition breeds trust.
• Will this stand out in a crowded market? If a competitor could swap their logo onto this design and it would still fit, the design isn't distinctive enough.

Implementation Standards

When writing code:

• Production-grade quality. Semantic HTML, accessible (ARIA labels, keyboard navigation, focus states, contrast ratios), responsive, performant.
• CSS custom properties for the design system. Every color, font size, spacing value, shadow, border radius, and transition as a variable. Build a system, not a collection of styles.
• Component architecture that reflects visual hierarchy. Components should mirror design intent — a HeroSection component should make it obvious this is a hero.
• Pixel-perfect refinement. Subpixel rendering awareness. Optical alignment over mathematical alignment when they diverge. Letter-spacing adjustments at different sizes. Line-height fine-tuning per context.
• Load the actual fonts. Use Google Fonts, Adobe Fonts, or self-hosted fonts. Never fall back to system fonts as the design choice — only as the fallback stack.
• Responsive is not an afterthought. Design decisions must work across viewports. A mobile layout is not a squished desktop layout — it's a considered redesign.

Anti-Patterns: What Mediocre Design Looks Like

Actively avoid these markers of generic, forgettable interfaces:

• Same border-radius on everything (especially 8px on everything)
• Purple-to-blue gradients on white backgrounds (the unofficial AI aesthetic)
• Cards with identical padding, identical shadows, identical border-radius in a grid
• Hero sections with oversized headline + subtext + two buttons + abstract illustration
• Grayed-out placeholder content that communicates nothing
• Sans-serif font + blue primary + gray secondary + white background (the "default SaaS" look)
• Decorative blobs and waves that serve no compositional purpose
• Feature grids of 3-4 identical cards with icon + title + description
• Using the same component library defaults everyone else uses without customization

Each of these is a signal that says "no designer was here." The goal is the opposite: every pixel should declare that a designer with a clear vision crafted this with intention.

Process Summary

1. Understand — Find the product's soul, the user's emotional state, the market context
2. Commit — Choose a bold, specific design stance and articulate it in one sentence
3. Compose — Build the visual architecture: typography system, color system, spacing system, layout
4. Craft — Execute with obsessive attention to detail: every shadow, every transition, every font-weight
5. Distinguish — Verify the result passes the "would I recognize this in 2 seconds?" test
6. Refine — Polish until every element feels intentional and nothing feels default

The result should be design that makes people stop scrolling. Design that builds brands. Design that makes people choose this product over the 47 other options that "work just fine." Design with soul.