Frontend Design

СреднийcreativeМинимальный контекст: 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

Варианты использования

  • 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

Пример промпта

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.

Рекомендуемые модели

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

Совместимые инструменты

claude-codecursorkirowindsurfany

Модальности

Вход: text, image
→
Выход: code, text

Похожие Skills

react-component-generatorlanding-page-generatoraccessibility-review

Автор

OpenModels Community

@openmodelsrun