Skip to main content

Documentation Index

Fetch the complete documentation index at: https://fabricate.build/docs/llms.txt

Use this file to discover all available pages before exploring further.

Words are great for describing behavior, but some things are far easier to show than to explain. Fabricate lets you attach images to your prompts and generate images for your app.

​
Upload images to guide the build

Drag and drop an image onto the prompt box, or attach it alongside your message. Fabricate looks at the image and uses it as context for what to build.
1

Attach the image

Drag a screenshot or mockup into the prompt box.
2

Describe what you want done with it

The image guides; your words direct. Pair them.
3

Send

Fabricate combines the visual reference with your instructions.
Always pair an image with text. An image alone is ambiguous — “build this layout but in dark mode” tells Fabricate exactly how to use the reference.

​
When images help most

Reference designs

Share a screenshot of a layout or style you like so your app starts closer to that look.

Mockups & wireframes

Turn a sketch or design-tool export into a working interface.

Bug reports

Screenshot a visual glitch in the preview so Fabricate sees exactly what’s wrong.

Content & data

Share a screenshot of a table or form to recreate its structure.

​
Example prompts with images

[mockup attached]
Build the dashboard to match this layout — three stat cards across the
top, a chart below, and a recent-activity list on the right.

[screenshot of preview attached]
The spacing between these cards is uneven. Make the gaps consistent
and align the cards to a grid.

[reference design attached]
Use this as a style reference — same color palette and rounded card
style — but keep my existing page structure.
Fabricate uses images as reference and direction, not pixel-perfect targets. It recreates the intent — layout, hierarchy, and style — in clean React and Tailwind code, not a literal copy.

​
Generate images for your app

Beyond reading images, Fabricate can create images for your app’s content — placeholder photos, illustrations, icons, hero graphics, and more. Just ask in a normal prompt: 
Generate a hero image for the landing page — a friendly illustration
of a team collaborating, in a flat style with soft colors.

Add placeholder product photos for the three featured items on the
home page.

Generate a set of simple illustrated icons for the three feature
cards — one for speed, one for security, one for support.
Generated images are added to your project and wired into the app automatically, so they show up in the preview right away.
Describe style, mood, and subject for generated images — “flat illustration, soft pastel colors, friendly” gives a much better result than “an image for the header.”

​
Tips for best results

Crisp, well-cropped images are easier to interpret. Crop out browser chrome or unrelated UI so Fabricate focuses on what matters.
If you have several inspiration images, introduce them across separate messages so each change stays focused and easy to review.
A reference design rarely matches your app exactly. Tell Fabricate which parts to adopt and which parts of your current app to leave alone.
The fastest way to fix a layout issue is to screenshot it from the live preview and attach it with a short description.

Design Fixes

Prompt patterns for layout, color, and typography.

Prompting Best Practices

Get more out of every message you send.