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