Frontend Design

intermediatecreativeMin 32K context

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

Use Cases

  • 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

Example Prompt

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.

Recommended Models

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

Compatible Tools

claude-codecursorkirowindsurfany

Modalities

Input: text, image
→
Output: code, text

Related Skills

react-component-generatorlanding-page-generatoraccessibility-review

Author

OpenModels Community

@openmodelsrun