SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsfrontend-design

frontend-design

Frontend & websites

View repository

Updated 10-16 06:44

About this skill

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-card
  • border border-border
  • rounded-xl or rounded-2xl
  • shadow-sm or shadow-md
  • p-4 to p-6

Optional enhancements:

  • hover:shadow-md
  • transition-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 → headings
  • text-text-secondary → descriptions
  • text-text-muted → metadata only

Avoid excessive muted text.

7. Shadows & Depth

Use subtle elevation:

  • shadow-sm → default
  • shadow-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.