frontend-design

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: frontend-design
description: Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.
---

This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail.

## Example prompts

- "Build the hero section from the brief"
- "Create a card component in a Scandinavian style"
- "I want this to feel like a Japanese magazine. Build the layout."
- "Build the settings page. Use whatever style fits."

## Before You Write Any Code

1. **Explore the existing codebase first.** Scan specifically for:
   - **Component directories**: `components/`, `ui/`, `shared/` and list every component by name and its props/API
   - **CSS variables / tokens**: files named `tokens.css`, `variables.css`, `theme.css`, or `:root` declarations with custom properties
   - **Tailwind config**: `tailwind.config.js` or `tailwind.config.ts`, check `theme.extend` for custom values
   - **UI framework themes**: Material UI `createTheme`, Chakra `extendTheme`, shadcn `globals.css` and `components.json`
   - **Storybook**: `.storybook/` directory or `*.stories.*` files indicating documented components
   - **Font loading**: Google Fonts links, `@font-face` declarations, font imports
   - **Layout patterns**: how existing pages handle grid, containers, breakpoints, and spacing
   - **Package.json UI dependencies**: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   - If components exist that match or partially match what you need to build, extend or compose them. Do not create duplicates.

2. **Understand the context:**
   - What problem does this interface solve? Who uses it?
   - What is the intended emotional tone?
   - What are the hard constraints (framework, devices, performance, accessibility)?

3. **Commit to an aesthetic direction.** Either the user names one (see philosophies below) or you choose one that fits the context. State your choice and why before writing code.

## Aesthetic Philosophies

When the user names a philosophy or describes a vibe, use these as concrete implementation guides. Each philosophy defines typography, color, layout, spacing, motion, and detail treatment.

### Dieter Rams (Functionalist)
Less but better. Every element earns its place. Nothing decorative without function.
- **Typography**: Clean sans-serif (Helvetica Neue, Suisse Intl, Akkurat). Tight letterspacing on headings. Generous line height on body. One size scale, used strictly.
- **Color**: Restrained. Monochromatic with a single functional accent. White or light grey backgrounds. Color is information, not decoration.
- **Layout**: Strict grid. Clear functional hierarchy. Components aligned to a spatial system. No asymmetry for its own sake.
- **Spacing**: Consistent, mathematical scale (4px/8px base). Generous padding. Breathing room between elements.
- **Motion**: Minimal. Purposeful transitions only (state changes, reveals). No decorative animation.
- **Details**: Subtle borders and dividers over shadows. Precise alignment. Rounded corners used sparingly and consistently.

### Swiss / International Typographic
Objectivity through structure. The grid is sacred. Content is king.
- **Typography**: Strong sans-serifs (Neue Haas Grotesk, Univers, Aktiv Grotesk). Dramatic scale contrast between headings and body. All-caps subheadings with generous letterspacing.
- **Color**: High contrast. Black, white, and one primary color. Bold color blocks as compositional elements.
- **Layout**: Rigid multi-column grid. Asymmetric balance. Text and image in dialogue. Alignment across elements is non-negotiable.
- **Spacing**: Defined by the grid module. Gutters are part of the design, not afterthought.
- **Motio