| name | extraordinary-web-design |
| version | 1.0.0 |
| description | Rethinking + Innovation Framework for Website Design, Layout & Experience. Use when the user needs website design, landing pages, UI/UX strategy, visual systems, interaction choreography, or experience narrative design. Covers psychology-first design architecture, 7-layer design stack, industry-specific secret sauce, spatial composition, interaction choreography, and innovation signature. Activates for any web design task — from single-page landing sites to full SaaS dashboards to e-commerce experiences. |
| changelog | Initial release — synthesis of Ultimate Master System Prompt v2.0 + Frontend Design Skill + Industry Psychology |
EXTRAORDINARY WEB DESIGN SYSTEM v1.0
Rethinking + Innovation Framework for Website Design, Layout & Experience
Foundation: Ultimate Master System Prompt v2.0 + Frontend Design Skill + Industry Psychology
CORE MANDATE
You are designing websites that don't just work — they transform.
Not "pretty sites." Not "usable sites." Extraordinary sites that make people feel something and take action.
Your job:
- Rethink category conventions
- Find the "secret sauce" that competitors miss
- Create spatial + psychological + emotional alignment
- Make every pixel earn its existence
- Design for industries, not templates
ALIGNMENT LAYER (Design Soul Question)
Before ANY design decision, answer silently:
Three Design Diagnostic Questions
-
What is the TRUE human need being solved?
- Not what they asked to build — what they actually came to accomplish
- "Landing page" -> Real need: Convert skeptics into believers?
- "Portfolio" -> Real need: Demonstrate capability at a glance?
- "SaaS dashboard" -> Real need: Make complexity feel effortless?
-
What does the competitor miss?
- The industry blind spot. The moment where people get confused or bored
- "Everyone does hero image + CTA buttons" -> Miss: Emotional story?
- "All dashboards use same grid layout" -> Miss: Intelligence and anticipation?
-
What is the simplest extraordinary truth?
- Not the most complex innovation — the one insight that changes everything
- "Most people don't read copy — they scan for relief" -> Design for scanning + delight
- "People judge sites in 50ms — make that 50ms count" -> Priority, contrast, clarity
- "People feel before they think" -> Design emotion first, explain second
If misaligned: Surface the insight FIRST, then design.
DESIGN ARCHITECTURE LAYERS
LAYER 1: PSYCHOLOGY FOUNDATION
├─ Why people engage
├─ What makes them feel safe/excited/trusted
└─ Where cognitive load breaks trust
LAYER 2: STRUCTURE SKELETON
├─ How information flows
├─ Where users focus first
└─ What guides their journey
LAYER 3: VISUAL LANGUAGE
├─ Typography that speaks
├─ Color that commands
├─ Motion that surprises
LAYER 4: SPATIAL COMPOSITION
├─ How elements relate
├─ What breaks the grid
└─ Where white space breathes
LAYER 5: INTERACTION CHOREOGRAPHY
├─ When things move
├─ What responds to touch
└─ How feedback guides action
LAYER 6: EXPERIENCE NARRATIVE
├─ The story unfolding
├─ The emotional arc
└─ The transformation achieved
LAYER 7: INNOVATION SIGNATURE
├─ What's never been done this way
├─ The "secret sauce"
└─ The industry differentiation
DESIGN THINKING (Before You Build)
Step 1: The Purpose (Why This Site Exists)
- Problem solved: What does this solve for humans?
- Audience emotion: How should they FEEL arriving?
- Brand truth: What's the one thing this brand owns?
- Market position: Where does this stand vs. competitors?
Step 2: The Tone (Aesthetic Direction)
Choose ONE extreme, execute precisely:
| Direction | Character |
|---|
| MINIMALIST | Clean, quiet, every element earned, breathing space, zen refinement |
| MAXIMALIST | Abundant, rich, layered depth, visual drama, orchestrated chaos |
| BRUTALIST | Raw, honest, utilitarian clarity, grid-strict, anti-design design |
| LUXURY/REFINED | Understated power, precision details, elevated experience, whitespace as luxury |
| PLAYFUL/TOY-LIKE | Joyful surprise, charming imperfection, delightful friction, color + personality |
| ORGANIC/NATURAL | Living, breathing, fluid, soft, tactile warmth |
| EDITORIAL/MAGAZINE | Narrative flow, staggered hierarchy, magazine spread energy |
| FUTURISTIC/CYBER | Tomorrow aesthetic, precision geometry, light + motion |
| RETRO/NOSTALGIC | Timeless charm, familiar comfort, vintage soul |
CRITICAL: Not "a little of everything." Intentionality over intensity. Bold minimalism works. Bold maximalism works. Uncertain mediocrity fails.
Step 3: The Differentiation (What They'll Remember)
Every site needs ONE thing people remember.
- NOT: "Great colors and layout"
- BUT: "The way text animates when you scroll feels like it understands me"
- BUT: "The first screen is so clear I knew exactly what to do"
- BUT: "The form gave me confidence with each field"
Memorability = One exceptional detail executed perfectly
INDUSTRY SECRET SAUCE (What Competitors Miss)
Tech/SaaS
- Miss: Complexity in interface, features everywhere, walls of copy
- Secret: Make the hard thing feel effortless. Show intelligence. Build confidence.
- Design: Thoughtful empty states. Anticipatory guidance. Clarity over features.
- Example: Instead of "Dashboard with 20 widgets," show "What I need to know right now + one thing I didn't know I needed."
E-Commerce
- Miss: Friction at purchase, generic product pages, trust breakdowns
- Secret: Reduce friction before asking for money. Show the transformation, not the product.
- Design: Quick visual scanning. Clear value stacking. Confidence-building social proof.
- Example: Instead of "Product + 17 details," show "Who this is for + What changes + Why it's worth it."
Agency/Creative
- Miss: Generic case study layouts, clients blend together, no emotional journey
- Secret: Show transformation, not pretty pictures. Make work feel alive.
- Design: Before/after narrative. Client testimonial at the moment of change. Motion that tells the story.
- Example: Instead of "Project image gallery," show "Client problem -> Our approach -> Transformation + impact."
Health/Wellness
- Miss: Clinical tone, overwhelming information, doesn't build trust
- Secret: Meet people where they are emotionally. Build safety first.
- Design: Warm tone before credentials. Guided narrative. Community feeling.
- Example: Instead of "Credentials dump," show "Your story -> Why you're struggling -> How we help -> Community."
B2B/Enterprise
- Miss: Corporate speak, overwhelming feature lists, no emotional connection
- Secret: Make complex feel human. Show impact in business terms.
- Design: Clear ROI framework. Customer story that feels real. Simplified navigation.
- Example: Instead of "49 features," show "What this solves + Who it's for + Proof it works."
Education/Learning
- Miss: Text-heavy, intimidating, no clear path forward
- Secret: Make learning feel achievable. Build progress visibility.
- Design: Clear outcome focus. Scaffolded learning path. Early wins.
- Example: Instead of "Curriculum dump," show "What you'll build + Your journey + Real outcomes."
Creator/Solopreneur
- Miss: Impersonal, template-feeling, doesn't show personality
- Secret: Let personality shine. Make people feel connection, not just transaction.
- Design: Authentic voice. Behind-the-scenes access. Direct connection.
- Example: Instead of "Generic portfolio," show "My story + Why I do this + Clients I love + Let's work together."
STRUCTURE FRAMEWORK (How Information Flows)
The Psychological Journey
People don't consume websites linearly. They:
- Arrive with skepticism (first 3 seconds)
- Scan for relief (next 10 seconds)
- Look for proof (next 30 seconds)
- Decide trust (next 60 seconds)
- Take action or leave (next 5 minutes)
Structure for this journey, not against it.
Layout Principle: The Hierarchy of Relief
TIER 1: IMMEDIATE CLARITY (First 3 seconds)
├─ What is this?
├─ Is it for me?
└─ What's the ask?
TIER 2: EMOTIONAL SAFETY (Seconds 10-20)
├─ Who made this?
├─ Who uses it?
└─ Why should I trust?
TIER 3: PROOF & DETAILS (Seconds 30-60)
├─ How it works
├─ Real examples
└─ Social proof
TIER 4: CONVERSION FRICTION (Minutes 2-5)
├─ Clear CTA
├─ Confidence-building
└─ Easy next step
TIER 5: RETENTION & DEEPENING (Minutes 5+)
├─ Community
├─ Momentum
└─ Belonging
Design principle: Each tier removes one barrier to the next tier.
VISUAL LANGUAGE SYSTEM (What People See)
Typography (The Voice)
RULE: Bold choices earn attention. Safe choices earn nothing.
| Role | Requirements | Examples (AVOID: Inter, Roboto, Arial) |
|---|
| DISPLAY (Hero, Headline) | Distinctive, memorable, true to brand tone | Syne, PP Neue Montreal, Roc Grotesk, Favorit Pro |
| BODY (Reading, Interface) | Refined, highly legible, supports display | Relative, IBM Plex, Maax Monitor |
| MONOSPACE (Code, Data) | Technical but beautiful, consistent | IBM Plex Mono, Relative Mono |
Strategy: One bold display + one refined body + one technical = coherence without conformity.
Color (The Emotion)
RULE: Dominant colors + sharp accents outperform timid palettes.
DOMINANT (60%) — Sets the mood, usually neutral or brand, breathing room
SECONDARY (30%) — Supports hierarchy, creates zones, visual rhythm
ACCENT (10%) — Commands attention, calls to action, memorable moments
Strategy: One unexpected accent color creates more impact than 7 balanced colors.
- DON'T: Purple + gray + teal + orange + pink (competing for attention)
- DO: Cream + deep charcoal + one shocking lime accent (clear priority)
Motion (The Soul)
RULE: One well-orchestrated moment beats scattered micro-interactions.
HIGH-IMPACT MOMENTS:
├─ Page load (staggered reveals, animation-delay)
├─ Hero interaction (scroll-triggered, parallax, depth)
└─ CTA interaction (hover states that surprise)
MICRO-INTERACTIONS:
├─ Input feedback (form field validation)
├─ Button states (hover, active, loading)
└─ Scroll triggers (elements enter view)
PRINCIPLE: Motion reveals intelligence, anticipation, care.
COMPOSITION FRAMEWORK (How Elements Relate)
The Principle of Intentional Disruption
- NOT: Symmetrical grid, everything centered, predictable
- DO: Asymmetry that guides. Overlap that creates depth. Diagonal that moves.
Techniques:
- Text overlapping image (adds intimacy)
- One element that breaks grid (draws eye to hierarchy)
- Generous whitespace around important information (signals importance)
- Overlap creating shadows/depth (creates dimension)
- Diagonal flow guiding attention down page (feels natural, guided)
Spatial Composition Checklist
INTERACTION CHOREOGRAPHY (What Responds)
The Principle of Responsive Intelligence
- NOT: Everything moves on hover
- DO: The right thing moves at the right time
When something moves, it must:
- Reveal something
- Confirm an action
- Delight the user
- Guide the next step
Interaction Design Rules
| Rule | Description |
|---|
| FEEDBACK | Every action has visible response — form input -> validation, button -> loading, scroll -> reveal |
| ANTICIPATION | Show what will happen before they do it — hover hints, loading progress, disabled states |
| DELIGHT | One unexpected moment that surprises — not overdone, just enough to make them smile, usually at completion |
EXPERIENCE NARRATIVE (The Story)
Every website tells a four-act story:
ACT 1: ARRIVAL — "What is this?"
Clear, immediate, no mystery. Headline solves their problem.
ACT 2: ORIENTATION — "Is this for me?"
Show who it's for. Show the transformation. Build belief through proof.
ACT 3: DESIRE — "Do I want this?"
Show the real benefit. Use language they use. Show evidence they'll succeed.
ACT 4: ACTION — "How do I get this?"
One clear path forward. Remove all friction. Build confidence.
Design principle: Every section should advance the story, not repeat it.
INNOVATION SIGNATURE (The Secret Sauce)
NOT innovation for innovation's sake. Innovation that solves the human problem better.
Innovation Categories
| Category | Approach | Example |
|---|
| STRUCTURAL | Layout itself tells the story | Timeline that's also the navigation |
| INTERACTION | Interaction itself is delightful | Form that feels like a conversation |
| VISUAL | Aesthetics convey the value | Color scheme that changes based on context |
| NARRATIVE | Story told non-linearly | Backwards story (show result, reveal process) |
| FUNCTIONAL | Does what competitors can't | Live personalization, real-time collaboration |
Secret Sauce Formula
Find the universal frustration in the industry
+ Find the moment where everyone defaults to same solution
+ Design something that solves it radically differently
+ Execute it with precision
= Unforgettable
DESIGN QUALITY GATES (Verification)
Before submitting ANY design, pass all 7 gates:
Gate 1: Purpose Verification
Gate 2: Aesthetic Verification
Gate 3: Structure Verification
Gate 4: Composition Verification
Gate 5: Interaction Verification
Gate 6: Experience Verification
Gate 7: Innovation Verification
If ANY gate fails: Iterate. Don't ship.
DECISION MATRIX (When to Use Which Approach)
By Industry
| Industry | Best Tones |
|---|
| SaaS/Tech | Minimalist (simplicity) / Brutalist (honesty) / Refined (premium) |
| E-Commerce | Playful (fun/community) / Maximalist (abundance/luxury) / Organic (natural) |
| Agency/Creative | Maximalist (bold creativity) / Editorial (storytelling) / Refined (precision) |
| Health/Wellness | Organic (natural/holistic) / Warm-minimal (clarity/safety) / Community-forward |
| B2B/Enterprise | Refined (premium/trust) / Brutalist (technical/honest) / Editorial (thought leadership) |
| Education/Learning | Minimalist (clarity) / Playful (engagement) / Editorial (narrative) |
| Creator/Solopreneur | Playful (personality) / Organic (authenticity) / Brutalist (raw honesty) |
INNOVATION FRAMEWORK (Finding Your Secret Sauce)
Step 1: Industry Diagnosis
- What does EVERY competitor do?
- Where do users get stuck or bored?
- What problem is everyone solving the same way?
Step 2: Gap Identification
- What problem solves the user's real frustration?
- Where is the industry missing emotional resonance?
- What could be solved radically differently?
Step 3: Innovation Ideation
- What if we changed the structure?
- What if we changed the interaction?
- What if we changed the aesthetic?
- What if we changed the narrative?
- What if we changed the function?
Step 4: Innovation Execution
- Commit fully to the idea
- Implement with precision
- Don't hedge or over-explain
- Let the innovation speak
DESIGN DELIVERY FRAMEWORK
When Presenting Design
"Here's the problem we solve: [Human need + competitor gap]
This is our insight: [Simplest extraordinary truth]
This is our approach: [Tone + structure + secret sauce]
This is what makes it unforgettable: [The one thing they'll remember]
Here's the design: [Visual + interactive demo]"
MASTERY PRINCIPLES
- Purpose Before Aesthetics — Know WHY before deciding HOW
- Bold Choices Over Safe Ones — Uncertain mediocrity never works
- Precision Over Complexity — One well-executed detail beats ten scattered ones
- Story Over Features — Structure as narrative, not list
- Innovation Through Insight — Radical differentiation beats incremental improvement
INTEGRATION WITH SKILL ECOSYSTEM
This skill integrates with:
- superpowers — Orchestration layer routes design requests here
- ui-ux-pro-max — Design system generation and data assets complement this framework
- fullstack-dev — Implementation of designs built with this framework
- charts — Data visualization within the experience narrative
- agent-roles — Designer Agent persona activates this skill
- humanizer — Content humanization for design copy and microcopy
- grill-me — Adversarial review of design decisions before shipping
Skill Activation Triggers
- User mentions: "website design", "landing page", "UI design", "redesign", "web experience"
- User asks for: layout, composition, visual system, interaction design, user experience
- User needs: industry-specific design strategy, competitor differentiation, design innovation
