The Creator’s Prompt Guide

Your prompt is your blueprint. This guide helps you communicate with precision and get results that match your vision.

From Intent to Interface

Every website starts with a prompt. The clearer your intent, the closer the output matches what you imagined.

Sticklight doesn’t guess – it interprets. Your job is to provide enough signal that interpretation becomes execution.

Use Ask Mode to Build Context

Spend 2-3 questions in Ask mode before you start building. Ask things like “How is the navigation structured?” or “Where do the styles for this section come from?” This builds context and leads to sharper, more efficient prompts when you switch to Plan or Build.

The workflow that works: Ask (understand) → Plan (align on complex work) → Build (execute).

The Blueprint Formula

Structure your prompts with purpose:

“Build a [site type] for [audience] that [primary goal]. Include [key sections]. Style: [visual direction].”

Example:

“Build a portfolio site for a UX designer that showcases case studies. Include a hero with name and CTA, project grid with hover effects, about section, and contact form. Style: minimal, lots of whitespace, sans-serif typography.”

The 4 Pillars of a High-Fidelity Prompt

1. Architecture over Vibe

Describe structure explicitly:

✓ “A hero with headline left, image right, CTA below headline”
✗ “A modern hero section”

2. Flow over Features

Describe the user journey:

✓ “Visitor lands on hero, scrolls to see work samples, clicks into case study, ends at contact”
✗ “Add a portfolio section”

3. Outcome over Implementation

Describe the result, not the technique:

✓ “Cards lift slightly when hovered”
✗ “Add a translateY transform on hover”

4. Layered Construction

Build in phases:

Layer 1: Architecture

“Build a landing page with hero, features, testimonials, pricing, and CTA footer”

Layer 2: Content

“Hero headline: ‘Ship faster with AI’. Subhead: ‘From idea to live site in minutes.’ CTA: ‘Start Building'”

Layer 3: Style

“Apply minimal aesthetic: generous whitespace, subtle shadows, Inter font”

Layer 4: Polish

“Add hover animations to cards, smooth scroll between sections”

Visual Language Keywords

Terms that translate precisely:

Layout: grid, masonry, asymmetric, centered, full-bleed, split-screen
Spacing: compact, airy, generous whitespace, tight, breathing room
Typography: bold headlines, lightweight body, all-caps accent, large display type
Effects: subtle shadows, gradient overlays, blur effects, hover animations
Mood: minimal, bold, playful, corporate, editorial, brutalist, luxurious

Sticklight Syntax

Certain phrasings work especially well:

Aesthetics:

• “Soften the shadows” → reduces shadow intensity
• “Add more breathing room” → increases padding/margins
• “Punch up the contrast” → increases color/size differentiation

Layout:

• “Stack these on mobile” → responsive column behavior
• “Pin the nav to the top” → sticky positioning
• “Full-bleed this section” → edge-to-edge content
• “Center everything in the hero” → centered alignment

Behavior:

• “Smooth scroll to sections” → anchor navigation
• “Show loading state” → skeleton/spinner UI
• “Validate on submit” → form validation

The Senior Dev Approach

Speak to Sticklight like a senior developer on your team:

✓ “Increase hero padding to 120px”
✓ “Grid to 2 columns on tablet”
✓ “Fade in each card on scroll”

✗ “Make it look better”
✗ “Fix the spacing”
✗ “Make it more modern”

Context Amplifiers

Uploads: Share mockups, inspiration, or brand assets. See Attach Files for Context.

Brand Kits: Establish colors and fonts first. See Brand Kits.

Modes: Use AI Interaction Modes to switch between Ask (explore), Plan (align), and Build (execute).

The Edit Approach

Once your base is solid, 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.

Quick Reference: The SPECIFIC Framework

• Structure – What sections, what order
• Purpose – What goal does this serve
• Elements – What components to include
• Content – What text, what messaging
• Interactions – What behaviors on hover, click
• Feel – What mood, what aesthetic
• Inspiration – Reference images or sites
• Constraints – Brand colors, must-haves, avoid

For more detailed examples of each type, see our Common Use Cases guide.