---
name: Frontend Design
slug: frontend-design-26
category: Frontend
description: Frontend Design guides HTML, CSS, and JavaScript for polished web UIs and interactive projects. Use it when building websites, web apps, browser games, or single-file frontend demos.
github: "https://github.com/Qiao-920/claude-desktop-cn/tree/main/electron/skills/frontend-design"
language: TypeScript
stars: 259
forks: 35
install: "npx degit https://github.com/Qiao-920/claude-desktop-cn/tree/main/electron/skills/frontend-design ~/.claude/skills/frontend-design"
installs_to: ~/.claude/skills/frontend-design
source_path: electron/skills/frontend-design/SKILL.md
collection_size: 6
category_size: 600
collection_url: "https://dirskills.com/collections/Qiao-920/claude-desktop-cn"
added: 2026-09-02T05:20:30.295Z
last_synced: 2026-09-02T05:20:30.295Z
canonical_url: "https://dirskills.com/skills/frontend-design-26"
---

# Frontend Design

Frontend Design guides HTML, CSS, and JavaScript for polished web UIs and interactive projects. Use it when building websites, web apps, browser games, or single-file frontend demos.

**Install:**

```bash
npx degit https://github.com/Qiao-920/claude-desktop-cn/tree/main/electron/skills/frontend-design ~/.claude/skills/frontend-design
```

## README

# 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