Refine Your Website with Chat

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

Start with Understanding

Before making changes to unfamiliar code, switch to Ask mode. Ask questions like “How does the navigation work?” or “Where is the contact form configured?” to build context. Then switch back to Build mode to make targeted changes with confidence.

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 3 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.