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 building and planning. Build mode executes changes; Plan mode explores ideas without committing.

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.

Visual Refinement Prompts

Spacing

“Add more breathing room throughout – increase section padding and element gaps.”

“Tighten the layout – reduce spacing between elements for a more compact feel.”

Typography

“Make headlines bolder and larger. Body text should be lighter weight with more line height.”

“Apply editorial typography – large display headings, refined body text, generous leading.”

Effects

“Soften everything – reduce shadows, lighter borders, more subtle transitions.”

“Add polish – subtle shadows on cards, smooth hover transitions, soft focus states.”

Layout

“Make the hero full-height with centered content.”

“Switch to asymmetric layout – hero with content left (60%) and image right (40%).”

Functional Prompts

Forms

“Add a contact form that collects name, email, and message. Show success message on submit.”

“Add newsletter signup with just email field. Inline error validation. Success toast on submit.”

Navigation

“Make the nav sticky with a subtle shadow on scroll. Smooth scroll to sections on anchor click.”

“Add a mobile hamburger menu that slides in from the right.”

Interactive Elements

“Project cards should lift and add shadow on hover. Smooth 200ms transition.”

“Add a back-to-top button that appears after scrolling 500px.”

Quick Component Prompts

Hero variations:

“Centered hero with gradient background, large headline, subhead, and two CTAs side by side.”

“Split hero with image left, content right. Headline, paragraph, and CTA button.”

Card patterns:

“Feature cards with icon top, title, description. 3-column grid, 4px border radius.”

“Testimonial cards with quote, author photo, name, and role. Subtle shadow, rounded corners.”

Footer patterns:

“Footer with logo left, link columns center, social icons right. Dark background.”

“Minimal footer with copyright and 4 links inline. Centered, light gray background.”

Refinement Pattern

Use this pattern for iterative improvement. Learn more about this workflow in Refine Your Website with Chat:

1. Generate base: Use a starter prompt to create the structure
2. Adjust layout: Modify spacing, alignment, and responsive behavior
3. Polish visuals: Fine-tune colors, typography, and effects
4. Add interactions: Hover states, animations, and feedback