Visual Instruction

Show Sticklight what you want by interacting directly with the rendered page. Visual Instruction lets you select, move, resize, delete, and replace elements on the canvas, then send those changes for the AI to implement properly.

For direct property edits without AI involvement, see Manual Editing.

Which Should I Use?

I want to…	Use
Change a specific color, font, or spacing value	Manual Editing
Update text content	Either (Visual for AI help, Manual for direct edit)
Swap an image or background	Visual Instruction (double-click) or Manual Editing
Move an element to a different position	Visual Instruction
Resize something and have it stay responsive	Visual Instruction
Make changes without spending credits	Manual Editing

Accessing Visual Instruction

From Preview, click the Visual Instruction toggle next to the preview mode control at the bottom of the canvas.

How It Works

1. Stay on Preview and switch on Visual Instruction
2. Click an element to select it (Shift-click to add more)
3. Make the change you want on the canvas, or use the selection as context for a chat message
4. See the temporary result in the preview
5. Press Send to have the AI implement it

What you do on the canvas is an instruction, not the final code change. The AI reads your intent and implements a proper, responsive result.

What You Can Do on the Canvas

Select Elements

Click an element to select it. A selection outline appears. Shift-click to select multiple elements.

Edit Text

Double-click any text element to edit it inline. Type your changes directly on the canvas.

Replace Images and Backgrounds

Double-click an image or background to open the file picker. Select a new file, and the replacement queues up with your other visual edits. Press Send when ready.

Delete Elements

Select an element and press Delete or Backspace to remove it. You can also click the delete button that appears.

Drag and Reposition

Click and drag a selected element to show a new position. Drop zones highlight as you drag.

Resize Elements

Drag the edge handles on a selected element to resize it. The preview updates as you drag.

Scale Elements

Drag the corner handles to scale an element and its contents proportionally.

Attach to Chat

With elements selected, type a chat message. The selected elements attach as context, so “make this bigger” or “change this to blue” is unambiguous.

Before Sending

Undo and Redo

Press Cmd+Z (Mac) or Ctrl+Z (Windows) to undo your last canvas action. Press Cmd+Shift+Z or Ctrl+Shift+Z to redo.

Cancel

Click Cancel to discard all pending visual instructions and return to the normal preview.

What Happens When You Press Send

The AI receives a structured description of your selected elements, text replacements, image replacements, deletions, movement and sizing changes, the active viewport, and a screenshot of the result.

The AI turns your visual intent into real code. Dragging something to the right becomes a layout goal. The AI expresses it through the project’s existing grid, flex, spacing, and breakpoint conventions rather than dropping in pixel transforms.

The finished result may not match your temporary canvas nudge pixel for pixel. It aims at the outcome you asked for, implemented properly for responsive layouts.

Credits

No credits: Selecting, moving, resizing, inline-editing, replacing images, deleting, undoing, redoing, and cancelling. Everything stays local to the preview.

Credits consumed: Pressing Send, or sending a chat prompt with elements attached. This is a real AI request.

Send is blocked if the workspace is out of credits. There is no fixed price per visual instruction. The cost reflects the model usage needed to implement the request, same as any chat message.

Ask, Plan, and Build modes still apply. Build mode actually implements the change.

When to Use Visual Instruction

Use Visual Instruction when:

• Showing is easier than describing
• You want to move, resize, or replace something visually
• You need the AI to know exactly which element you mean
• The change needs real responsive layout work
• The change goes beyond what Manual Editing exposes
• You are fine spending credits

Example: Drag a card below another one, resize it to match its neighbor, double-click an image to swap it, and send that so the AI rebuilds the layout responsively.

For exact property changes without AI interpretation, use Manual Editing.

FAQ

What is the difference between Visual Instruction and Manual Editing?

Visual Instruction sends your canvas interactions to the AI for interpretation. The AI implements your intent with proper responsive code. Manual Editing applies changes directly to the code with no AI. Visual Instruction uses credits on Send. Manual Editing is free.

Why does the result look different from what I dragged?

The AI interprets your intent and implements it properly. Dragging something 50 pixels to the right becomes a layout change using the project’s spacing system, not a pixel offset. The goal is a responsive, maintainable result.

Can I swap images with Visual Instruction?

Yes. Double-click an image or background element to open the file picker. Select a new file, then press Send to have the AI implement the replacement.

Can I use Visual Instruction with chat?

Yes. Select elements on the canvas, then type a message in chat. The selected elements attach as context. This makes your request precise without lengthy descriptions.

What if I run out of credits?

Send is blocked when the workspace has no credits. You can still use Manual Editing for direct property changes without credits.

Do I need to be in Build mode?

Ask, Plan, and Build modes apply. Build mode implements changes. If you are in Ask or Plan mode, the AI responds accordingly but does not make code changes until you switch to Build.