Documentation
How to Use Prompts
Learn how to effectively use our UI prompts across different AI coding tools. From v0 to Cursor, we've got you covered.
Quick Start
1
Browse Prompts
Explore our library of 20+ UI prompts across 12 categories.
2
Copy or Share
Click the copy button or share directly to your favorite IDE.
3
Generate & Customize
Let AI create your component, then iterate to perfection.
Best Practices
Be Specific
Include details about styling, responsiveness, and interactions you want.
Add Context
Mention your tech stack, existing patterns, and design system preferences.
Iterate
Start with the base prompt, then refine with follow-up requests.
Customize
Modify prompts to match your brand colors, fonts, and component library.
IDE Guides
Step-by-step instructions for using prompts in popular AI coding tools.
v0 by Vercel
AI-powered UI generation with React and Tailwind CSS
Steps
- 1Click the 'Share' button on any prompt card
- 2Select 'Open in v0' from the dropdown menu
- 3v0 will open with your prompt pre-filled
- 4Click 'Generate' to create your component
- 5Iterate and refine using natural language
Pro Tips
- Be specific about styling preferences
- Mention if you want dark mode support
- Ask for responsive designs explicitly
- Request accessibility features like ARIA labels
Claude
Anthropic's AI assistant for coding and conversation
Steps
- 1Click 'Share' on your chosen prompt card
- 2Select 'Open in Claude' from the menu
- 3Claude will receive your prompt automatically
- 4Add context about your project stack
- 5Ask follow-up questions to refine the code
Pro Tips
- Share your existing code for better context
- Ask Claude to explain the generated code
- Request tests alongside components
- Use Claude for complex logic and algorithms
GitHub Copilot
AI pair programmer integrated into your IDE
Steps
- 1Click 'Share' and select 'Copy for Copilot'
- 2Open your IDE (VS Code, JetBrains, etc.)
- 3Create a new file or navigate to your component
- 4Paste the prompt as a comment at the top
- 5Copilot will suggest completions based on the prompt
Pro Tips
- Use JSDoc-style comments for better suggestions
- Keep the prompt comment above your code
- Tab through suggestions to pick the best one
- Use Ctrl+Enter to see multiple suggestions
Cursor
The AI-first code editor built for pair programming
Steps
- 1Copy the prompt using the 'Copy Prompt' button
- 2Open Cursor and press Cmd+K (or Ctrl+K)
- 3Paste your prompt in the AI command palette
- 4Press Enter to generate the code
- 5Use Cmd+L for chat to iterate further
Pro Tips
- Use @codebase to reference your project
- Add @file to include specific files as context
- Use Cursor's diff view to review changes
- Enable 'Always Show Suggestions' in settings
Windsurf
AI-powered development environment by Codeium
Steps
- 1Copy the prompt from Prompt Library
- 2Open Windsurf and start a new Cascade flow
- 3Paste your prompt in the Cascade chat
- 4Windsurf will create and edit files automatically
- 5Review changes in the integrated diff viewer
Pro Tips
- Use Flows for multi-step development tasks
- Let Cascade handle file creation and navigation
- Ask for explanations of complex code
- Use @mentions to reference specific files
Bolt.new
Full-stack AI development environment in the browser
Steps
- 1Copy the prompt or use 'Copy as Markdown'
- 2Go to bolt.new and start a new project
- 3Paste your prompt in the chat interface
- 4Bolt will scaffold the entire component/page
- 5Use the live preview to see results instantly
Pro Tips
- Ask for complete pages with routing
- Request API integration when needed
- Bolt handles dependencies automatically
- Use the terminal for custom commands
Ready to Start?
Browse our collection of prompts and start building beautiful UIs today.