AI Prompt Writing Tips

Getting great results from AI starts with writing good prompts. Here's how to communicate effectively with Framekit's AI.

The Anatomy of a Good Prompt

Structure

A great prompt includes:

What - The type of component

Content - Text, items, or data to include

Style - Visual preferences

Context - How it fits your site

Example

"Create a testimonial section (what) with 3 customer quotes including names and companies (content), using a clean, modern card design with subtle shadows (style), for a SaaS product landing page (context)."

Prompt Templates

Hero Sections

"Design a hero section with [headline] and [subheadline]. Include [number] buttons labeled [labels]. Use a [style] aesthetic with [color preference]."

Feature Sections

"Create a [number]-column feature section highlighting [features]. Each feature should have an icon, title, and description. Style should be [modern/minimal/bold]."

Pricing Tables

"Build a pricing table with [number] tiers: [tier names]. Include prices of [prices], [number] features each, and CTA buttons. Highlight [tier] as recommended."

Contact Sections

"Design a contact section with a form including [fields]. Add company contact info on the side. Include [social media icons]. Use [style] styling."

Do's and Don'ts

Do ✅

• Be specific about layout ("3 columns", "centered")
• Mention colors if you have preferences
• Include example content
• Reference styles ("like Apple", "modern SaaS")
• Specify responsive behavior if important

Don't ❌

• Be vague ("make it nice")
• Use technical jargon AI might misunderstand
• Request multiple unrelated things at once
• Forget to mention important content

Iterating on Results

First Pass

Start with a basic prompt to get a foundation:

"Create a features section with 4 items in a grid"

Refinement

Then refine with follow-up prompts:

"Add icons to each feature"

"Use a blue gradient background"

"Make the cards have rounded corners"

Special Requests

Animations

"Add a subtle fade-in animation when this section comes into view"

Responsive Design

"Make sure this looks good on mobile with a single column layout"

Accessibility

"Ensure good color contrast and readable text sizes"

Editable Settings

Make your components flexible by asking for editable properties:

• "Make the border radius, padding, and gap editable"
• "Let me adjust the background color and text color from settings"
• "Add a toggle to show/hide the subtitle"
• "Make the number of columns adjustable between 2 and 4"

This is a game-changer for creating reusable components! See Making AI Components Editable for comprehensive examples.

Learning from Examples

Browse the Component Library to see what's possible. When you find something you like, you can:

Use it as-is

Ask AI to create "something similar but with [changes]"

Start with it and modify using AI chat