Creating Projects with Buildable
The AI Builder is your workspace for creating new apps, pages, and components. Describe what you want in plain language and Buildable generates real, functional code.
Creating a new project
Start by describing your project in the prompt field. Be as specific or as general as you like:
Buildable generates the full page with working components, responsive layout, and styling.
Iterating on your design
After the initial generation, you can refine your project by chatting with the AI:
- Add sections: “Add a pricing section with three tiers”
- Modify styling: “Make the background darker and use a blue accent color”
- Add interactivity: “Add a modal that opens when clicking the CTA button”
- Restructure: “Move the testimonials above the pricing section”
Each change is applied in real time — you can see the result instantly in the preview.
Using templates
Visit the Explore page to browse pre-built templates. Templates give you a head start with professionally designed layouts that you can customize with AI.
Templates are a great starting point — you can ask the AI to modify any aspect of a template to match your needs.
Working with components
Buildable projects are built with React components. You can:
- Ask AI to create reusable components
- Add components from the template library
- Customize component props and styling
- Compose multiple components into full pages
Tips for better results
- Be specific about layout, colors, and functionality
- Provide context — mention your industry or audience
- Iterate — start broad, then refine details
- Reference examples — “similar to the Stripe pricing page” helps AI understand your vision
