How to Communicate Effectively with Framekit AI

Introduction: Getting the Best Results from Your AI Website Builder

Welcome to Framekit AI, your intelligent website building companion. To unlock the full potential of our AI and create exactly the components you envision, effective communication is key. Think of prompting as giving directions to a highly skilled designer who can build anything you imagine—but needs clear, detailed instructions to bring your vision to life.

The Foundation: Specificity is Everything

The most important principle when working with Framekit AI is specificity. While the AI is powerful and creative, it performs best when you provide clear, detailed guidance rather than vague requests.

Key Principles for Effective Prompting

1. Be Descriptive About Visual Elements

Paint a clear picture of what you want. Include details about:

• Layout and positioning: "Place the text on the left, image on the right"
• Colors and styling: "Use a dark blue background with white text"
• Typography: "Bold headline in large font, smaller subtext below"
• Spacing and sizing: "Add generous padding around the content"

2. Specify Functionality and Behavior

Don't just describe how it looks—explain how it should work:

• Interactive elements: "When users hover over the button, it should change to a darker shade"
• Responsive behavior: "Make sure the navigation collapses to a hamburger menu on mobile"
• Content structure: "Include placeholder text for 3 feature cards"

3. Provide Context and Purpose

Help the AI understand the component's role:

• Target audience: "This is for a professional consulting firm"
• Component purpose: "This section should build trust with potential clients"
• Website type: "Modern SaaS landing page" or "Portfolio for a photographer"

4. Use Examples and References

When possible, reference styles or patterns:

• Design patterns: "Create a card layout similar to a product grid"
• Style references: "Modern minimalist style like Apple's website"
• Component types: "Build a testimonial carousel with customer quotes"

5. Think in Columns and Rows

Structure your components by breaking them down into a clear grid system. Always specify what content goes in each row and column:

6. Request Editable Properties

Framekit AI can make specific design elements editable, allowing you to fine-tune your components after creation. When prompting, explicitly ask for the properties you want to be able to adjust later:

Examples of editable properties you can request:

• Spacing: "Make the top and bottom padding editable so I can adjust the spacing"
• Border styling: "Make the border radius editable for the card components"
• Colors: "Make the background color and text color editable"
• Typography: "Make the font size and font weight editable for the headline"
• Positioning: "Make the position of the call-to-action button editable so I can move it left or right"
• Dimensions: "Make the image width and height editable"

By specifying which properties should be editable, you'll have the flexibility to perfect your design without needing to regenerate the entire component.

Structure Your Requests Clearly

The Ideal Prompt Format:

1. 1. Component type: What are you building?
2. 2. Purpose: What should it accomplish?
3. 3. Visual description: How should it look?
4. 4. Content requirements: What information should it include?
5. 5. Style preferences: Colors, fonts, mood, etc.

Example of a Well-Structured Prompt:

Common Prompting Mistakes to Avoid

• Being too vague: "Make it look good" doesn't give enough direction
• Assuming context: The AI doesn't know your brand unless you tell it
• Forgetting mobile: Always consider responsive design needs
• Overcomplicating: Start with core requirements, then refine
• Ignoring content: Specify what text, images, or data the component needs

Iterating and Refining

Remember that great components often come from iteration. Start with a solid initial prompt, then:

• Refine details: "Make the button larger and add more padding"
• Adjust styling: "Change the background to a lighter shade"
• Add functionality: "Include a subtle animation when the page loads"
• Optimize for different screens: "Ensure the text remains readable on tablets"

Setting Yourself Up for Success

Before you start prompting, take a moment to:

• Define your goal: What should this component achieve?
• Know your audience: Who will be using your website?
• Consider your brand: What colors, fonts, and style represent you?
• Think about placement: How does this component fit with others?

The more specific and thoughtful your prompts, the closer you'll get to your ideal component on the first try. Framekit AI is designed to transform your detailed vision into beautiful, functional web components—so don't hold back on the details.