Best Practices
Writing Better Prompts
Do
- Be specific about structure, styling, and behavior
- Mention accessibility requirements upfront
- Specify responsive breakpoints if needed
- Include example data or placeholder content
- Reference specific CSS frameworks (Tailwind, Bootstrap)
Don't
- Write vague one-word prompts
- Assume the AI knows your project context
- Ask for entire applications in one prompt
- Forget to specify the target framework
Iterative Development
- Start with a basic structure, then add features incrementally
- Use follow-up prompts to refine: "Make the button larger" or "Add a loading state"
- Keep conversation history for context - the AI remembers previous messages
- Don't be afraid to ask for complete rewrites if the direction is wrong
Using Design Context
- Select well-styled elements before entering Make Mode
- The AI extracts colors, spacing, typography, and layout from attached elements
- More context = more accurate code generation
- Group related elements together for better understanding
Code Quality
- Always review generated code before using in production
- Ask for TypeScript if you need type safety
- Request accessibility features explicitly (ARIA, keyboard nav)
- Ask for comments if you need documentation
Using Quality Modes Effectively
- Start with Prototype mode for rapid iteration and testing ideas
- Switch to Production mode when you're happy with the design and ready to ship
- Use the Inspect Panel to extract exact CSS values from your design
- Try prompt templates before writing custom prompts from scratch
- Generate a style guide first, then reference it in follow-up prompts for consistency
When to Use Make Mode
- Prototyping - Quickly validate ideas with working code
- Learning - See how designs translate to different frameworks
- Scaffolding - Generate starting points to customize
- Cross-platform - Same design, multiple framework outputs