| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics while maintaining strong structure and usability. |
| license | Complete terms in LICENSE.txt |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics while maintaining strong layout structure, hierarchy, and usability for real-world applications.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick a clear direction: minimal, refined, editorial, futuristic, playful, industrial, etc. Avoid randomness.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this interface feel premium and intentional?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Creativity must support usability, not break it.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually refined and intentional
- Cohesive with a clear aesthetic system
- Structured with proper layout hierarchy
Frontend Aesthetics Guidelines
Focus on:
- Typography: Use distinctive display fonts where appropriate, but maintain readability for UI. Avoid overuse of decorative fonts in dashboards.
- Color & Theme: Use a controlled palette. Brand color should be used intentionally, not everywhere.
- Motion: Use subtle, meaningful animations. Prioritize clarity over excessive motion.
- Spatial Composition: Maintain alignment and grid consistency. Avoid random layouts in dashboards.
- Backgrounds & Visual Details: Add depth using subtle gradients, shadows, and layering — not heavy visual noise.
Avoid generic AI design patterns and inconsistent styling.
Layout & Hierarchy System (CRITICAL FOR DASHBOARDS)
1. Layering System
Always structure UI into:
- Page layer →
bg-background or bg-surface-base
- Section layer → grouped containers with spacing
- Card layer →
bg-card with border and shadow
Never place content directly on the page without separation.
2. Spacing System
Use consistent spacing scale:
- 8px → small gaps
- 16px → internal padding
- 24px → between components
- 32px → between sections
Avoid arbitrary spacing values.
3. Card Design Pattern
All cards must follow:
bg-cardborder border-borderrounded-xl or rounded-2xlshadow-sm or shadow-mdp-4 to p-6
Optional enhancements:
hover:shadow-mdtransition-all duration-200
4. Grid & Alignment
- Use consistent grids (
grid-cols-2, grid-cols-3, grid-cols-12)
- Maintain equal heights where needed
- Use consistent
gap-4 or gap-6
- Align text and elements strictly
5. Color Usage Rules
- Brand color → buttons, active states, highlights
- Neutral colors → backgrounds, cards, text
- Avoid overusing brand color across the UI
6. Text Hierarchy
Use clearly:
text-text-primary → headingstext-text-secondary → descriptionstext-text-muted → metadata only
Avoid excessive muted text.
7. Shadows & Depth
Use subtle elevation:
shadow-sm → defaultshadow-md → emphasis
Avoid heavy shadows or glow effects in dashboards.
Tailwind Usage Rules
- Always use design tokens (
bg-card, text-text-primary, etc.)
- Do not hardcode colors unless necessary
- Maintain consistency with global theme variables
- Prefer reusable patterns over one-off styling
Interaction Guidelines
- Hover → subtle (border, shadow, background)
- Transitions →
duration-200 ease-out
- Clickable elements must be clearly visible
- Avoid hidden or confusing interactions
What to Avoid
- No random gradients or excessive decoration
- No inconsistent spacing
- No flat UI without borders or separation
- No overuse of muted text
- No mixing too many visual styles
Infloq Brand Guidelines
When building UI for Infloq, use the following established design system:
Color Palette
Brand Colors (Primary)
- Primary:
#2520BE
- Hover:
#3730D9
- Accent:
#4F46E5
- Glow:
#6366F1
Mascot (Dark Backgrounds)
- Default:
#1C254F
- Light:
#2D3A6B
UI Colors
- Border:
#A5B4FC
- Section:
#EEF2FF
- Background:
#F8FAFF
- Card:
#FFFFFF
Text Colors
- Primary:
#0B1220
- Secondary:
#475569
- Muted:
#94A3B8
- OnDark:
#E0E7FF
- OnDarkMuted:
#C7D2FE
Typography
- Display: ClashDisplay
- Body: Inter
Usage Notes
- Use brand colors for CTAs and active elements
- Use mascot colors for dark sections
- Maintain strong contrast for readability
- Use gradients subtly for depth, not decoration
Final Principle
Creativity is important, but structure is mandatory.
Every UI must feel:
- Clear
- Consistent
- Well-spaced
- Visually separated
- Production-ready
The output should look like a real SaaS product, not an experimental design.
