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.

Fabricate apps ship with a clean foundation — Tailwind and shadcn/ui — but the look should be yours. This page is a toolkit of prompts for refining your app’s design.
Design changes are visual, so use the live preview and its device-size toggle as you go. Make one change, look, then make the next.

​
Layout

Fix structure and arrangement — how elements sit on the page. 
Center the main content with a max width of around 1100px and add
generous padding on the left and right.

Convert the features section into a three-column grid with equal-width
cards.

Move the sidebar to the left and make the main content fill the
remaining space.

​
Spacing

Uneven or cramped spacing is the most common thing that makes an app feel unfinished. 
The spacing on the dashboard is inconsistent. Use a consistent spacing
scale — equal gaps between cards and even padding inside them.

Add more breathing room — increase vertical spacing between sections
on the home page.

The form fields are too cramped. Add consistent vertical spacing
between each field and its label.

​
Color

Set a palette that matches your brand or mood. 
Change the primary color to a deep indigo and use it consistently for
buttons, links, and active states.

Use a softer, warmer neutral palette instead of pure gray for
backgrounds and borders.

Add a dark mode and a toggle in the navbar to switch between light
and dark.
Ask for colors to be applied consistently across the app rather than page by page. That keeps buttons, links, and accents coherent everywhere.

​
Typography

Type sets the tone of the whole interface. 
Make the typography stronger — larger, bolder page headings and a
clear size difference between headings and body text.

Increase body text size slightly and add a bit more line height so
longer text is easier to read.

Use a clean, modern sans-serif for headings and keep body text
readable and understated.

​
Responsiveness

Make sure your app looks right on every screen. Use the preview’s device-size toggle to check. 
The board doesn't work on mobile — stack the columns vertically and
make cards full width on small screens.

Make the navbar collapse into a hamburger menu on screens narrower
than tablet size.

Tables overflow on mobile. Make them scroll horizontally inside a
container instead of breaking the layout.
Always check mobile after a layout change. A design that looks great on desktop can break on small screens — the device-size toggle catches this in seconds.

​
Use reference images

The fastest way to communicate a look is to show one. Drag a screenshot or mockup into the prompt box and describe how to use it. 
[reference design attached]
Restyle the landing page to match the style of this design — same
card style, color palette, and spacing — but keep my current content.
See Working with Images for more on guiding the AI visually.

​
A workflow for polishing design

1

Fix structure first

Get layout and spacing right before touching color and type.
2

Then set color and typography

Apply your palette and type scale consistently across the app.
3

Then check responsiveness

Toggle through device sizes and fix anything that breaks.
4

Polish the details

Refine hover states, transitions, and empty states last.
Stuck on direction? Switch to Discuss Mode and ask “how could this page look more polished?” — it’s free and helps you plan before you build.

Working with Images

Guide design changes with screenshots and mockups.

Common Errors

Fix build and runtime errors.