The Ultimate Prompting Guide for Framekit

What is AI Prompting in Framekit?

Framekit's AI lets you create professional website components just by describing what you want. You're not just generating images—you're building fully functional, customizable design sections for your site.

The key insight: The clearer you describe what you want, the better your results. You don't need design experience—just communicate your vision.

---

How to Access AI Generation

Adding a New AI Component

Click the "+" button to add a new block

Go to Basic Blocks tab

Select AI Component from the list

A chat interface appears where you describe what you want

The AI Chat Interface

When you add an AI component, you'll see a floating chat bar with these controls:

---

Design Styles in Framekit

Before prompting, choose your design style by clicking the paint brush icon. Each style dramatically changes how your component looks:

Available Styles

Pro tip: Your style choice is saved per site—AI will remember it for future generations.

---

The Reference Image Feature

One of Framekit's most powerful features: upload any design you love, and AI will recreate it.

How to Use Reference Images

Click the photo icon (left side of chat)

Upload any screenshot (JPEG, PNG, GIF, WebP)

The image appears as a thumbnail

Type additional instructions if needed

Submit—AI recreates the design

Example Workflow

\\\

[Upload: Screenshot of a Stripe pricing page]

Prompt: "Recreate this but with my brand colors"

\\\

When to use reference images:

• Copying a design you admire from another website
• Recreating a mockup from Dribbble or Behance
• Matching a specific aesthetic you found online
• Showing exactly what layout you want

---

Writing Effective Prompts

The Simple Formula

\\\

[Component Type] + [What It Contains] + [Style Details (optional)]

\\\

Good vs Bad Prompts

❌ Too vague:

• "Make something cool"
• "Design a header"
• "Create a modern section"

✅ Specific and clear:

• "Hero section with a large headline on the left and product mockup on the right"
• "Pricing table with three plans—Basic, Pro, and Enterprise—with the Pro plan highlighted"
• "Testimonial carousel with customer photos, quotes, and star ratings"

Component Types You Can Request

Framekit supports all major website sections. Here are prompts organized by type:

#### Hero Sections

\\\

"Full-width hero with background video, centered headline, and two CTAs"

"Split hero with text on left, animated product demo on right"

"Hero section with floating device mockups and gradient background"

\\\

#### Feature Sections

\\\

"Three-column feature grid with icons, titles, and descriptions"

"Bento grid layout showing product features"

"Alternating feature rows with image left, text right"

\\\

#### Pricing

\\\

"Pricing cards with Basic ($9/mo), Pro ($29/mo), Enterprise (Contact us)"

"Comparison table showing features across three plans"

"Single pricing card with feature checklist and CTA"

\\\

#### Testimonials

\\\

"Testimonial wall with customer photos in a masonry grid"

"Single testimonial with large quote, avatar, and company logo"

"Testimonial carousel that auto-plays"

\\\

#### Contact & Forms

\\\

"Contact form with name, email, and message fields"

"Newsletter signup with email input and subscribe button"

"Contact section with form and company info side by side"

\\\

#### Galleries

\\\

"Image gallery with lightbox on click"

"Portfolio grid with hover effects showing project names"

"Carousel of product photos with thumbnails below"

\\\

#### FAQ

\\\

"Accordion-style FAQ that expands when clicked"

"Two-column FAQ layout"

"FAQ with category tabs"

\\\

---

Iterating and Refining

The One-Change-at-a-Time Rule

After your initial generation, refine with focused prompts:

✅ Good iteration prompts:

• "Make the headline larger"
• "Change the background to dark mode"
• "Add more spacing between cards"
• "Use my brand's accent color for the buttons"
• "Make the images rounded"

❌ Bad (overloaded) iteration prompts:

• "Make everything bigger and add shadows and change colors and fix the spacing..."

Common Refinement Prompts

Layout adjustments:

• "Stack the cards vertically on mobile"
• "Center everything"
• "Add more padding"
• "Make the section full-width"

Typography:

• "Make the headline bolder"
• "Use a serif font for titles"
• "Smaller body text"
• "Increase letter spacing"

Colors:

• "Use a blue background"
• "Make the text white"
• "Add a gradient from purple to blue"
• "Use my theme's accent color"

Visual effects:

• "Add subtle shadows"
• "Remove the borders"
• "Add a hover zoom effect on images"
• "Make the cards have rounded corners"

---

Making Components Editable

The Power of Custom Settings

Ask AI to make properties adjustable from the settings panel:

\\\

"Create a hero section and make the background color editable"

"Add a pricing card where I can change the price from settings"

"Make the number of columns adjustable"

"Add a toggle to show/hide the subtitle"

\\\

What Can Be Made Editable

The Settings Panel

After generation, click on your component to see the Settings Panel with tabs:

• Content — Edit text and styled text
• Media — Upload images and videos
• Colors — Pick colors (connected to your theme)
• Layout — Adjust spacing, sizes, alignment
• Behavior — Toggle features on/off

---

Using Your Site Theme

Framekit AI knows your site's theme colors. Reference them naturally:

\\\

"Use my site's accent color for the buttons"

"Match the background to my theme"

"Use my primary text color"

\\\

Theme Colors Available

• textColor — Your main body text color
• accentColor — Your brand/CTA color
• backgroundColor — Your page background

---

Saving and Reusing Components

Save to My Components

Once you create a component you love:

Click the component's menu icon (three dots)

Select "Save to My Components"

Give it a name and description

Choose categories for easy finding later

Reuse Across Your Site

Saved components appear in the Components tab when adding new blocks. Use them on any page or even different sites.

---

Quick Reference: Prompt Templates

Hero Section

\\\

Hero section for [purpose/industry]

[Layout: split/centered/full-width]

[Key elements: headline, subtext, CTA, image]

\\\

Example:

\\\

Hero section for a photography portfolio

Split layout with headline left, gallery preview right

Include "View Work" and "Contact" buttons

\\\

Feature Grid

\\\

Feature section with [number] items

[Layout: columns/bento/list]

Each with [elements: icon, title, description]

\\\

Example:

\\\

Feature section with 4 items in a bento grid layout

Each with icon, title, and short description

Use subtle hover effects

\\\

Testimonials

\\\

[Number] testimonials in [layout]

Include [elements: photo, quote, name, title, rating]

[Animation/interaction style]

\\\

Example:

\\\

3 testimonials in a carousel

Include customer photo, quote, name, and company

Auto-advance every 5 seconds

\\\

Pricing

\\\

Pricing section with [number] plans

Names: [plan names]

Prices: [prices]

Highlight [which plan] as recommended

\\\

Example:

\\\

Pricing section with 3 plans

Starter at $19/mo, Pro at $49/mo, Team at $99/mo

Highlight Pro as "Most Popular"

\\\

---

Common Mistakes to Avoid

1. Being Too Vague

❌ "Make it look better"

✅ "Increase spacing between cards and soften the shadows"

2. Overloading a Single Prompt

❌ "Make it minimal with lots of white space and add blue gradients and shadows and use Inter font and..."

✅ "Minimal style with ample white space" → then iterate

3. Ignoring Your Design Style

❌ Prompting for rounded corners when using Editorial style

✅ Choose the right style first, then prompt accordingly

4. Not Using Reference Images

❌ Spending 10 prompts trying to describe a layout

✅ Screenshot what you want and upload it

5. Forgetting About Mobile

❌ Creating complex layouts without considering smaller screens

✅ "Make sure it stacks nicely on mobile"

---

Advanced Techniques

Style Mixing

\\\

"Minimal layout with bold brutalist typography"

"Glass effects with editorial grid structure"

\\\

Mood and Feeling

\\\

"Should feel premium and exclusive"

"Energetic and playful vibe"

"Professional but friendly"

\\\

Brand References

\\\

"Similar to Stripe's clean aesthetic"

"Linear-inspired interface style"

"Apple-like product showcase"

\\\

Negative Prompting

\\\

"Without any shadows"

"No gradients"

"Avoid rounded corners"

"Don't center the text"

\\\

---

The Framekit Workflow

Step 1: Choose Your Style

Click the paint brush icon and select the design style that matches your brand.

Step 2: Describe What You Need

Type a clear prompt describing the component type, layout, and key elements.

Step 3: Upload Reference (Optional)

If you have a design you want to copy, upload it as a reference image.

Step 4: Generate

Click the arrow button and wait for AI to create your component.

Step 5: Iterate

Use focused follow-up prompts to refine: one change at a time.

Step 6: Customize

Use the settings panel to adjust colors, text, images, and more.

Step 7: Save (Optional)

Save successful components to reuse across your site.

---

Your Prompting Checklist

Before each prompt:

• Have I chosen the right design style?
• Am I being specific about what I want?
• Would a reference image help?
• Is this one focused request?

After each generation:

• Does this match my vision?
• What ONE thing would I change?
• Should I make any settings editable?

---

Remember

Framekit AI is your design partner:

• You provide: The vision, direction, and refinements
• AI provides: Fast execution and technical implementation

Together, you create professional designs in minutes—no coding or design experience required.

Start simple, iterate with focus, and trust your taste.