Making AI Components Editable

One of Framekit's most powerful features is the ability to ask AI to make specific properties of your components editable. This means you can adjust things like colors, spacing, text, and layout directly from a settings panel—without touching any code or asking AI again.

What Are Component Settings?

When you generate a component with AI, you can ask it to make certain properties "editable" or "adjustable." These become settings that appear in a panel when you select the component, allowing you to:

• Quickly test different values
• Make adjustments without regenerating
• Fine-tune your design visually
• Create reusable, flexible components

How to Request Editable Settings

When generating or modifying a component, simply ask AI to make specific properties editable:

Basic Syntax

• "Make the border radius editable"
• "Let me adjust the padding from settings"
• "Make the background color customizable"
• "Allow me to change the number of columns"

Example Prompts

Creating a Hero Section with Settings:

"Create a hero section with a headline, subheadline, and CTA button. Make the following editable: headline text, subheadline text, button text, button color, and background image."

Feature Cards with Flexibility:

"Design a 3-column feature section. Make the number of columns editable (2-4 range), the card border radius adjustable, and let me toggle the card shadows on/off."

Pricing Table with Options:

"Build a pricing table with 3 tiers. Make each tier's price, title, and feature list editable. Also let me adjust the highlight color and toggle which tier is marked as 'recommended'."

Types of Editable Properties

Text & Content

• Headlines and titles
• Descriptions and paragraphs
• Button labels
• Placeholder text
• Alt text for images

Example: "Make all the text content editable so I can easily update it later"

Colors & Styling

• Background colors
• Text colors
• Border colors
• Accent/highlight colors
• Gradient colors

Example: "Let me change the primary accent color and background color from settings"

Spacing & Layout

• Padding (inner spacing)
• Margins (outer spacing)
• Gap between items
• Section height
• Container width

Example: "Make the padding and gap between cards adjustable"

Borders & Shapes

• Border radius (corner roundness)
• Border width
• Border style
• Shadow intensity

Example: "Let me adjust the border radius from sharp corners to fully rounded"

Visibility & Toggles

• Show/hide elements
• Enable/disable features
• Toggle animations
• Display options

Example: "Add a toggle to show or hide the subtitle"

Numbers & Counts

• Number of items/columns
• Grid columns
• Items per row
• Animation duration

Example: "Make the number of testimonials displayed editable from 2 to 6"

Images & Media

• Image URLs
• Background images
• Icon selection
• Video sources

Example: "Let me change the background image and logo from settings"

Advanced Settings Ideas

Responsive Controls

"Make the number of columns editable: 1 for mobile, 2 for tablet, 3 for desktop"

Range Sliders

"Let me adjust the opacity with a slider from 0 to 100"

"Make the font size adjustable between 14px and 24px"

Dropdown Selections

"Add a dropdown to choose between 'light', 'dark', or 'gradient' themes"

"Let me select the icon style: 'outline', 'filled', or 'duotone'"

Conditional Display

"Add a toggle that shows an extra CTA button when enabled"

"Let me choose whether to display prices monthly or annually"

Real-World Examples

Example 1: Flexible Hero Section

Prompt:

"Create a hero section with:

• Large headline and subheadline
• Two CTA buttons
• Background image with overlay

Make editable:

• Both button texts and colors
• Headline and subheadline text
• Background image URL
• Overlay opacity (0-100%)
• Whether to show the second button"

Example 2: Customizable Testimonial Carousel

Prompt:

"Design a testimonial section with customer quotes. Make these settings available:

• Number of testimonials shown (1-4)
• Card background color
• Border radius (0px to 24px)
• Whether to show star ratings
• Whether to show company logos
• Auto-play toggle for carousel"

Example 3: Dynamic Pricing Table

Prompt:

"Build a pricing comparison table. Let me configure:

• Number of pricing tiers (2-4)
• Each tier's name, price, and features
• The highlighted/recommended tier
• Accent color for the highlighted tier
• Whether to show monthly/yearly toggle
• CTA button text for each tier"

Example 4: Adjustable Feature Grid

Prompt:

"Create a features section with icon cards. Make editable:

• Number of columns (2, 3, or 4)
• Card padding
• Icon size
• Gap between cards
• Border radius
• Show/hide icons toggle
• Background color"

Best Practices

1. Plan Your Settings

Before generating, think about what you might want to adjust later:

• What content will change frequently?
• What styling might need tweaking?
• What layout options would be useful?

2. Group Related Settings

Ask for settings that make sense together:

• "Make all spacing values editable"
• "Let me customize all the colors"
• "Make the card styling adjustable (radius, shadow, border)"

3. Use Sensible Defaults

Ask AI to set good defaults:

"Make the border radius editable, defaulting to 8px"

"Let me adjust padding, starting at 24px"

4. Add Reasonable Constraints

For numerical values, specify ranges:

"Make columns editable from 1 to 4"

"Let opacity be adjusted between 20% and 80%"

5. Save Your Configured Components

Once you've dialed in the perfect settings, save the component to your library for reuse across your site.

Accessing Component Settings

Click on any AI-generated component

Look for the settings icon (gear) in the toolbar

A panel opens showing all editable properties

Adjust values and see changes in real-time

Settings are saved automatically

Pro Tips

• Batch your requests: Ask for multiple editable properties in one prompt
• Be specific about types: "Make it a color picker" vs "make it a text input"
• Think reusability: Settings make components more versatile for reuse
• Test different values: Use settings to quickly compare design options
• Combine with AI chat: First make it editable, then fine-tune with AI

Making properties editable transforms static components into flexible, reusable building blocks—giving you the power to customize without code.