Understanding the Interface

The Sticklight studio is designed for efficient iteration between AI building and visual refinement.

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 – Connect to external services like WordPress, Slack, or Notion

Sparkle button – Access AI suggestions and quick actions

Mode picker – Switch between three interaction modes:

• Build (green) – Create and iterate as you go. This is the default mode.
• Plan (blue) – Align on complex work for better results. Creates a plan before building.
• Ask (turquoise) – Review your project before building. Read-only exploration mode.

Voice input – Speak your instructions instead of typing

Send button – Submit your message to the AI

Live Preview (Center)

A real-time view of your website.

• Interact with buttons, links, and forms
• Test responsive behavior at different screen sizes
• Click any element to select it for visual editing

Top Navigation

• Sticklight logo – Return to homepage or view credit balance
• Project name – Click to access project settings
• Code – View and edit source files directly
• Data – Manage database tables (when Cloud Backend is enabled)
• Settings – Project configuration, secrets, functions, users, and logs
• Publish – Deploy your site. A blue dot appears when you have unpublished changes.

Preview Controls

• Device toggles – Switch between desktop, tablet, and mobile views
• Refresh – Reload the preview if needed
• Open in new tab – View your site in a full browser window

Working Efficiently

1. Use chat for structural changes (adding sections, rearranging layouts)
2. Use visual editing for fine-tuning (adjusting spacing, tweaking colors)
3. Switch between modes as needed: Ask to understand, Plan for complex work, Build to execute
4. Use Skills to apply consistent patterns across your projects
5. Connect external services via Connectors to pull in data or sync content