Understanding the Interface

The Sticklight studio is designed for efficient iteration between AI building and direct editing.

Studio Layout

Context Chat (Left Panel)

Your primary tool for building and refining. Type natural language instructions and watch your site update in real-time.

Build requests – “Add a pricing section with three tiers”
Refinements – “Make the header sticky and add a shadow on scroll”
Questions – “What’s the best way to structure a portfolio grid?”

Chat Input Controls

The chat input area includes several controls:

Plus button (+) – Opens a menu with additional options:

Attach file – Upload images, documents, or other files to provide context
Use tools – Access widgets, packages, and integrations
Skills – Browse and apply your saved skills to guide the AI
Connectors – Navigate to Settings → Integrations to connect external services

Mode picker – Switch between three interaction modes:

Build (default) – Create and iterate as you go
Plan (blue) – Align on complex work before building
Ask (turquoise) – Explore and ask questions without making changes

The Build mode send button turns green when ready to submit.

Voice input – Speak your instructions instead of typing. Requires browser support for the Web Speech API. On unsupported browsers, the mic appears disabled with a tooltip.

Send button – Submit your message to the AI

Slash commands – Type /summarize to get a summary of your conversation, or /new to start a fresh chat.

While the AI is responding, you can queue another message or stop generation.

Live Preview (Center)

A real-time view of your website.

Interact with buttons, links, and forms
Test responsive behavior at different screen sizes
Select elements for editing (see Visual Instruction and Edit Tab below)

Top Navigation

From left to right:

Sticklight logo – Opens the workspace navigation panel. If the chat panel is collapsed, clicking the logo re-opens it instead.
Project name – Click to open the “Edit project info” dialog where you can update the name and description.
Version history – View and restore previous versions
Toggle chat panel – Minimize or expand the chat panel
Preview – View your site in real-time
Edit – Open the manual editing panel to change element properties directly
Code – View and edit source files. Desktop only. Direct editing requires a Pro plan; free users see a read-only editor with an upgrade banner.
Cloud – Access your backend (when Cloud Backend is enabled): Database, Files, Auth users, Functions, Secrets, and Logs
Security – Run security scans on your project
Settings – Project configuration: General, Members, Domains, GitHub, and Integrations
Device toggle – One button that cycles through desktop, tablet, and mobile views. Hidden on mobile viewports.
URL bar – Shows the current page with a picker to switch between your static pages. Dynamic routes are flagged separately.
Refresh – Reload the preview if needed. Hides on very narrow windows.
Preview in Full screen – Open your site in a new browser tab
Help – Access documentation and support
Share – Invite others to collaborate on your project
Publish – Deploy your site. A blue dot appears when you have unpublished changes.

Free plans also see an Upgrade button in the top bar.

Visual Instruction

Visual Instruction lets you show the AI what you want by interacting directly with the canvas. Available on desktop only.

Accessing Visual Instruction

On the Preview tab, look for the floating switcher at the bottom center of the canvas. It has two options:

Preview mode – Normal preview behavior
Visual instruction – Enable direct manipulation

What You Can Do

In Visual Instruction mode:

Edit text inline by double-clicking
Replace images
Move and resize elements by dragging
Remove elements
Undo and redo your changes

Sending Your Changes

When you are ready, click Send to submit your visual changes to the AI. The AI interprets your intent and implements proper, responsive code.

Send works like a chat message:

It costs credits
It is blocked while a response is streaming
Your visual manipulations become context for the AI

Click Cancel to discard your changes and return to normal preview.

For more details, see Visual Instruction.

Edit Tab

The Edit tab lets you change element properties directly without AI involvement. Your edits go straight to the code with no credits consumed.

Accessing the Edit Tab

Click Edit in the top navigation (the palette icon). The editing panel replaces the chat area while the preview stays visible.

What You Can Edit

Select any element in the preview or use the Structure tab to find it in the element tree. The property form covers:

Content – Text, images, alt text
Typography – Font family, size, weight, alignment, styles
Colors – Text color, background color
Layout – Width, height, display type, gap
Spacing – Padding and margin (per side or axis)
Borders and Effects – Border width, color, radius, shadow, opacity

Changes apply to the current breakpoint (desktop, tablet, or mobile) based on which device view you have selected.

Saving Your Work

Save changes – Write your edits to the project and create a version history entry
Discard – Throw away pending changes
Undo/Redo – Press Cmd+Z / Ctrl+Z to undo, Cmd+Shift+Z / Ctrl+Shift+Z to redo (before saving)

For more details, see Manual Editing.

Working Efficiently

Use chat for structural changes (adding sections, rearranging layouts, building features)
Use the Edit tab for fine-tuning (adjusting spacing, tweaking colors, fixing typography)
Use Visual Instruction to show the AI what you want when describing it would be harder
Switch between modes as needed: Ask to understand, Plan for complex work, Build to execute
Use Skills to apply consistent patterns across your projects
Connect external services via Settings → Integrations to pull in data or sync content

FAQ

What is the difference between Visual Instruction and the Edit tab?

Visual Instruction sends your canvas interactions to the AI, which interprets your intent and implements responsive code. It costs credits. The Edit tab applies your changes directly to the code with no AI interpretation. It is free and exact.

Can I use both in the same session?

Yes. Switch between Preview (with Visual Instruction), Edit, and chat as needed. Each serves a different purpose.

Why is the Code tab read-only?

Direct code editing requires a Pro plan. Free users can view all files and use chat to make changes through the AI.