ihj04982 Frontend Design
Create distinctive, production-grade interfaces. This skill combines creative implementation, anti-generic methodology, and domain-driven interface design.
Phase 0: Context Discovery (MANDATORY)
Before any design, gather deep context:
- Who is this human? Not "users" — the actual person. Where are they? What's on their mind?
- What must they accomplish? The verb. Grade submissions. Find the broken deployment. Approve the payment.
- What should this feel like? "Clean and modern" means nothing. Warm like a notebook? Cold like a terminal? Dense like a trading floor?
- Constraints: Technical requirements, framework, performance, accessibility.
- Reference / Anti-Reference: What to emulate, what to explicitly avoid.
Use AskUserQuestion if the prompt is vague. Do not proceed with assumptions.
Phase 1: Identify the Generic Baseline
Verbalize the most predictable design for this request. Common "AI-slop" markers:
- Inter/Roboto/System fonts
- Rounded blue/purple buttons
- Standard F-pattern layouts
- White backgrounds with gradient accents
- Generic hero sections
You are forbidden from choosing this baseline.
Phase 2: Explore the Product Domain
For Dashboards / Apps / Tools
Produce all four before proposing any direction:
- Domain: 5+ concepts, metaphors, vocabulary from the product's world
- Color World: What colors exist naturally in this domain? If this product were a physical space, what would you see?
- Signature: One element (visual, structural, or interaction) that could only exist for THIS product
- Defaults to Reject: 3 obvious visual AND structural choices for this type. You can't avoid patterns you haven't named.
For Landing Pages / Marketing
Apply the AIDA Framework:
| Stage | Goal | Design Application |
|---|---|---|
| Attention | Stop the scroll | Bold typography, unexpected imagery, striking contrast |
| Interest | Build curiosity | Progressive reveal, visual storytelling, unique value |
| Desire | Emotional connection | Social proof, benefits visualization, micro-interactions |
| Action | Drive conversion | High-contrast CTAs, reduced friction |
Phase 3: Commit to a Bold Direction
Generate three aesthetic directions with Typicality Scores (0 = unique, 1 = generic):
- Direction A (T ≈ 0.7): Modern/Clean but safe
- Direction B (T ≈ 0.4): Distinctive/Characterful
- Direction C (T < 0.2): Experimental/Bold
Select the lowest T-Score that still meets functional requirements and quality guardrails.
Quality Guardrails (NON-NEGOTIABLE)
| Guardrail | Description |
|---|---|
| Visual Hierarchy | Clear priority ordering — eye knows where to go first, second, third |
| Contrast & Legibility | Text readable against background (WCAG AA minimum) |
| Internal Consistency | Follows its OWN logic — a coherent system, not random choices |
| Functional Clarity | Interactive elements recognizable as such; clear affordances |
Design Thinking
Typography
Choose fonts that are distinctive and context-appropriate. Avoid Inter, Roboto, Arial, system fonts, Space Grotesk as defaults. Pair a characterful display font with a refined body font. Variable fonts and unusual weights encouraged.
Color & Theme
Commit to a cohesive palette. CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Gray builds structure; color communicates status, action, emphasis.
Motion
Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. If a standard grid is P=0.9, consider P=0.1 layouts.
Backgrounds & Visual Details
Create atmosphere. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays. Match the aesthetic vision.
Craft Foundations (Interface-Specific)
Subtle Layering
Surfaces barely different but distinguishable. Study Vercel, Supabase, Linear. Elevation changes so subtle you almost can't see them — but you feel the hierarchy. Borders light but not invisible.
Infinite Expression
Every pattern has infinite expressions. A metric display could be a hero number, sparkline, gauge, progress bar, comparison delta, or something new. Before building, ask: What's the ONE thing users do most here?
Color Lives Somewhere
Every product exists in a world with colors. Walk into the physical version of this space — what would you see? Your palette should feel like it came FROM somewhere.
Design Principles
- Spacing: Pick a base unit, stick to multiples
- Depth: Choose ONE approach (borders-only, subtle shadows, or layered shadows) and commit
- Border Radius: Sharper = technical, rounder = friendly. Consistent scale
- States: Every interactive element needs default, hover, active, focus, disabled. Data needs loading, empty, error
- Animation: Fast micro-interactions (~150ms), smooth easing. No bouncy effects in tools
Anti-Patterns (FAILURES)
- Accidental Design: "Different" without intentionality. Unable to articulate WHY.
- Frankenstein Style: Mixing incompatible aesthetics without synthesis.
- Default Convergence: If another AI would produce substantially the same output, you have failed.
- Harsh borders, dramatic surface jumps, inconsistent spacing, mixed depth strategies
- Emojis as icons (use SVG: Heroicons, Lucide, Simple Icons)
- Hover states that cause layout shift
Pre-Delivery Checks
The Swap Test
If you swapped the typeface for your usual one, would anyone notice? The places where swapping wouldn't matter are where you defaulted.
The Squint Test
Blur your eyes. Can you still perceive hierarchy? Nothing should jump out harshly.
The Signature Test
Point to five specific elements where your signature appears. Not "the overall feel" — actual components.
Visual Quality
- No emojis as icons
- All icons from consistent set
- Hover states don't cause layout shift
- Light/dark mode text has sufficient contrast (4.5:1)
- Responsive at 375px, 768px, 1024px, 1440px
Interaction
- All clickable elements have
cursor-pointer - Transitions smooth (150–300ms)
- Focus states visible for keyboard navigation
-
prefers-reduced-motionrespected