Refine Your Website with Chat

Your website improves with each message. Here’s how to communicate refinements effectively.

Iterative Design Workflow

Building happens in layers:

1. Structure first – Establish sections and layout
2. Content second – Add headlines, copy, and images
3. Style third – Refine colors, typography, spacing
4. Polish last – Micro-interactions and finishing touches

Not sure where to start? Review our guide to building with natural language for the fundamentals.

Don’t worry about conversation length – Smart Conversation Management ensures you can iterate as long as you need without hitting limits.

Sticklight Syntax

Certain phrasings translate more precisely:

Adjusting aesthetics:

• “Soften the shadows” → reduces shadow intensity
• “Add more breathing room” → increases padding/margins
• “Make it feel lighter” → reduces visual weight
• “Punch up the contrast” → increases color/size differentiation

Changing layout:

• “Stack these on mobile” → responsive column behavior
• “Pin the nav to the top” → sticky header
• “Full-bleed this section” → edge-to-edge content
• “Center everything in the hero” → centered alignment

Adding features:

• “Add a form that collects name and email” → contact form
• “Include social links in the footer” → icon links
• “Show a loading state” → skeleton/spinner UI

Logic and behavior:

• “Validate the email field” → form validation
• “Smooth scroll to sections” → anchor navigation
• “Show a success message after submit” → form feedback

Scope Control: Global vs. Local

Be clear about what you’re targeting:

Global changes:

• “Change all buttons to rounded corners”
• “Use this blue (#3B82F6) for all primary actions”
• “Increase body font size across the site”

For consistent global styling, consider setting up a brand kit instead of making individual changes.

Local changes:

• “Make just the hero headline larger”
• “Only round the corners on the CTA button”
• “Add shadow to the pricing cards only”

The “Edit” Approach

Once you have a solid base, think in terms of edits:

• “Edit the hero: make the headline two lines and add a subtle gradient background”
• “Edit the pricing section: add a ‘Most Popular’ badge to the middle tier”
• “Edit the footer: add a newsletter signup form”

This keeps changes contained and predictable.

Best Practices

• Preview thoroughly before updating
• Test on mobile via responsive preview
• Check forms and interactive elements work
• Update during low-traffic times if your site has regular visitors

Queue Follow-Up Prompts

You don’t have to wait for the AI to finish responding before typing your next message. Sticklight lets you queue follow-up prompts while the AI is still working.

How it works:

1. While the AI is responding, type your next message in the chat
2. Your message is added to a queue (shown below the input)
3. When the AI finishes, your queued message is automatically sent

Managing your queue:

• Edit – Click on a queued message to modify it before it’s sent
• Remove – Delete a queued message if you change your mind
• Limit – You can queue up to 4 messages at a time

This is perfect for when you’re on a roll and know exactly what you want to build next!

Not sure what to work on next? Chat suggestions offer ideas based on your current project.