Skip to content
  • There are no suggestions because the search field is empty.

5 Tips You (Probably) Didn’t Know About Visually Copilot’s Component Builder

Practical tips based on hundreds of real workflows that most users still overlook.

Visually’s AI Component Builder is one of the most powerful ways to design, develop, and iterate on CRO components at scale. But while most people discover the basics on day one, there are several lesser-known tricks that can dramatically improve workflow speed, output accuracy, and creative quality.

Here are five practical tips based on hundreds of real workflows that most users still overlook.
 

1. Start by Asking: “What Data Do You Have Access To?”

One of the most common questions we get is: “What data does the AI actually know about my store?”

The simplest way to find out is to just ask the agent:

“What data do you have access to?”
This open-ended phrasing matters! If you ask a leading or overly specific question (“Do you know X?”), the LLM may try to satisfy you even if the answer is uncertain. By asking broadly, you get a grounded list of available:
  • Store analytics
  • Product attributes
  • User events
  • Element structures
  • Previous tasks in the conversation
  • Any data integrations your workspace has enabled
If you need confidence for a specific use case…Ask the AI to explain, in very simple words, how it would accomplish that exact task:
“Explain step-by-step, in simple language, how you would do this.”
Then use your common sense: If the explanation sounds vague, impossible, or overly magical, there’s a good chance it’s hallucinating. If the reasoning is concrete and logical, you can trust the workflow more confidently.

This extra 10-second sanity check dramatically reduces surprises later.
 

2. Close the Spec Before Generating Anything

Just like real-world product development, a clear spec saves everyone time, including AI.

Complex components take the AI several minutes to produce. If you iterate too late, after the build process has already started AND you waste cycles. A better workflow is

  1. Ask the agent to help you write a complete spec first.
  2. Finalize structure, content, logic, variants, and success criteria.
  3. Only then say:
“Great. Start development.”
Below are two effective methods.
  

2a. Build the Spec Text-First (Fully Inside Visually)

A frequent mistake is writing a detailed spec in ChatGPT, then copying it into Visually. There’s no need. Instead, build everything directly inside the AI Component Builder:

  • Describe the idea
  • Ask for UX structure
  • Define logic conditions
  • Request variants
  • Iterate naturally with the agent
This keeps everything aligned with Visually’s internal models and build engine.
 

2b. Build the Spec from an Image (When You Want to Move Even Faster)

When image-based generation works, it feels like magic: Upload a mockup and  get a fully functional component. But when it misinterprets the layout, things get messy. These two best practices improve accuracy dramatically:

1. Clean & Crop the Image Before Uploading
Always crop the screenshot so only the widget itself is visible.Avoid including the entire webpage (header, product images, reviews, etc.).

Why?
  • Surrounding elements confuse the model
  • The AI may assume external content is part of the widget
  • You maintain clarity and isolate the intended design
A clean, tightly cropped image = far better results.
 
2. Review the Spec Before Starting Development
After uploading, ask:
“Create a detailed spec based on this image.”
Then refine:
  • Layout
  • States
  • Copy
  • Variations
  • Logic
  • Interactions
Only once the spec is correct should you tell the agent to begin development. This avoids errors and ensures the final component matches your design exactly.
 

3. Use the Agent for Brainstorming. It’s Trained on Tens of Thousands of Real Examples

People often forget the AI has been trained on a massive variety of real-world CRO components, UX patterns, and store optimizations.

This means you can brainstorm freely:
  • “What are 10 ideas to test on my PDP?”
  • “Suggest high-impact components for products with high exit rates.”
  • “Give me variations of this widget for different customer segments.”
The AI is not just a developer, it’s also a creative ideation partner.
 
 

4. Reuse Components Instantly with a Self-Generating Prompt

Once you build a great component, you may want to replicate it in new chats, stores, or brand variations. Just ask the model:
“For the latest result, create a prompt that will reproduce this exact component.”
The AI will generate a reusable “master prompt,” including:
  • Structure
  • UI layout
  • Logic
  • Variants
  • Data bindings
  • Custom rules
  • Styling assumptions
Copy/paste that into any new session and you instantly recreate the component—no rebuilding required.
 

5. Iterate Like a CRO Pro

CRO is an ongoing process and your AI workflow should reflect that. You can iterate on:
  • Design: “Make the layout cleaner with better spacing.”
  • Content: “Rewrite the copy to be more urgent but still on-brand.”
  • Logic: “Add a fallback version for low-engagement users.”
  • Ideation: “Give me 3 new approaches before we build the next variation.”
Iteration with AI reduces friction, saves mental energy, and helps you explore far more ideas quickly.
 

 

Having Trouble?

We’ve got your back.
Email us at support@visually.io or reach out on chat for help with setup or troubleshooting.