​
Crafting Your Prompt

Your journey with Creatr begins by clearly defining your vision. A well-written prompt not only communicates your idea but also guides our AI in generating a codebase that aligns with your goals. Follow these steps to create a strong, effective prompt.

​
1. Describe Your Vision in Detail

Start by writing a comprehensive description of your web application. Include details about:
  • Design: Layout, color schemes, and overall aesthetics.
  • Functionality: Core features, interactive elements, and user experience.
  • Purpose: The problem your app solves or the unique experience it offers.
Example Prompt: 
"Develop a modern landing page for a tech startup featuring interactive UI elements, dynamic animations, and a bold, vibrant color palette. The design should be clean and minimalist, emphasizing user engagement and seamless navigation."
Define Your Vision - Light Mode Define Your Vision - Dark Mode

​
2. Enhance Your Prompt

Once you’ve drafted your vision, use the Enhance Prompt feature by pressing the corresponding button in the Creatr interface. This tool will:
  • Suggest improvements for clarity and detail.
  • Adjust technical specifics to better align with a production-ready setup.
Enhance Your Prompt - Light Mode Enhance Your Prompt - Dark Mode

​
3. Add Attachments and OpenAI Integration

To provide additional context:
  • Attachments: Include images that showcase your design ideas and functionalities. These attachments help our AI better understand your desired style.
Example Attachment - Light Mode Example Attachment - Dark Mode
  • OpenAI Integration: Activate OpenAI features to fine-tune technical details. This ensures that the generated code aligns even more precisely with your vision.

​
4. Utilize the Knowledge Base

The Knowledge Base is a powerful resource for setting project-level guidelines:
  • Project Guidelines: Establish consistent design rules, component usage, and best practices.
  • Unified Vision: Maintain consistency across your app by defining a clear set of standards.
  • Future Reference: Although we’ll cover the Knowledge Base in detail on a later page, it’s essential to know that it offers a centralized way to manage and enforce quality across your project.
Knowledge Base Overview - Light Mode Knowledge Base Overview - Dark Mode

​
5. Edit for Fine Details

After the initial generation, use the Creatr workspace to refine your project:
  • General Layout: Start with the broad structure generated from your detailed prompt.
  • Finer Details: Gradually incorporate more specific adjustments and polish each element.
  • Iterative Process: Continuously edit and refine until every component perfectly reflects your vision.
By following these steps, you’ll create a detailed prompt that lays a solid foundation for your web app. Begin with a comprehensive vision, let our AI enhance it, and then use editing to add the fine details. With powerful tools like attachments, OpenAI integration, and a robust Knowledge Base at your disposal, you’re well on your way to creating an extraordinary web application with Creatr.