How to build a creative studio landing page with Bolt

Rule of thumb: if the site is a formality (somewhere to send people who already know you, updated twice a year) rent one and spend the time on the work instead. If your site is how you get hired, if the reel is long or in more than one cut, or if you can already name the thing you want that a builder will not let you do, that is the case for owning it. The tell is whether you have ever described your own site as "fine".

* Two honest ways to make a contact form reach you, and both start free. A hosted form endpoint is the no-server route: Basin’s free tier covers one endpoint and 50 submissions a month with basic spam filtering, and its own page notes that filtered spam does not count against that allowance. Paid plans start at $12.50/mo billed yearly for 250 submissions. If you would rather own the whole path, one small function of your own plus an email service does it. Resend sends 3,000 emails a month free, capped at 100 a day. A studio fielding a few inquiries a week fits inside either free tier indefinitely.

Either way the page is yours, and nothing about it is metered: not the length of your reel, not the number of projects on it, not how many people are allowed to edit it. The difference is who does the work: pay someone up front, or describe what you want and build it yourself.

Prices and rates from usebasin.com, resend.com, developex.com and bolt.new, checked August 2026.

The GitHub step comes before Bolt exists for you at all. Nothing after it gets installed, and the only outside service in the whole build is wherever the form sends to.

1. 01

   A repository first, then the project

   Bolt has no upload button, so the code needs a home before Bolt can open it. Once imported, the first prompt is worth spending on the theme rather than on a section.

   PromptSet up the projectCopy

   This is a single-page marketing site for a creative video studio, with no backend at all (no database, no authentication, no stored data) so please do not connect one or offer to. If you ask me for environment variables on import, there are none. Start with the theme and nothing else: one file that defines a near-black ground, a light foreground, a single muted grey for secondary text, and two accents. A display face for headings and something ordinary for body copy. Then show me an empty page with only the fixed nav on it, so the palette is approved before any section depends on it.

   Bolt asks for secrets on some imports. This project has none, and leaving them blank is correct rather than a step skipped.

2. 02

   Plan the whole page, then build it plain

   Talk the structure through in Plan Mode before Bolt writes anything. It is the cheapest conversation you will have with it, and structure is what every later prompt sits on top of.

   PromptLay out the pageCopy

   Use Plan Mode for this one before writing any code. I want the page as full-width stacked sections in this order: hero, featured work, awards, about, services, team, contact, footer, each with an id so the nav scrolls to it, and the nav collapsing to a hamburger on small screens. Tell me your plan for the section components and the shared layout first. Then build it deliberately plain: real headings, placeholder paragraphs, grey blocks where images and video will go. I want to scroll it in the preview and settle the order before anything is styled.

   Planning first is also the cheapest way to keep this build inside its token budget, since a structural rewrite later means reloading and rewriting everything.

3. 03

   The hero, in its own context

   Clear the context before this one. The hero is the page’s heaviest and most-viewed section, and it deserves Bolt’s full attention rather than sharing it with seven sections of placeholder text.

   PromptBuild the heroCopy

   Clear the context first, then build only the hero. A full-screen background video (muted, looping, autoplaying) under a dark overlay so text on top stays legible over any frame, with a still image standing in until playback can actually begin. Above that: a headline, a supporting line, one button. The nav is transparent while I am at the top of the page and takes a solid background once I have scrolled about 50px. And handle the reduced-motion case properly rather than as an afterthought: no video at all for those visitors, the still instead, nothing else moved. Put a placeholder file in the public folder and tell me where mine goes.

   Watch the preview, not a screenshot of it. Autoplay behaviour is one of the things that differs between a mock-up and a running page.

4. 04

   Four sections, then clear the context again

   Work, awards, services and team share a shape, so they belong in one prompt with one shared reveal animation. When they are done, clear the context before the form. Nothing in the form needs to know about the awards wall.

   PromptBuild the work and proof sectionsCopy

   Point this at the four section files rather than the whole project. Featured work: one large video, with the project name, the client, and a short write-up alongside, put together so an embed and a file of my own can be swapped without touching the layout. Awards: a responsive wall of laurels, each award’s name and year as text rather than baked into an image. Services: one card each, carrying a name, a sentence, and space for a from-price. Team: photographs in a grid, each with a name, a role, and one line. Then a single shared reveal component (a short fade and rise on entering the viewport, off entirely under reduced motion) used by all four, rather than four animations that will drift apart.

   Point the prompt at the four section files rather than the project, and it costs a fraction of what a whole-project pass would.

5. 05

   The form, with its destination in secrets

   The one place this build touches the outside world. A public form endpoint URL is not really a secret, but the habit of putting configuration in Bolt’s secrets rather than pasting it into the chat is the one worth keeping for whatever you add next.

   PromptBuild the form and connect itCopy

   Build the contact form (name, email, what they want made, a message) checked before it submits, with inline errors that name the actual problem. It posts to a hosted form endpoint, and I will put that URL in the secrets settings rather than pasting it here, so read it from there. Treat a failed send as carefully as a successful one, and leave a confirmation on the page long enough to be read. Add a hidden honeypot field and drop any submission that fills it. Do not add a database. If any part of this would need a real secret inside code the browser downloads, stop and say so rather than doing it.

   Submit the form yourself and check your inbox. A confirmation message on screen only proves the request left the page.

6. 06
   Destination

   Three passes, one context at a time, then publish

   Three passes on weight, contrast and sharing, then Bolt publishes it. The GitHub repository has been keeping up on its own throughout, so there is already a copy of everything outside the tab.

   PromptTune itCopy

   Three passes, one at a time, and clear the context between them. Each only needs the files it touches. Pass one, weight: give me a table of every image and video with its size, re-encode the stills to a modern format at display dimensions, hold back anything not visible on arrival, leave the hero as the single eager load, and if the video itself is the problem say so rather than optimising around it. Pass two, contrast and keyboard: every text colour checked against its background on this dark palette, focus rings left visible, the tab order walked end to end, and the reduced-motion version confirmed complete. Pass three, the shared link: title, description, and an Open Graph image so a pasted URL renders as a card.

   PromptPublish itCopy

   Publish the site and tell me what my options are (Bolt’s own hosting by default, or Netlify if I would rather manage the domain there) then how to connect my own domain either way. After that, tell me what to check on the published URL rather than in the preview, starting with opening it on a phone with wi-fi off and timing how long the hero takes. Finish with what to improve next in priority order.

   Check the automatic commits in GitHub once before you finish. They are the only copy of this page that does not depend on the tab.

Read this project the way a stranger reading its published files would. List every value that ends up in the built bundle and should not be public: keys, tokens, private URLs, anything left in a comment. Then list every request the finished page makes to a third party, what each one sends, and any cookie it sets. Finally, tell me what the contact form does with a submission, where that submission ends up, and what currently stops a bot filling it in a thousand times.

The one rule that matters: a static site has no secrets: if a value is in the project, treat it as published. Anything that must stay private belongs behind a function on a server, not in the page.

Any of these will serve the page. Two things to check rather than assume: whether the free tier permits commercial use, and what its bandwidth allowance is. A hero video changes that arithmetic completely, and a page that goes mildly viral is exactly when you find out. Read the plan terms for the host you pick, not just the headline price.

Neither of the first two stores anything you would call a database. They move a message from your page to your inbox, and that is the whole of this build’s server side.

Add a single serverless function to this project (the smallest one my host supports) that reads an AI provider key from an environment variable, accepts a short JSON request, calls the model, and returns the text. Do not let the key reach the browser bundle, keep the function to one file, and show me how to set that environment variable on my host rather than in the repository.

When the contact form is submitted, send the message text through the ai function and have it return a short structured summary: the deliverable, the timeline, any budget mentioned, and any references named, with "not stated" where the message does not say. Include that summary above the original message in whatever reaches my inbox, and never in place of it.

Go through every image and video on the page and draft alt text for each one (what is actually in the frame, in a sentence, not the file name) plus a caption track for any video that has speech. Put them in a single list I can edit before you write any of it into the code, since I know what the work is and you are guessing.

Read the whole page, then write five alternative versions of the hero headline and its supporting line: same claim, different emphasis: one leading on the craft, one on the outcome for the client, one on the kind of work we want more of, one shorter than everything else, one that names our niche outright. Keep each under twelve words and match the voice already on the page.

Pick a lighter model for the high-volume prompts above and save a stronger one for wherever the reasoning actually matters. That is the same token-budget logic as the rest of this page, applied to the app’s own AI calls instead of the build itself. When Bolt flags a missing secret, add the key through its secrets settings instead of pasting it into the chat, and keep every AI feature behind one server-side function so there’s only one key to manage.