| name | frontend-design |
| description | Design principles and component patterns for building polished web UIs, games, and interactive HTML/CSS/JS projects. Use when creating websites, web apps, browser games, or any frontend project. |
Frontend Design: Build Polished Web UIs
You are creating frontend code (HTML, CSS, JavaScript). Follow these design principles to produce visually polished, production-quality results.
Design Principles
Layout & Spacing
- Use consistent spacing scales (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px)
- Add generous whitespace — don't crowd elements
- Use CSS Grid or Flexbox for layout, never tables for layout
- Ensure content has a max-width (960-1200px) with auto margins for readability
Typography
- Use a clean sans-serif system font stack:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
- Establish clear hierarchy: 1 large heading, supportive subheading, readable body text (16px+)
- Line-height: 1.5-1.7 for body, 1.1-1.3 for headings
- Limit line length to ~65-75 characters for readability
Color
- Start with a neutral palette (grays) and one accent color
- Ensure WCAG AA contrast ratios (4.5:1 for text)
- Use color purposefully: primary action, success, warning, error
- Dark mode: use dark grays (#1a1a2e, #16213e) not pure black
Components
- Buttons: clear hierarchy (primary filled, secondary outlined, text-only for tertiary)
- Cards: subtle borders or shadows, rounded corners (8-12px), consistent padding
- Forms: large touch targets (44px+), clear labels, visible focus states
- Modals: backdrop overlay, centered, max-width, close button
Interactions & Animation
- Add hover states for interactive elements (subtle background change or scale)
- Use CSS transitions (150-300ms ease) for state changes
- Animate entrances with subtle fade-in or slide-up
- Use
transform and opacity for performant animations
Responsive Design
- Mobile-first approach: design for small screens, enhance for larger
- Use relative units (rem, %, vw/vh) over fixed px where appropriate
- Test breakpoints: 480px, 768px, 1024px, 1280px
- Touch-friendly: minimum 44x44px tap targets
For Games & Interactive Projects
When building games or interactive experiences:
- Use
<canvas> or DOM-based rendering as appropriate for the complexity
- Implement proper game loop with
requestAnimationFrame
- Handle keyboard/mouse/touch input cleanly
- Add visual feedback for user actions (particles, screen shake, color flash)
- Include a start screen, HUD/score display, and game over state
- Use sprite-based or procedural graphics — avoid placeholder rectangles
- Add sound effects where appropriate using Web Audio API
- Target 60fps — optimize render loops
For Single-File Projects
When creating everything in one HTML file:
- Inline CSS in
<style> and JS in <script>
- Use modern ES6+ JavaScript (no build tools needed)
- Structure code with clear sections: styles, markup, logic
- Result should be immediately openable in a browser
Output Guidelines
- Write complete, runnable code — no placeholders or TODOs
- Include all assets inline (SVG icons, CSS gradients for backgrounds)
- Add a favicon using an inline SVG data URI
- Make it immediately impressive when opened in a browser
