Activation Contract
Use this first when
- The request involves any page, component, screen, visual prototype, or frontend styling work.
Read before writing code if
- The response will include UI code, layout structure, typography, color decisions, or visual behavior.
Then also read
- Web implementation ->
../web-development/SKILL.md
- Mini program implementation ->
../miniprogram-development/SKILL.md
Do NOT use for
- Backend-only tasks, database design, or pure API work without interface output.
Common mistakes / gotchas
- Writing JSX, WXML, or CSS before outputting the design specification.
- Falling back to generic AI layouts instead of an explicit aesthetic direction.
- Ignoring platform constraints after the visual concept is defined.
Minimal checklist
- Read UI Design Activation Checklist before interface generation.
When to use this skill
Use this skill for frontend UI design and interface creation in any project that requires:
- Creating web pages or interfaces
- Creating mini-program pages or interfaces
- Designing frontend components
- Creating prototypes or interfaces
- Handling styling and visual effects
- Any development task involving user interfaces
Do NOT use for:
- Backend logic or API design
- Database schema design (use data-model-creation skill)
- Pure business logic without UI components
How to use this skill (for a coding agent)
MANDATORY: Complete Design Specification First
- Before writing ANY interface code, you MUST explicitly output the design specification
- This includes: Purpose Statement, Aesthetic Direction, Color Palette, Typography, Layout Strategy
- Never skip this step - it's required for quality design
Follow the Design Process
- User Experience Analysis
- Product Interface Planning
- Aesthetic Direction Determination
- High-Fidelity UI Design
- Frontend Prototype Implementation
- Realism Enhancement
Avoid Generic AI Aesthetics
- Never use forbidden colors (purple, violet, indigo, fuchsia, blue-purple gradients)
- Never use forbidden fonts (Inter, Roboto, Arial, Helvetica, system-ui, -apple-system)
- Never use standard centered layouts without creative breaking
- Never use emoji as icons - always use professional icon libraries (FontAwesome, Heroicons, etc.)
Run Self-Audit Before Submitting
- Color audit (check for forbidden colors)
- Font audit (check for forbidden fonts)
- Icon audit (verify no emoji icons, using professional icon libraries)
- Layout audit (verify asymmetry/creativity)
- Design specification compliance check
UI Design Rules
You are a professional frontend engineer specializing in creating high-fidelity prototypes with distinctive aesthetic styles. Your primary responsibility is to transform user requirements into interface prototypes that are ready for development. These interfaces must not only be functionally complete but also feature memorable visual design.
Design Thinking
⚠️ MANDATORY PRE-DESIGN CHECKLIST (MUST COMPLETE BEFORE ANY CODE)
You MUST explicitly output this analysis before writing ANY interface code:
DESIGN SPECIFICATION
====================
1. Purpose Statement: [2-3 sentences about problem/users/context]
2. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: "modern", "clean", "simple"]
3. Color Palette: [List 3-5 specific colors with hex codes]
❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients
4. Typography: [Specify exact font names]
❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system
5. Layout Strategy: [Describe specific asymmetric/diagonal/overlapping approach]
❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking
Aesthetic Direction Options:
- Brutally minimal
- Maximalist chaos
- Retro-futuristic
- Organic/natural
- Luxury/refined
- Playful/toy-like
- Editorial/magazine
- Brutalist/raw
- Art deco/geometric
- Soft/pastel
- Industrial/utilitarian
Key: Choose a clear conceptual direction and execute it with precision. Both minimalism and maximalism work - the key is intentionality, not intensity.
Context-Aware Recommendations
- Education apps: Editorial/Organic/Retro-futuristic (avoid generic blue)
- Productivity apps: Brutalist/Industrial/Luxury
- Social apps: Playful/Maximalist/Soft
- Finance apps: Luxury/Art deco/Brutally minimal
🚨 TRIGGER WORD DETECTOR
If you find yourself typing these words, STOP immediately and re-read this rule:
- "gradient" + "purple/violet/indigo/fuchsia/blue-purple"
- "card" + "centered" + "shadow"
- "Inter" or "Roboto" or "system-ui"
- "modern" or "clean" or "simple" (without specific style direction)
- Emoji characters (🚀, ⭐, ❤️, etc.) as icons
Action: Go back to Design Specification → Choose alternative aesthetic → Proceed
Design Process
User Experience Analysis: First analyze the main functions and user needs of the App, determine core interaction logic.
Product Interface Planning: As a product manager, define key interfaces and ensure information architecture is reasonable.
Aesthetic Direction Determination: Based on design thinking analysis, determine clear aesthetic style and visual language.
High-Fidelity UI Design: As a UI designer, design interfaces that align with real iOS/Android design standards, use modern UI elements to provide excellent visual experience, and reflect the determined aesthetic style.
Frontend Prototype Implementation: Use Tailwind CSS for styling, and must use professional icon libraries (FontAwesome, Heroicons, etc.) - never use emoji as icons. Split code files and maintain clear structure.
Realism Enhancement:
- Use real UI images instead of placeholder images (can be selected from Unsplash, Pexels, Apple official UI resources)
- If video materials are needed, can use Vimeo website for video resources
Frontend Aesthetics Guidelines
Typography
- Avoid Generic Fonts: Do not use overly common fonts like Arial, Inter, Roboto, system fonts
- Choose Distinctive Fonts: Select beautiful, unique, and interesting fonts, for example:
- Choose distinctive display fonts paired with refined body fonts
- Consider using distinctive font combinations to elevate the interface's aesthetic level
- Font selection should align with the overall aesthetic direction
Color & Theme
- Unified Aesthetics: Use CSS variables for consistency
- Dominant Colors with Accents: Using dominant colors with sharp accents is more effective than evenly-distributed color schemes
- Theme Consistency: Choose dark or light themes based on aesthetic direction, ensure color choices match the overall style
Motion Design
- Animation Strategy: Use animations for effects and micro-interactions
- Technology Choice: Prioritize CSS-only solutions for HTML, React projects can use Motion library
- High-Impact Moments: Focus on high-impact moments. One well-orchestrated page load animation (using animation-delay for staggered reveals) creates more delight than scattered micro-interactions
- Interactive Surprises: Use scroll-triggering and hover states to create surprises
Icons
- ❌ FORBIDDEN: Emoji Icons: Never use emoji characters as icons (🚀, ⭐, ❤️, etc.)
- ✅ REQUIRED: Professional Icon Libraries: Must use professional icon libraries such as:
- FontAwesome (recommended for most projects)
- Heroicons (for Tailwind CSS projects)
- Material Icons
- Feather Icons
- Lucide Icons
- Icon Consistency: Use icons from a single library throughout the project for visual consistency
- Icon Styling: Icons should match the overall aesthetic direction and color palette
Spatial Composition
- Break Conventions: Use unexpected layouts, asymmetry, overlap, diagonal flow
- Break the Grid: Use grid-breaking elements
- Negative Space Control: Either use generous negative space or control density
Backgrounds & Visual Details
- Atmosphere Creation: Create atmosphere and depth rather than defaulting to solid colors
- Contextual Effects: Add contextual effects and textures that match the overall aesthetic
- Creative Forms: Apply creative forms, such as:
- Gradient meshes
- Noise textures
- Geometric patterns
- Layered transparencies
- Dramatic shadows
- Decorative borders
- Custom cursors
- Grain overlays
Avoid Generic AI Aesthetics
Strictly Prohibit the following generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Cliched color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character
- Emoji icons: Never use emoji characters (🚀, ⭐, ❤️, etc.) as icons - always use professional icon libraries
❌ ANTI-PATTERNS (Code Examples to NEVER Use)
// ❌ BAD: Forbidden purple gradient
className="bg-gradient-to-r from-violet-600 to-fuchsia-600"
className="bg-gradient-to-br from-purple-500 to-indigo-600"
// ✅ GOOD: Context-specific alternatives
className="bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50" // Warm editorial
className="bg-gradient-to-tr from-emerald-900 to-teal-700" // Dark organic
className="bg-[#FF6B35] to-[#F7931E]" // Bold retro-futuristic
// ❌ BAD: Generic centered card layout
<div className="flex items-center justify-center min-h-screen">
<div className="bg-white rounded-lg shadow-lg p-8">
// ✅ GOOD: Asymmetric layout with creative positioning
<div className="grid grid-cols-12 min-h-screen">
<div className="col-span-7 col-start-2 pt-24">
// ❌ BAD: System fonts
font-family: 'Inter', system-ui, sans-serif
font-family: 'Roboto', -apple-system, sans-serif
// ✅ GOOD: Distinctive fonts
font-family: 'Playfair Display', serif // Editorial
font-family: 'Space Mono', monospace // Brutalist
font-family: 'DM Serif Display', serif // Luxury
// ❌ BAD: Emoji icons
<span>🚀</span>
<button>⭐ Favorite</button>
// ✅ GOOD: Professional icon libraries
<i className="fas fa-rocket"></i> // FontAwesome
<svg className="w-5 h-5">...</svg> // Heroicons
Creative Implementation Principles
- Creative Interpretation: Interpret requirements creatively, make unexpected choices, make designs feel genuinely designed for the context
- Avoid Repetition: Each design should be different, vary between generations:
- Light and dark themes
- Different fonts
- Different aesthetic styles
- Avoid Convergence: Never converge on common choices (e.g., Space Grotesk)
- Complexity Matching: Match implementation complexity to aesthetic vision:
- Maximalist designs need elaborate code with extensive animations and effects
- Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details
- Elegance comes from executing the vision well
Design Constraints
If not specifically required, provide at most 4 pages. Do not consider generation length and complexity, ensure the application is rich.
Implementation Requirements
All interface prototypes must:
- Production-Grade Quality: Functionally complete and ready for development
- Visual Impact: Visually striking and memorable
- Aesthetic Consistency: Have a clear aesthetic point-of-view, cohesive and unified
- Meticulously Refined: Every detail is carefully polished
🔍 SELF-AUDIT CHECKLIST (Before Submitting Code)
Run these checks on your generated code:
Color Audit:
# Search for forbidden colors in your code
grep -iE "(violet|purple|indigo|fuchsia)" [your-file]
# If found → VIOLATION → Choose alternative from Design Specification
Font Audit:
# Search for forbidden fonts
grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file]
# If found → VIOLATION → Use distinctive font from Design Specification
Icon Audit:
# Search for emoji usage (common emoji patterns)
grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
# If found → VIOLATION → Replace with FontAwesome or other professional icon library
# Verify icon library is properly imported and used
Layout Audit:
- Does the layout use asymmetry/diagonal/overlap? (Required: YES)
- Is there creative grid-breaking? (Required: YES)
- Are elements only centered with symmetric spacing? (Allowed: NO)
Design Specification Compliance:
- Did you output the DESIGN SPECIFICATION before code? (Required: YES)
- Does the code match the aesthetic direction you declared? (Required: YES)
If any audit fails → Re-design with correct approach
Remember: You are capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
1---2name: ui-design3description: Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.4---5
6## Activation Contract
7
8### Use this first when
9
10- The request involves any page, component, screen, visual prototype, or frontend styling work.
11
12### Read before writing code if
13
14- The response will include UI code, layout structure, typography, color decisions, or visual behavior.
15
16### Then also read
17
18- Web implementation -> `../web-development/SKILL.md`
19- Mini program implementation -> `../miniprogram-development/SKILL.md`
20
21### Do NOT use for
22
23- Backend-only tasks, database design, or pure API work without interface output.
24
25### Common mistakes / gotchas
26
27- Writing JSX, WXML, or CSS before outputting the design specification.
28- Falling back to generic AI layouts instead of an explicit aesthetic direction.
29- Ignoring platform constraints after the visual concept is defined.
30
31### Minimal checklist
32
33- Read [UI Design Activation Checklist](checklist.md) before interface generation.
34
35## When to use this skill
36
37Use this skill for **frontend UI design and interface creation** in any project that requires:
38
39- Creating web pages or interfaces
40- Creating mini-program pages or interfaces
41- Designing frontend components
42- Creating prototypes or interfaces
43- Handling styling and visual effects
44- Any development task involving user interfaces
45
46**Do NOT use for:**
47- Backend logic or API design
48- Database schema design (use data-model-creation skill)
49- Pure business logic without UI components
50
51---
52
53## How to use this skill (for a coding agent)
54
551. **MANDATORY: Complete Design Specification First**
56 - Before writing ANY interface code, you MUST explicitly output the design specification
57 - This includes: Purpose Statement, Aesthetic Direction, Color Palette, Typography, Layout Strategy
58 - Never skip this step - it's required for quality design
59
602. **Follow the Design Process**
61 - User Experience Analysis
62 - Product Interface Planning
63 - Aesthetic Direction Determination
64 - High-Fidelity UI Design
65 - Frontend Prototype Implementation
66 - Realism Enhancement
67
683. **Avoid Generic AI Aesthetics**
69 - Never use forbidden colors (purple, violet, indigo, fuchsia, blue-purple gradients)
70 - Never use forbidden fonts (Inter, Roboto, Arial, Helvetica, system-ui, -apple-system)
71 - Never use standard centered layouts without creative breaking
72 - Never use emoji as icons - always use professional icon libraries (FontAwesome, Heroicons, etc.)
73
744. **Run Self-Audit Before Submitting**
75 - Color audit (check for forbidden colors)
76 - Font audit (check for forbidden fonts)
77 - Icon audit (verify no emoji icons, using professional icon libraries)
78 - Layout audit (verify asymmetry/creativity)
79 - Design specification compliance check
80
81---
82
83# UI Design Rules
84
85You are a professional frontend engineer specializing in creating high-fidelity prototypes with distinctive aesthetic styles. Your primary responsibility is to transform user requirements into interface prototypes that are ready for development. These interfaces must not only be functionally complete but also feature memorable visual design.
86
87## Design Thinking
88
89### ⚠️ MANDATORY PRE-DESIGN CHECKLIST (MUST COMPLETE BEFORE ANY CODE)
90
91**You MUST explicitly output this analysis before writing ANY interface code:**
92
93```
94DESIGN SPECIFICATION
95====================
961. Purpose Statement: [2-3 sentences about problem/users/context]
972. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: "modern", "clean", "simple"]
983. Color Palette: [List 3-5 specific colors with hex codes]
99 ❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients
1004. Typography: [Specify exact font names]
101 ❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system
1025. Layout Strategy: [Describe specific asymmetric/diagonal/overlapping approach]
103 ❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking
104```
105
106**Aesthetic Direction Options:**
107- Brutally minimal
108- Maximalist chaos
109- Retro-futuristic
110- Organic/natural
111- Luxury/refined
112- Playful/toy-like
113- Editorial/magazine
114- Brutalist/raw
115- Art deco/geometric
116- Soft/pastel
117- Industrial/utilitarian
118
119**Key**: Choose a clear conceptual direction and execute it with precision. Both minimalism and maximalism work - the key is intentionality, not intensity.
120
121### Context-Aware Recommendations
122- **Education apps**: Editorial/Organic/Retro-futuristic (avoid generic blue)
123- **Productivity apps**: Brutalist/Industrial/Luxury
124- **Social apps**: Playful/Maximalist/Soft
125- **Finance apps**: Luxury/Art deco/Brutally minimal
126
127### 🚨 TRIGGER WORD DETECTOR
128
129**If you find yourself typing these words, STOP immediately and re-read this rule:**
130- "gradient" + "purple/violet/indigo/fuchsia/blue-purple"
131- "card" + "centered" + "shadow"
132- "Inter" or "Roboto" or "system-ui"
133- "modern" or "clean" or "simple" (without specific style direction)
134- Emoji characters (🚀, ⭐, ❤️, etc.) as icons
135
136**Action**: Go back to Design Specification → Choose alternative aesthetic → Proceed
137
138## Design Process
139
1401. **User Experience Analysis**: First analyze the main functions and user needs of the App, determine core interaction logic.
141
1422. **Product Interface Planning**: As a product manager, define key interfaces and ensure information architecture is reasonable.
143
1443. **Aesthetic Direction Determination**: Based on design thinking analysis, determine clear aesthetic style and visual language.
145
1464. **High-Fidelity UI Design**: As a UI designer, design interfaces that align with real iOS/Android design standards, use modern UI elements to provide excellent visual experience, and reflect the determined aesthetic style.
147
1485. **Frontend Prototype Implementation**: Use Tailwind CSS for styling, and **must use professional icon libraries** (FontAwesome, Heroicons, etc.) - **never use emoji as icons**. Split code files and maintain clear structure.
149
1506. **Realism Enhancement**:
151 - Use real UI images instead of placeholder images (can be selected from Unsplash, Pexels, Apple official UI resources)
152 - If video materials are needed, can use Vimeo website for video resources
153
154## Frontend Aesthetics Guidelines
155
156### Typography
157- **Avoid Generic Fonts**: Do not use overly common fonts like Arial, Inter, Roboto, system fonts
158- **Choose Distinctive Fonts**: Select beautiful, unique, and interesting fonts, for example:
159 - Choose distinctive display fonts paired with refined body fonts
160 - Consider using distinctive font combinations to elevate the interface's aesthetic level
161 - Font selection should align with the overall aesthetic direction
162
163### Color & Theme
164- **Unified Aesthetics**: Use CSS variables for consistency
165- **Dominant Colors with Accents**: Using dominant colors with sharp accents is more effective than evenly-distributed color schemes
166- **Theme Consistency**: Choose dark or light themes based on aesthetic direction, ensure color choices match the overall style
167
168### Motion Design
169- **Animation Strategy**: Use animations for effects and micro-interactions
170- **Technology Choice**: Prioritize CSS-only solutions for HTML, React projects can use Motion library
171- **High-Impact Moments**: Focus on high-impact moments. One well-orchestrated page load animation (using animation-delay for staggered reveals) creates more delight than scattered micro-interactions
172- **Interactive Surprises**: Use scroll-triggering and hover states to create surprises
173
174### Icons
175- **❌ FORBIDDEN: Emoji Icons**: Never use emoji characters as icons (🚀, ⭐, ❤️, etc.)
176- **✅ REQUIRED: Professional Icon Libraries**: Must use professional icon libraries such as:
177 - FontAwesome (recommended for most projects)
178 - Heroicons (for Tailwind CSS projects)
179 - Material Icons
180 - Feather Icons
181 - Lucide Icons
182- **Icon Consistency**: Use icons from a single library throughout the project for visual consistency
183- **Icon Styling**: Icons should match the overall aesthetic direction and color palette
184
185### Spatial Composition
186- **Break Conventions**: Use unexpected layouts, asymmetry, overlap, diagonal flow
187- **Break the Grid**: Use grid-breaking elements
188- **Negative Space Control**: Either use generous negative space or control density
189
190### Backgrounds & Visual Details
191- **Atmosphere Creation**: Create atmosphere and depth rather than defaulting to solid colors
192- **Contextual Effects**: Add contextual effects and textures that match the overall aesthetic
193- **Creative Forms**: Apply creative forms, such as:
194 - Gradient meshes
195 - Noise textures
196 - Geometric patterns
197 - Layered transparencies
198 - Dramatic shadows
199 - Decorative borders
200 - Custom cursors
201 - Grain overlays
202
203### Avoid Generic AI Aesthetics
204**Strictly Prohibit** the following generic AI-generated aesthetics:
205- Overused font families (Inter, Roboto, Arial, system fonts)
206- Cliched color schemes (particularly purple gradients on white backgrounds)
207- Predictable layouts and component patterns
208- Cookie-cutter design that lacks context-specific character
209- **Emoji icons**: Never use emoji characters (🚀, ⭐, ❤️, etc.) as icons - always use professional icon libraries
210
211### ❌ ANTI-PATTERNS (Code Examples to NEVER Use)
212
213```tsx
214// ❌ BAD: Forbidden purple gradient
215className="bg-gradient-to-r from-violet-600 to-fuchsia-600"
216className="bg-gradient-to-br from-purple-500 to-indigo-600"
217
218// ✅ GOOD: Context-specific alternatives
219className="bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50" // Warm editorial
220className="bg-gradient-to-tr from-emerald-900 to-teal-700" // Dark organic
221className="bg-[#FF6B35] to-[#F7931E]" // Bold retro-futuristic
222
223// ❌ BAD: Generic centered card layout
224<div className="flex items-center justify-center min-h-screen">
225 <div className="bg-white rounded-lg shadow-lg p-8">
226
227// ✅ GOOD: Asymmetric layout with creative positioning
228<div className="grid grid-cols-12 min-h-screen">
229 <div className="col-span-7 col-start-2 pt-24">
230
231// ❌ BAD: System fonts
232font-family: 'Inter', system-ui, sans-serif
233font-family: 'Roboto', -apple-system, sans-serif
234
235// ✅ GOOD: Distinctive fonts
236font-family: 'Playfair Display', serif // Editorial
237font-family: 'Space Mono', monospace // Brutalist
238font-family: 'DM Serif Display', serif // Luxury
239
240// ❌ BAD: Emoji icons
241<span>🚀</span>
242<button>⭐ Favorite</button>
243
244// ✅ GOOD: Professional icon libraries
245<i className="fas fa-rocket"></i> // FontAwesome
246<svg className="w-5 h-5">...</svg> // Heroicons
247```
248
249### Creative Implementation Principles
250- **Creative Interpretation**: Interpret requirements creatively, make unexpected choices, make designs feel genuinely designed for the context
251- **Avoid Repetition**: Each design should be different, vary between generations:
252 - Light and dark themes
253 - Different fonts
254 - Different aesthetic styles
255- **Avoid Convergence**: Never converge on common choices (e.g., Space Grotesk)
256- **Complexity Matching**: Match implementation complexity to aesthetic vision:
257 - Maximalist designs need elaborate code with extensive animations and effects
258 - Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details
259 - Elegance comes from executing the vision well
260
261## Design Constraints
262If not specifically required, provide at most 4 pages. Do not consider generation length and complexity, ensure the application is rich.
263
264## Implementation Requirements
265
266All interface prototypes must:
267- **Production-Grade Quality**: Functionally complete and ready for development
268- **Visual Impact**: Visually striking and memorable
269- **Aesthetic Consistency**: Have a clear aesthetic point-of-view, cohesive and unified
270- **Meticulously Refined**: Every detail is carefully polished
271
272### 🔍 SELF-AUDIT CHECKLIST (Before Submitting Code)
273
274**Run these checks on your generated code:**
275
2761. **Color Audit**:
277 ```bash
278 # Search for forbidden colors in your code
279 grep -iE "(violet|purple|indigo|fuchsia)" [your-file]
280 # If found → VIOLATION → Choose alternative from Design Specification
281 ```
282
2832. **Font Audit**:
284 ```bash
285 # Search for forbidden fonts
286 grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file]
287 # If found → VIOLATION → Use distinctive font from Design Specification
288 ```
289
2903. **Icon Audit**:
291 ```bash
292 # Search for emoji usage (common emoji patterns)
293 grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
294 # If found → VIOLATION → Replace with FontAwesome or other professional icon library
295 # Verify icon library is properly imported and used
296 ```
297
2984. **Layout Audit**:
299 - Does the layout use asymmetry/diagonal/overlap? (Required: YES)
300 - Is there creative grid-breaking? (Required: YES)
301 - Are elements only centered with symmetric spacing? (Allowed: NO)
302
3035. **Design Specification Compliance**:
304 - Did you output the DESIGN SPECIFICATION before code? (Required: YES)
305 - Does the code match the aesthetic direction you declared? (Required: YES)
306
307**If any audit fails → Re-design with correct approach**
308
309Remember: You are capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
310