Bolt is one of the fastest ways to go from a prompt to a working app. Adding a Moon template to your Bolt workflow means the design baseline is already set before Bolt writes a single line of code.
Step 1: pick a section from Moon
Browse the Moon gallery and click any section you want to use. On the section detail page, click "Copy code." The full self-contained HTML snippet is now on your clipboard.
Step 2: paste into your Bolt prompt
Open Bolt at bolt.new. In the prompt field, start with a description of your product, then add a separator line and paste the Moon template. A prompt that works well looks like this:
Build a landing page for a time-tracking SaaS for freelancers. Use the hero section below as the top of the page. Swap the headline and subheadline for copy about time tracking. Keep all the design: the gradient, the fonts, the spacing.
[paste Moon template here]
Step 3: iterate with targeted follow-up prompts
Once Bolt generates the initial version, use short follow-up prompts to adjust specifics: "change the CTA button text to Start free trial" or "add a features section below the hero with three columns." Bolt makes surgical changes rather than regenerating everything, which keeps the Moon template design stable.
Sections that work best in Bolt
The hero sections, the navbar templates, and the footer sections are the highest-value Moon templates to use in Bolt. They are the hardest sections to get right from a blank prompt, and they set the visual tone for the entire product. Start with one of these and use Bolt to generate everything else around them. If you want to understand exactly why vibe coding tools produce generic output by default, and which six visual patterns to avoid, this article explains the mechanism.