with one click
frontend-design-process
// Mandatory design decision process for UI/UX tasks. Deep design thinking phases, anti-cliché rules, Purple Ban, Maestro Auditor, and reality check. Loaded by frontend-specialist and mobile-developer agents.
// Mandatory design decision process for UI/UX tasks. Deep design thinking phases, anti-cliché rules, Purple Ban, Maestro Auditor, and reality check. Loaded by frontend-specialist and mobile-developer agents.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | frontend-design-process |
| description | Mandatory design decision process for UI/UX tasks. Deep design thinking phases, anti-cliché rules, Purple Ban, Maestro Auditor, and reality check. Loaded by frontend-specialist and mobile-developer agents. |
| keywords | design, ui, ux, layout, hero, purple ban, cliché, bento, glassmorphism, animation, frontend |
Rule: This process is MANDATORY before any UI/UX design work. Skipping it = generic output.
Before any design work, answer:
→ These constraints determine 80% of decisions. Reference frontend-design skill for constraint shortcuts.
⛔ DO NOT start designing until you complete this internal analysis!
Answer these in your thinking:
🔍 CONTEXT ANALYSIS:
├── What is the sector? → What emotions should it evoke?
├── Who is the target audience? → Age, tech-savviness, expectations?
├── What do competitors look like? → What should I NOT do?
└── What is the soul of this site/app? → In one word?
🎨 DESIGN IDENTITY:
├── What will make this design UNFORGETTABLE?
├── What unexpected element can I use?
├── How do I avoid standard layouts?
├── 🚫 MODERN CLICHÉ CHECK: Am I using Bento Grid or Mesh Gradient? (IF YES → CHANGE IT!)
└── Will I remember this design in a year?
📐 LAYOUT HYPOTHESIS:
├── How can the Hero be DIFFERENT? (Asymmetry? Overlay? Split?)
├── Where can I break the grid?
├── Which element can be in an unexpected place?
└── Can the Navigation be unconventional?
🎭 EMOTION MAPPING (from ux-psychology.md):
├── Primary emotion: [Trust/Energy/Calm/Luxury/Fun]
├── Color implication: [Blue/Orange/Green/Black-Gold/Bright]
├── Typography character: [Serif=Classic, Sans=Modern, Display=Bold]
└── Animation mood: [Subtle=Professional, Dynamic=Energetic]
Before writing a single line of CSS, you must document your thought process following this flow:
Pick a radical path and commit:
You must present this block to the user before code.
🎨 DESIGN COMMITMENT: [RADICAL STYLE NAME]
- **Topological Choice:** (How did I betray the 'Standard Split' habit?)
- **Risk Factor:** (What did I do that might be considered 'too far'?)
- **Readability Conflict:** (Did I intentionally challenge the eye for artistic merit?)
- **Cliché Liquidation:** (Which 'Safe Harbor' elements did I explicitly kill?)
After self-questioning, generate SPECIFIC questions for user:
❌ WRONG (Generic):
- "Do you have a color preference?"
- "What kind of design would you like?"
✅ CORRECT (Based on context analysis):
- "For [Sector], [Color1] or [Color2] are typical.
Does one of these fit your vision, or should we take a different direction?"
- "Your competitors use [X layout].
To differentiate, we could try [Y alternative]. What do you think?"
- "[Target audience] usually expects [Z feature].
Should we include this or stick to a more minimal approach?"
After user answers, declare your approach. DO NOT choose "Modern SaaS" as a style.
🎨 DESIGN COMMITMENT (ANTI-SAFE HARBOR):
- Selected Radical Style: [Brutalist / Neo-Retro / Swiss Punk / Liquid Digital / Bauhaus Remix]
- Why this style? → How does it break sector clichés?
- Risk Factor: [What unconventional decision did I take? e.g., No borders, Horizontal scroll, Massive Type]
- Modern Cliché Scan: [Bento? No. Mesh Gradient? No. Glassmorphism? No.]
- Palette: [e.g., High Contrast Red/Black - NOT Cyan/Blue]
AI tendencies often drive you to hide in these "popular" elements. They are now FORBIDDEN as defaults:
🔴 "If your layout structure is predictable, you have FAILED."
Break the "Split Screen" habit. Use these alternative structures instead:
🔴 If you skip Deep Design Thinking, your output will be GENERIC.
If user's design request is vague, use your ANALYSIS to generate smart questions:
You MUST ask before proceeding if these are unspecified:
NEVER automatically use shadcn, Radix, or any component library without asking!
These are YOUR favorites from training data, NOT the user's choice:
NEVER use purple, violet, indigo or magenta as a primary/brand color unless EXPLICITLY requested.
Purple is the #1 cliché of AI design. You MUST avoid it to ensure originality.
ALWAYS ask the user first: "Which UI approach do you prefer?"
Options to offer:
🔴 If you use shadcn without asking, you have FAILED. Always ask first.
⛔ NEVER create designs that look like "every other website."
Standard templates, typical layouts, common color schemes, overused patterns = FORBIDDEN.
🧠 NO MEMORIZED PATTERNS:
📐 VISUAL STYLE VARIETY (CRITICAL):
rounded-md (6-8px) on everything. It looks generic.✨ MANDATORY ACTIVE ANIMATION & VISUAL DEPTH (REQUIRED):
scale, translate, glow-pulse).transform, opacity).will-change strategically for heavy animations.prefers-reduced-motion support is MANDATORY.✅ EVERY design must achieve this trinity:
🔴 If it looks generic, you have FAILED. No exceptions. No memorized patterns. Think original. Break the "round everything" habit!
⛔ DO NOT start coding without declaring your design choices.
Think through these decisions (don't copy from templates):
Format to use in your thought process:
🎨 DESIGN COMMITMENT:
- Geometry: [e.g., Sharp edges for premium feel]
- Typography: [e.g., Serif Headers + Sans Body]
- Ref: Scale from
typography-system.md- Palette: [e.g., Teal + Gold - Purple Ban ✅]
- Ref: Emotion mapping from
ux-psychology.md- Effects/Motion: [e.g., Subtle shadow + ease-out]
- Ref: Principle from
visual-effects.md,animation-guide.md- Layout uniqueness: [e.g., Asymmetric 70/30 split, NOT centered hero]
Rules:
color/typography/effects skill files. Don't guess.Apply decision trees from frontend-design skill for logic flow.
You must perform this "Self-Audit" before confirming task completion.
Verify your output against these Automatic Rejection Triggers. If ANY are true, you must delete your code and start over.
| 🚨 Rejection Trigger | Description (Why it fails) | Corrective Action |
|---|---|---|
| The "Safe Split" | Using grid-cols-2 or 50/50, 60/40, 70/30 layouts. | ACTION: Switch to 90/10, 100% Stacked, or Overlapping. |
| The "Glass Trap" | Using backdrop-blur without raw, solid borders. | ACTION: Remove blur. Use solid colors and raw borders (1px/2px). |
| The "Glow Trap" | Using soft gradients to make things "pop". | ACTION: Use high-contrast solid colors or grain textures. |
| The "Bento Trap" | Organizing content in safe, rounded grid boxes. | ACTION: Fragment the grid. Break alignment intentionally. |
| The "Blue Trap" | Using any shade of default blue/teal as primary. | ACTION: Switch to Acid Green, Signal Orange, or Deep Red. |
🔴 MAESTRO RULE: "If I can find this layout in a Tailwind UI template, I have failed."
Build layer by layer:
⚠️ WARNING: Do NOT deceive yourself by ticking checkboxes while missing the SPIRIT of the rules!
Verify HONESTLY before delivering:
🔍 The "Template Test" (BRUTAL HONESTY):
| Question | FAIL Answer | PASS Answer |
|---|---|---|
| "Could this be a Vercel/Stripe template?" | "Well, it's clean..." | "No way, this is unique to THIS brand." |
| "Would I scroll past this on Dribbble?" | "It's professional..." | "I'd stop and think 'how did they do that?'" |
| "Can I describe it without saying 'clean' or 'minimal'?" | "It's... clean corporate." | "It's brutalist with aurora accents and staggered reveals." |
🚫 SELF-DECEPTION PATTERNS TO AVOID:
opacity: 0.8 (boring)✅ HONEST REALITY CHECK:
🔴 If you find yourself DEFENDING your checklist compliance while the design looks generic, you have FAILED. The checklist serves the goal. The goal is NOT to pass the checklist. The goal is to make something MEMORABLE.