Ship a landing page in 30 seconds with Crade
A brief lands in your Notes app. Thirty seconds later, the landing page is open in your browser. Here is what to put in front of Crade, what to say, and the exact step-by-step from brief to live preview.
Ship a landing page in 30 seconds.
- •Boulder-based wholesale roaster, since 2019
- •Family business — Tom + Lisa Bennett
- •Specialty: single-origin + signature blends
- •Cafes (5lb+ wholesale bags)
- •Subscription boxes (12oz / month)
- •Pop-up booths at farmers markets
- •Warm · earthy · neighborhood
- •NOT corporate / Starbucks
- •Quality + family roots emphasis
- •Replace old Squarespace landing
- •Show wholesale + B2C side-by-side
- •Brand colors: warm amber + cream
Build a landing page from this brief.
✓ Read brief from Notes — Sundance Coffee Roasters ✓ Created sundance-coffee/ (Next.js 15) ✓ Generated 4 sections — Hero · Features · Pricing · CTA ✓ Applied palette amber #D2691E + cream #FDF6E3 ✓ Started dev server → localhost:3000 ✓ Opened in browser
The slowest part of a new landing page is rarely the build. It is the gap between reading the brief and starting to code: opening the editor, scaffolding the project, copying the boilerplate, deciding on the structure. By the time you have a blank Next.js page open, twenty minutes have passed and you have not written a real line of code. Crade collapses that gap into a single prompt by reading the brief on your screen and starting the project for you.
What you put on your screen
Crade reads whatever is on your screen at the moment you ask. For a landing page build, the source brief usually lives in one of these:
- A Notes app entry with the company name and a few feature bullets
- An email or DM from the client with the value proposition
- A Notion or Google Doc that sketches the sections
- A Figma file with rough wireframes
- A competitor's site you want to riff on
The brief does not have to be polished. A short paragraph with the brand name and three feature ideas is enough. Crade fills in the rest with sensible defaults.
What you say to Crade
Open Crade and type one sentence. Something this short works:
If you want a specific framework, palette, or hero copy, fold it into the same sentence. Crade defaults to Next.js, Tailwind, and a clean modern palette unless you say otherwise.
Step-by-step: how to do this in Crade
The full loop, from reading the brief to seeing the page live in your browser, takes about thirty seconds on a good network.
Open the brief on screen
Notes, Notion, an email, a Figma file, whatever holds the source brief. Just make sure it is the visible window when you prompt Crade.
Click the Crade icon
Expand the Crade window from the ∞ icon in the corner. Crade floats above other windows, so the brief stays visible behind it the whole time.
Type your build request
Click the "Ask anything about your screen…" input. One sentence is enough. Mention a framework or palette if you want a specific choice, otherwise Crade picks sensible defaults.
Watch the build run
On the Pro plan with Agent mode, Crade reads the brief, picks a name for the project folder, scaffolds the framework, writes the sections, applies the palette, and starts the dev server. Each step appears as a checkmark in the chat window so you can follow what is happening.
Preview opens automatically
Crade opens your default browser at the local dev URL once the build is ready. You see the live page in seconds, not minutes.
Iterate in plain English
If something is off, do not edit code. Reply in the same Crade window: "swap the green for a warmer amber", "add a pricing section with two tiers", "shorten the hero copy". Crade edits the files and the browser hot-reloads.
What you get back
A working local site at localhost:3000, with a hero, the sections from the brief, a footer, and matching styling. The project folder lives on your Desktop unless you specify otherwise, named after the brand in the brief.
Crade uses the brand details from your screen: name, value proposition, feature list, any palette hints. If the brief mentioned "single-origin coffee, Boulder, weekly small-batch roasts", the page reads like a coffee roaster's, not generic SaaS boilerplate.
Tips for better builds
- Name your project folder in the prompt if you want a specific name, like "call the folder sundance-coffee". Otherwise Crade infers from the brief.
- Mention the framework if you have a preference. "Use Astro" or "Use vanilla HTML" overrides the Next.js default.
- If you want a specific look, paste a hex code or describe a vibe: "amber and cream like a coffee shop" works as well as "#D2691E and #FDF6E3".
- Iterate one change at a time. Crade is faster and more accurate when you say "swap the green for amber" than "redesign the hero, change the colors, and add testimonials".
- Keep the brief visible on screen during iterations. Crade re-reads it each turn, so updates to the brief carry into the next change.
Free vs Pro vs Premium
This use case needs Agent mode, which means Pro or Premium. The Free plan can still answer questions about a brief, but it will not write files or start a dev server.
- Free ($0): Crade reads the brief and replies with structure suggestions or copy in the chat window. No file writing, no dev server. Good for planning, not for shipping.
- Pro ($7.99/mo or $49.99/yr): Agent mode unlocked. Crade scaffolds the project, writes the files, runs the dev server, opens the browser. Higher daily usage. The right tier for active builders.
- Premium ($19.99/mo or $149.99/yr): 10x more daily usage than Pro, same Agent mode. The right tier for studios who scaffold several sites a day.
Frequently asked questions
Can Crade actually run a dev server on my machine?
Yes, on Pro Agent mode. Crade has shell access through the built-in tools and can run npm install, npm run dev, or any equivalent command for the framework you pick. The dev server runs in your local environment, not in the cloud.
Where does the project folder end up?
By default on your Desktop, named after the brand or topic in the brief. You can override the location in the prompt: "Put the folder in ~/Code/clients/" or similar. Crade respects whatever path you give it.
What if I do not have Node.js installed?
Crade tries to detect it first. If Node is missing, the chat will say so and stop, rather than fail halfway through. You install Node yourself (Crade does not auto-install system tools), then re-run the same prompt.
Can I use a framework Crade does not default to?
Yes. Say it explicitly in the prompt: "Build a SvelteKit landing page", "Use vanilla HTML and CSS, no framework", "Use Astro". Crade follows your spec instead of the default.
Does the generated code go to production as-is?
Treat it as a starting point, not a final ship. The output is structured and reasonable, but for production you will want to swap real copy, add real images, configure your hosting, and review for accessibility. Crade gets you to "working preview" in 30 seconds, not "shipped to paying customers".
The whole loop in one sentence
Brief in Notes, one prompt in Crade, browser opens at localhost:3000 with the page already built. From idea to working preview in the time it takes to refill your coffee.
Build red. Stack trace. Module not found. Type mismatch. Crade reads your editor, terminal, and error output on screen and tells you exactly what is wrong and how to fix it.
Crade reads your database schema on screen and gives you the exact SQL for what you actually want, in PostgreSQL, MySQL, BigQuery, or whatever you are running.
Crade reads the code on your screen and flags bugs, security issues, performance problems, and style nits. Use it before you push, or as a second pair of eyes on a PR.