Beyond Building
I'm your collaborative design partner.
Most people jump straight to “build me a page” — and I love that. But I'm not just a build tool. Think of me as a creative collaborator who's with you at every stage: brainstorming ideas, planning page structures, building and iterating on designs, troubleshooting when things go sideways, and refining until it's pixel-perfect. The more we go back and forth, the better the result.
And remember — Flex is a totally freeform canvas. You can always jump in and build, edit, or refine things yourself. I'm just here to help you move faster and think bigger.
Here are just some of the ways we can work together beyond building new content:
🧠
Brainstorm & Ideate
Not sure what to build? Describe your goal and I'll suggest page structures, section types, interaction patterns, and layout approaches. I can help you think through the creative direction before committing to anything.
Try saying:
"I need to build a product launch page — what sections would you recommend?"
"What's a good way to showcase before/after comparisons?"
📋
Plan & Structure
Before building, ask me to plan. I can outline a full page architecture — sections, content hierarchy, interaction strategy — and we can refine it together before I start placing elements. This saves tons of back-and-forth and gets you to a polished result faster.
Try saying:
"Help me plan out a page for our annual report"
"What's the best way to structure a multi-section product tour?"
✏️
Refine & Iterate
Already built something but it's not quite right? Select any element and tell me what to change. I can tweak colors, swap fonts, adjust spacing, rework layouts, update copy, or completely rethink a section. Iteration is where the magic happens — don't be afraid to ask for "one more tweak."
Try saying:
"Make this section feel more spacious"
"Can you try a darker color palette on this hero?"
🔍
Troubleshoot & Debug
Something not working the way you expected? Tell me what's going wrong — interactions not firing, layouts breaking, animations behaving oddly. I can inspect the elements, diagnose the issue, and fix it. I'll even explain what went wrong so you learn along the way.
Try saying:
"My flip cards aren't showing content when clicked — can you fix them?"
"The accordion panels aren't collapsing properly"
🌐
Translate & Localize
Need your experience in another language? I can translate all the text content on a page while preserving your styling, fonts, and layout. Great for creating localized versions of campaigns or multi-language experiences.
Try saying:
"Translate all the text on this page to Spanish"
"Create a French version of this page"
🖼️
Generate & Edit Images
Need a hero image, icon, or background visual? I can generate images from a text description, remove backgrounds, or edit existing images — like removing objects or changing the scene. No need to leave Flex to find or create visuals.
Try saying:
"Generate a hero image of a mountain landscape at sunset"
"Remove the background from this product photo"
Flex AI Modes
Four modes. One creative flow.
I operate in four distinct modes, each designed for a different stage of your creative process. You can switch between them anytime — just click the mode selector in the chat panel, or I'll suggest switching when it makes sense. Here's when to use each:
💡
Inspire Mode
Pure creative exploration. No canvas changes, no commitments — just ideas. Use Inspire mode when you're exploring possibilities, or want to brainstorm directions for a project. I'll suggest concepts, creative approaches, interaction ideas, and visual directions. When you land on something you love, we'll move to Plan or Build.
Best for:
• Brainstorming creative directions
• Exploring "what if" scenarios
• Getting unstuck on a design challenge
• Discovering interaction patterns and ideas
📐
Plan Mode
Think before you build. Plan mode lets me outline a full page structure — sections, content hierarchy, and interaction strategy — without touching the canvas. We refine the plan together until you approve it, then I switch to Build mode and execute section by section. Perfect for large or complex pages.
Best for:
• Multi-section or full-page builds
• Mapping out content architecture
• Deciding on section order and layout strategy
• Aligning on scope before committing
🔨
Build Mode
The default and most action-oriented mode. I'll execute immediately — adding sections, styling elements, creating interactions, and iterating on your designs. Best for when you know what you want and need it built fast. I'll infer smart defaults for anything you don't specify.
Best for:
• Adding and editing elements on the canvas
• Quick changes: colors, fonts, spacing, copy
• Creating interactions and animations
• Generating and editing images
🔎
Review Mode
Get a professional audit of your work. Review mode checks your page for design consistency, accessibility compliance (WCAG), and SEO readiness — then gives you an actionable report. Use it when you're nearly done and want a second set of eyes, or before publishing to catch issues you might have missed.
Best for:
• Pre-publish quality checks
• Accessibility audits (alt text, headings, ARIA)
• Design consistency reviews (spacing, typography, color)
• SEO analysis (meta tags, heading structure)
01 — The Building Blocks
Components
Everything on a Flex page is made of components. Think of them as LEGO bricks — each one does something specific, and you snap them together to build anything. Here’s your vocabulary:
Rectangle
“Add a rectangle” — your go-to shape. Use for cards, buttons, backgrounds, dividers, and containers.
Oval
“Add a circle” or “add an oval” — perfect for avatars, badges, decorative dots, and icons.
Polygon
“Add a triangle” — polygons come as triangles, right-triangles, or custom shapes for unique designs.
Text lives here
Text
“Add text” — headings, paragraphs, lists, links. Supports rich formatting and experience styles.
Image
“Add an image” — photos, illustrations, logos. Supports cover, contain, and fill modes.
Video
“Add a video” — embed video with autoplay, loop, mute, and custom thumbnail options.
01.b — AI-Powered Visuals
Image Generation & Editing
I can generate images from text descriptions, edit existing images, remove backgrounds, and even create short AI videos — all without leaving Flex. The more specific your prompt, the better your result. Here's the vocabulary:
🎨 Generate Images
Describe what you want and I'll create it. Be specific about subject, style, mood, and composition. Supported aspect ratios:
1:1Square
16:9Widescreen
9:16Vertical / Stories
3:2Classic photo
2:3Tall portrait
4:5Instagram portrait
5:4Landscape
3:4Tall landscape
💬 "Generate a 16:9 hero image of a mountain landscape at sunset, soft pastel tones"
✏️ Edit Images
Select an existing image and describe changes. I can modify specific parts — remove objects, change colors, add elements, adjust the scene. Think of it like giving art direction.
💬 "Remove the person from this image" · "Change the sky to a sunset"
🪄 Remove Backgrounds
Select any image and I'll cleanly remove the entire background, leaving just the subject with transparency. Perfect for product shots, headshots, and layered compositions.
💬 "Remove the background from this image" · "Make the background transparent"
🔧 Image Fit Modes
Control how an image fills its container:
Cover— fills entire area, may crop
Contain— fits fully, may have gaps
Fill— stretches to fill (may distort)
None— original size, no scaling
💬 "Set this image to contain" · "Make the hero image cover the section"
🎛️ Image Filters
Apply visual filters to any image non-destructively:
Brightness
Contrast
Saturation
Hue
Invert
Sepia
💬 "Make this image sepia" · "Increase brightness by 20%"
🎬 Generate Video
Create short AI video clips from text, or animate an existing image. 5 or 10 seconds, in 16:9, 9:16, or 1:1. Takes 3–5 minutes in the background — keep working while it renders.
💬 "Generate a 10s video of ocean waves" · "Animate this hero image"
02 — Structure & Layout
Containers & Positioning
Containers hold your components together. Understanding how I think about layout will help you describe exactly what you need.
📦 Section
The big horizontal bands on your page. “Add a section” creates a full-width container — think hero areas, feature blocks, footers. Sections always span the page width.
💬 Try saying: “Add a hero section with a gradient background”
📁 Group
A flexible container for organizing elements. Groups can use “flex mode” for automatic row/column layouts, or hold absolutely positioned children. Nest groups inside sections or other groups.
💬 Try saying: “Create a flex group with 3 cards in a row with 20px gap”
📌 Positioning Modes
Absolute = manually placed at exact x/y coordinates.
Stack = elements flow naturally in order, great for responsive layouts.
Fixed = stays locked in place on the screen as the user scrolls. Perfect for sticky navbars, floating CTAs, or persistent UI.
Sticky to Parent = sticks to the top of the viewport while its parent section is in view, then scrolls away with it. Great for side labels or section headers.
💬 Try saying: "Center this absolutely" · "Make this fixed to the top" · "Make this sticky to its parent"
📏 Sizing Keywords
Fill = stretch to fill the available space in the parent container. Great for full-width sections or elements that should grow with their parent.
Fit Content = shrink-wrap around whatever's inside. The element is only as big as its content needs. Perfect for buttons, labels, and auto-sizing text.
Fixed = an explicit pixel value you set manually (e.g. 300px). The element stays that exact size regardless of content or parent. Use when you need precise control.
Relative = a percentage of the parent's size (e.g. 50%). Scales proportionally as the parent changes. Ideal for responsive multi-column layouts.
💬 Try saying: “Make the section height fit-content” or “Set width to fill”
02.b — Multi-Page Experiences
Pages & Presentations
Flex experiences can have multiple pages — think of them as slides in a presentation, pages in a report, or screens in an app. Each page has its own canvas, dimensions, and content. I can create, duplicate, reorder, and link between them. Here's the terminology:
📄 Creating Pages
Each page has a title (shown in the pages panel) and a slug (the URL path). You can create blank pages with custom dimensions or duplicate an existing page to clone its content as a starting point.
💬 "Add 5 new pages for a presentation" · "Duplicate the Home page as a Landing page"
📐 Page Dimensions
Each page has its own width and height. For presentations/slides, a common size is1920×1080(16:9). For scrollable reports, set height to fit-content so the page grows with your content.
💬 "Make all pages 1920×1080 for a slide deck" · "Set height to fit-content"
🔀 Reordering Pages
Pages appear in order in your experience. You can move any page before or after another, or send it to the end. The order defines how viewers navigate through your content — especially important for presentations and reports.
💬 "Move the Summary page to the end" · "Put the Intro before the Overview"
🔗 Linking Between Pages
Add navigation interactions that link to other pages in your experience, external URLs, or scroll to specific sections on the current page. Build navigation menus, "Next slide" buttons, and table-of-contents links that tie your multi-page experience together.
💬 "Add a Next button that goes to the next page" · "Link this to the Pricing page"
🎯 Presentation Tips
Building a slide deck or report? Here's my recommended workflow:
1- Set page dimensions— 1920×1080 for slides
2- Create all pages at once— "Add 10 pages for my presentation"
3- Design a master layout on page 1, then duplicate it
4- Navigate between pages— "Go to page 3"
5- Add transitions and interactions per slide
💬 "Build me a 10-slide presentation about our Q4 results"
⚙️ Page Settings
Each page also has metadata I can help with:
SEO title & description— for search engines
Open Graph / Twitter cards— social sharing previews
Slug— the URL path (/about, /pricing)
Padding— page-level inner spacing
💬 "Set the SEO title to 'Q4 Report'" · "Change the slug to /quarterly-review"
03 — The Magic Sauce
Object States
Object states let an element switch its look based on interaction — hover it, click it, or have another element control it. This is different from animations (which are time-based). States are instant visual switches with smooth transitions.
Try these live examples ↓
Hover State
Hover over the box below. It grows and changes color smoothly.
💬 “Add a hover state that grows the button and changes its color”
Click State
Click the box below. It toggles between two colors on each click.
💬 “Add a click state that turns it into a green circle”
Pressed State
Press and hold the box below. It shrinks while pressed, returns when released.
💬 “Add a pressed state that shrinks the button and darkens it”
Target States — One element controls another
This is where it gets powerful. Click any color button below to change the big rectangle’s color — the buttons are “controlling” the rectangle’s state remotely.
Blue
Purple
Coral
💬 “Add 3 color buttons that each change the hero background to a different color when clicked”
04 — Motion & Life
Animations
Animations are time-based effects — they play when an element scrolls into view, on hover, on click, or continuously in a loop. Unlike object states (which are instant switches), animations have duration and flow.
Scroll down to trigger these ↓
Fade In
Appears gradually when scrolled into view. The most common entrance animation.
💬 “Fade this in when it scrolls into view”
Scale In
Pops in from nothing. Great for emphasis and drawing attention to key elements.
💬 “Scale this in with a bouncy easing”
Slide In
Slides in from a direction. Specify left, right, up, or down. Perfect for reveals.
💬 “Slide this in from the left on scroll”
Spin
Rotates the element. Set clockwise or counter-clockwise, duration, and degrees.
💬 “Make this spin continuously” or “Spin on view”
Bounce
A playful bounce effect. Hover the ball above! Great for CTAs and playful UI.
💬 “Add a bounce animation on hover”
Scroll Speed / Parallax
Makes elements scroll at different speeds than the page, creating a parallax depth effect.
💬 “Add a parallax scroll effect” or “Make this scroll faster than the page”
Type-In
Hello, world!
Characters appear one by one, like a typewriter. Great for hero headlines.
💬 “Add a type-in animation to the heading”
Highlight
Key phrase here
Sweeps a colored highlight behind each word or character. Perfect for emphasizing key phrases, stats, or CTAs in your content.
💬 "Highlight this text word by word in purple"
Split
Split apart!
Characters or words fly in from scattered positions and assemble into place. Dramatic entrance effect for headlines and hero text.
💬 "Add a split animation to the hero headline"
States vs. Animations — When to use which
Use Object States when…
An element should look different on hover/click/press
One element controls another’s appearance
You need tabs, toggles, or visual switches
The change is a finite “state” (Active, Selected, Open)
Use Animations when…
Elements need entrance effects (scroll into view)
You want continuous motion (spinning, bouncing)
Text should type in or split apart
The effect is time-based with duration/easing
05 — Making Things Happen
Interactions
Interactions make one element affect another. Show or hide panels, navigate to URLs, toggle menus, build carousels — this is how you wire things together. The key difference from states: interactions affectotherelements, not just themselves.
👁️ Show / Hide / Toggle
Click one element to show, hide, or toggle the visibility of another. This is the building block for menus, accordions, reveal panels, and more.
💬 “When I click this button, toggle the panel below”
🔗 Navigation
Click to navigate to a URL, another page in your experience, or smooth-scroll to a specific element on the page.
💬 “Make this button link to ceros.com in a new tab”
🎠 Carousel
Show one item at a time from a group, with next/previous controls, autoplay, or click/hover triggers. Think image sliders, testimonial rotators, and feature showcases.
💬 “Turn these 5 images into a carousel with arrow controls”
⬇️ Scroll-To Anchor
Smooth-scroll to any element on the page when clicked. Great for navigation menus, table-of-contents, and “Back to top” buttons.
💬 “Make this button scroll to the features section”
06 — Patterns You Can Build
Interactive Components
By combining components, states, animations, and interactions, you can ask me to build any of these common patterns. Here’s the vocabulary I understand:
🎹
Tabs
Click tab headers to switch between content panels.
“Build tabs with 3 panels”
🪗
Accordion / FAQ
Click to expand/collapse content sections. One at a time or multiple open.
“Build an FAQ accordion”
🎠
Carousel / Slider
Swipe through items with arrow controls, autoplay, or click/hover triggers.
“Create an image carousel”
☑️
Checklist
Clickable items that toggle a checkmark. Track progress visually.
“Build a clickable checklist”
👁️
Show / Hide Panels
Click a trigger to reveal or dismiss a panel, menu, or overlay.
“Toggle this panel on click”
🧮
Stepper / Progress
Step through stages with visual progress indicators. Multi-step forms or walkthroughs.
“Build a 4-step progress stepper”
🏆
Quiz / Survey
Answer questions and reveal results. Great for engagement and lead gen.
“Build a personality quiz”
🖼️
Gallery / Grid
Tile layout with optional click-to-expand, filtering, or lightbox views.
“Build a 3-column gallery”
Live Examples
These aren’t mockups — they’re real, working Flex components built entirely with native interactions. Go ahead, click around!
Example 1
Accordion / Expandable Panels
Click a row to expand its content while collapsing the others. This pattern is built using show/hide interactions — each header toggles its own answer panel. Great for FAQs, feature breakdowns, or any content that benefits from progressive disclosure.
What are Object States?
+
−
How are Animations different from States?
+
−
What’s the difference between Show/Hide and Object States?
+
−
Can I use interactions and animations together?
+
−
💬 Try saying:“Build an FAQ accordion with 4 questions about Flex terminology”
Example 2
Toggle Card Grid
A grid of cards where clicking one reveals deeper content. This is built with click object states — each card has a “default” look and a “Flipped” state that shows a different background and text. Click to toggle, click again to flip back.
🎯
Object States
Click to reveal →
Visual presets an element switches between on hover, click, or press. Change colors, size, opacity, borders — anything visual. Think of it as giving an element multiple "looks" it can toggle between.
← Click to flip back
⚡
Animations
Click to reveal →
Time-based effects with a set duration — fade, scale, slide, bounce, spin, type-in. Trigger on scroll, on view, or hover. Use for entrances, exits, loops, and parallax. Unlike states, animations play through a timeline.
← Click to flip back
🔗
Interactions
Click to reveal →
Wire elements together: show/hide panels, navigate to URLs or pages, build carousels, or scroll to anchors. Interactions affect other elements — that's the key difference from states, which change the element itself.
← Click to flip back
🎨
Styles
Click to reveal →
Reusable color and text styles that cascade across your entire experience. Change a color style once and every element using it updates. Link text to a style so fonts, sizes, and weights stay consistent everywhere.
← Click to flip back
💬 Try saying:“Build a 4-card grid where clicking each card toggles a different color and reveals content”
Example 3
Carousel with Controls
A carousel shows one item at a time from a group, with previous/next controls. This is built using the native carousel interaction — a group of slides with external arrow controls. Click the arrows to cycle through the slides with smooth transitions.
📦
Components
Rectangles, ovals, text, images, video — the building blocks of every Flex page.
⬅
➡
💬 Try saying:“Turn these 4 slides into a carousel with arrow controls”
07 — Beyond Native
Custom Code & Embeds
When native components aren't enough, Flex AI can write fully custom HTML, CSS, and JavaScript — and embed it right into your experience. Describe what you need in plain language, and I'll build it. Need to tweak it later? Just tell me what to change — no code editor required. It opens up a whole new world of content creation.
What can you build with custom code?
🧮 Calculators & Tools
ROI calculators, pricing estimators, mortgage calculators, unit converters, savings projectors — any tool that takes user input and returns a result. Perfect for turning static content into interactive lead-gen assets.
ROI Calculator
Pricing Estimator
Savings Projector
Unit Converter
💬 "Build an ROI calculator that takes annual spend and shows projected savings"
🕹️ Games & Gamification
Arcade-style mini games, spin-the-wheel promotions, memory matching challenges, drag-and-drop puzzles, trivia with scoring — gamified experiences that boost engagement and time-on-page.
Spin the Wheel
Memory Game
Trivia Quiz
Drag & Drop
💬 "Create a spin-the-wheel game with 6 prize segments and a spin button"
📊 Data Visualizations
Animated charts, interactive graphs, real-time dashboards, progress trackers, data maps — bring your numbers to life with dynamic visuals that respond to user interaction.
Animated Charts
Interactive Graphs
Data Maps
Progress Trackers
💬 "Build an animated bar chart that counts up when it scrolls into view"
✨ Visual Effects & Custom UI
Particle effects, confetti animations, before/after image sliders, countdown timers, custom navigation menus, live search filters, sortable tables — anything you can imagine in a browser.
Particle Effects
Countdown Timer
Before/After Slider
Sortable Tables
💬 "Add a before/after image slider comparing two product photos"
How it works
1
Describe It
Tell Flex AI what you want to build in plain language. No code knowledge needed.
2
I Build It
I write the HTML, CSS, and JavaScript and embed it directly into your experience.
3
Iterate Conversationally
Want to change colors, swap copy, or adjust the logic? Just tell me — I update the code without you ever opening an editor.
08 — Look & Feel
Styles & Theming
Styles let you define reusable colors and typography across your entire experience. Change a style once, and every element using it updates automatically. Here’s the vocabulary:
🎨 Color Styles
Named colors you define once (like “Primary”, “Accent”, “Black”). When I use a color style, I reference the name, not the hex — so you can rebrand by changing one value.
Primary
Secondary
Accent
Black
White
💬 “Change the Primary color style to red” or “Add a new color style called Coral”
📝 Text Styles
Reusable typography presets — font, size, weight, line-height. Link text elements to a style so changes propagate everywhere. This page uses: Heading 1, Heading 2, Heading 3, Paragraph, and Small.
Heading 1
Heading 2
Heading 3
Paragraph text looks like this.
Small text for captions and labels.
💬 “Change all experience text styles to use Fustat” or “Link this text to the Heading 1 style”
🖌️ Backgrounds
Any element can have a background: solid colors, gradients (linear or radial), or images. Backgrounds are separate from borders and fills.
💬 “Add a gradient background from blue to purple”
🖲️ Borders & Shadows
Borders go around elements (outside or inside with !inside). Shadows add depth with drop shadows or inner shadows (inset). Border-radius rounds corners.
💬 “Add a soft shadow” or “Add a 2px inside border”
09 — On-Brand Creation
Branding & Brand Kits
Flex AI is brand-aware by design. Set up your brand system — colors, fonts, and assets — and Flex AI automatically uses them when building new content. Here's how it all connects:
🎨 Brand Kits
Organization-level style libraries containing your brand's colors and typography. To apply one, open the "Themes & styles" dropdown next to your experience title (above the layers panel) and select your Brand Kit. Once applied, Flex AI reads those tokens and uses them automatically when building.
What's inside a Brand Kit:
• Brand Colors — named color tokens (Primary, Secondary, Accent…)
• Brand Text Styles — shared typography presets (Heading, Body, Caption…)
Note: Brand Kit tokens are read-only — managed in the Brand Kit, not in the experience.
💬 "Use our Primary brand color for the hero background"
✏️ Local Styles
Experience-level text styles and color swatches that Flex AI can both read and create. Link text elements to a style so changes propagate everywhere. Update one swatch, and every element referencing it updates automatically.
Two types of Local Styles:
• Color Styles — named swatches like "Primary Purple" or "Accent Lavender"
• Text Styles — reusable typography presets (font, size, weight, line-height)
Flex AI links new text to your styles & uses your color tokens automatically.
💬 "Add a new color style called Coral" or "Link this text to Heading 2 style"
🤖 AI Brand Awareness
Flex AI automatically detects your existing design system — fonts, colors, text styles, and color tokens — and uses them when generating new content. The more brand assets and styles you set up before building, the more on-brand everything will be.
What Flex AI does automatically:
• References your color tokens ($color-brand-primary, etc.)
• Links new text to your defined text styles
• Matches the visual tone of existing content
Pro tip: Set up styles before asking Flex AI to build for best results.
💬 "Build a hero section using our brand styles" or "Use our Primary Purple for the CTA"
🚀 Coming Soon: More advanced branding capabilities are on the way — including creating and updating Brand Kits directly through Flex AI, and full connectivity with the Asset Library so Flex AI can pull content straight from your pre-built component library.
10 — Responsive Design
Breakpoints & Responsiveness
By default, Flex uses a desktop-first approach: you design at the widest size, then override specific properties at smaller breakpoints. Changes cascade down — so anything you set on desktop automatically applies to tablet and mobile unless you override it.
You can also switch to a mobile-first setup, which flips the inheritance — you design at the smallest size first, and changes cascade up to tablet and desktop instead. Here's how both work:
📐 How Breakpoints Work
Breakpoints are screen-width thresholds where your layout adapts. In Flex's desktop-first model:
Desktop→ Your base design. Everything starts here.
Tablet→ Inherits everything from desktop. You only change what needs to adapt (e.g. fewer columns, smaller text).
Mobile→ Inherits from tablet (which inherited from desktop). Override only what's different.
This means you don't need to rebuild for every screen — just tweak the differences!
💬 "On mobile, stack these cards vertically" · "Make the heading smaller on tablet"
🔄 Inheritance Chain
⬇️ Desktop-First (default)
Design wide, cascade down. Changes flow from desktop → tablet → mobile.
Desktop (base)
↓
Tablet (override)
↓
Mobile (override)
⬆️ Mobile-First
Design small, cascade up. Changes flow from mobile → tablet → desktop.
Desktop (override)
↓
Tablet (override)
↓
Mobile (base)
🎯 What You Can Override
At each breakpoint, you can change almost any property on any element:
Size— width, height, font sizes
Layout— flex direction (row → column), gap, padding
Visibility— hide elements entirely on certain screens
Position— move from absolute to stack
Spacing— different padding or margins per screen
💬 "Hide this image on mobile" · "On tablet, reduce the padding to 40px"
💡 Pro Tips for Responsive
Use stack positioning— elements that flow naturally reflow much better across screen sizes than absolute positioned ones.
Use fill and percentage widths— these adapt automatically. Fixed pixel widths can overflow on smaller screens.
Wrap your flex layouts— flex-wrap lets cards flow to the next row when space runs out.
Be specific about the breakpoint— always tell me which screen: "on mobile", "on tablet", or "on desktop only".
11 — Inclusive Design
Accessibility
Making your experience accessible isn’t just good practice — it’s essential. I can help you add the right semantic structure, labels, and descriptions so assistive technologies (like screen readers) understand your content. Here’s the vocabulary:
🖼️ Alt Text
Every image should have alt text — a short, plain-language description of what the image shows. Screen readers read this aloud so visually impaired users understand the content.
Good alt text:
Describes the content, not the file name
Is concise (1–2 sentences max)
Skips "image of" or "photo of" — screen readers already know it’s an image
For decorative images that don't convey meaning, I can mark them as decorative so screen readers skip them.
💬"Add alt text to all images on this page" · "Generate alt tags for every image"
🏵️ Heading Hierarchy
Headings (H1–H6) create a content outline that screen readers use to navigate the page. The visual size doesn’t have to match the heading level — you can have a visually small H1 or a large H3. What matters is the logical structure:
H1— one per page, the main title
H2— major sections
H3— subsections within an H2
P— body paragraphs
I can set accessibility types without changing the visual appearance — the heading tag is for structure, not styling.
💬"Make this an H1" · "Set all section titles to H2" · "Set this to a paragraph"
🏷️ Semantic Tags
Semantic tags tell browsers and screen readers what role an element plays on the page. Instead of everything being a generic "div", you can mark containers with their purpose:
header— the top bar / navigation area
nav— a navigation menu
main— the primary content area
section— a distinct content section
article— a self-contained piece of content
footer— the bottom area of the page
💬"Set this section's tag to nav" · "Make this the main landmark"
🎯 ARIA Labels
ARIA (Accessible Rich Internet Applications) labels give screen readers extra context for elements that don’t have visible text. This is especially important for:
Icon buttons— a close ✘ button needs a label like "Close menu"
Decorative shapes— mark as aria-hidden so screen readers skip them
Interactive elements— describe what clicking/hovering does
Live regions— announce dynamic content changes
💬"Add an aria label that says 'Close menu'" · "Mark this shape as decorative"
12 — Quick Reference
Pro Tips Cheat Sheet
The more specific your prompt, the faster I can deliver. Here are my favorite tips for getting exactly what you want on the first try:
1
Be specific about the interaction type
❌ “Make it do something on hover” → ✅ “Add a hover state that changes the background to blue and scales up 10%”
2
Name the component type
❌ “Make a shape” → ✅ “Add a rectangle with rounded corners and a gradient background”
3
Tell me the trigger + effect
❌ “Animate this” → ✅ “Fade this in when it scrolls into view with a 0.5s duration”
4
Use layout language I understand
❌ “Put things next to each other” → ✅ “Create a flex row with 3 cards, 20px gap, centered”
5
Reference experience styles by name
❌ “Make the text blue” → ✅ “Use the Primary color style” or “Link this to the Heading 1 text style”
6
Select elements before asking me to change them
If you select a component on the canvas first, I know exactly which element you mean. No guessing needed!
7
Describe the pattern, not the implementation
❌ “Create show-hide interactions between groups” → ✅ “Build tabs with 3 content panels” or “Build an FAQ accordion with 5 questions”
8
Iterate — don't start over
❌ Starting a new chat every time → ✅ "Make the heading bigger" or "Change that background to a gradient" — I remember our context!
☰
