Generating Components with AI

Framekit's AI can create custom components based on your descriptions. This powerful feature lets you build unique designs without coding.

How It Works

Click the "+" button to add a new block

Go to Basic Blocks tab

Select AI Component from the AI category

Describe what you want in natural language

AI generates a custom component

Writing Effective Prompts

Be Specific

Instead of: "Make a header"

Try: "Create a header with a logo on the left, navigation links in the center, and a 'Get Started' button on the right"

Include Details

Mention:

• Colors you want
• Layout preferences
• Content to include
• Style references (modern, minimal, bold, etc.)

Example Prompts

Hero Section:

"Create a hero section with a large headline 'Welcome to My Store', a subheadline about handmade products, and two buttons: 'Shop Now' and 'Learn More'. Use a gradient background."

Testimonial Card:

"Design a testimonial card with a quote, author name, their title, and a star rating. Include a small circular profile photo placeholder."

Pricing Table:

"Build a 3-column pricing table with Basic, Pro, and Enterprise tiers. Each should have a price, feature list, and signup button. Highlight the Pro tier as recommended."

AI Chat Interface

After generating a component, you can refine it using the AI chat:

• Click the chat icon on the component
• Type modifications like "make the button blue" or "add more spacing"
• AI will update the component based on your feedback

Tips for Best Results

Start simple and iterate

Reference your theme - AI knows your site's colors

Be patient - complex components may take a moment

Refine with chat - don't expect perfection on first try

Make it editable - ask AI to make properties adjustable

Making Components Customizable

One of the most powerful features is asking AI to make properties editable. Instead of hardcoding values, you can adjust them from a settings panel:

• "Make the border radius editable"
• "Let me change the background color from settings"
• "Make the number of columns adjustable"

This creates flexible components you can customize without regenerating. See Making AI Components Editable for detailed examples.

Saving AI Components

Once you're happy with a component:

Click the component's menu icon

Select "Save to My Components"

Reuse it across your site or other projects