🎨
React Component from Sketch Description
Turn a natural-language UI description into a polished React component
prompt template
Build a React component based on this description: **Component:** [COMPONENT_NAME] **Description:** [DESCRIBE_WHAT_IT_LOOKS_LIKE_AND_DOES] Requirements: - Use TypeScript with proper prop types - Style with Tailwind CSS (no external UI libraries) - Make it fully responsive (mobile-first) - Include hover/focus states and smooth transitions - Handle loading and empty states - Add proper aria labels for accessibility - Export as a named export Return the complete component file. Include a brief usage example in a comment at the bottom showing how to use it with sample props.
How to Use This Prompt
- 1Copy the prompt template above
- 2Paste into claude
- 3Replace [bracketed placeholders] with your specific project details
- 4Iterate on the AI output to refine and customize the results
More Frontend Prompts
Related frontend templates from the vault
🎨
Responsive Landing Page Builder
Generate a complete, conversion-optimized landing page
Intermediatelanding-pagenext.js
🎨
Infinite Scroll with Virtualization
Use this prompt to infinite scroll with virtualization with AI assistance
Beginnerreactinfinite-scroll
🎨
Vibe-to-Code: App from Vibes
Describe an app idea in casual language and get a working prototype
Beginnervibe-codingprototyping
🎨
Drag-and-Drop Kanban Board
Use this prompt to drag-and-drop kanban board with AI assistance
Intermediatereactdrag-drop
You Might Also Like
Prompts from other categories that share similar tags
♻️
Refactoring
Manual DOM to React Components
Use this prompt to manual dom to react components with AI assistance
Shared:reactcomponents
♻️
Refactoring
Monolithic Component Decomposition
Use this prompt to monolithic component decomposition with AI assistance
Shared:componentsreact
🧪
TestingPRO
Component Testing with Testing Library
Use this prompt to component testing with testing library with AI assistance
Shared:reactcomponents
🏗️
Architecture
AI Pair Programming Session
Set up an interactive pair programming session with AI as your coding partner
Shared:vibe-coding
Keep Exploring the Vault