Frontend Design

IntermediacreativeContexto mínimo: 32K

Creates production-grade frontend interfaces with high design quality. Generates complete UI components, pages, and layouts using modern frameworks (React, Vue, Svelte) with Tailwind CSS or CSS-in-JS. Focuses on unique, polished designs that avoid generic AI aesthetics — emphasizing typography, spacing, color harmony, and micro-interactions.

frontendui-designreacttailwindcomponentsweb-designcss

Casos de uso

  • Building responsive landing pages from wireframes or descriptions
  • Creating reusable component libraries with consistent design tokens
  • Converting Figma designs to production React/Vue components
  • Prototyping interactive dashboards and data visualizations
  • Implementing dark mode and theme switching systems

Prompt de ejemplo

Create a modern pricing page component with:
- 3 tiers (Free, Pro, Enterprise) in a responsive card layout
- Animated hover effects and a "Most Popular" badge on Pro
- Toggle between monthly/annual billing with discount shown
- Accessible, semantic HTML with ARIA labels
- Tailwind CSS with a custom color palette (not default blue)
- Mobile-first responsive design

Use React + TypeScript + Tailwind CSS 4.

Modelos recomendados

claude-opus-4-7claude-sonnet-4-6gpt-5-5gemini-2-5-pro

Herramientas compatibles

claude-codecursorkirowindsurfany

Modalidades

Entrada: text, image
→
Salida: code, text

Skills relacionadas

react-component-generatorlanding-page-generatoraccessibility-review

Autor

OpenModels Community

@openmodelsrun