How to Go From a Business URL to a Finished Landing Page in One Session (and What I Built to Automate It)
By Zaheer | Updated 10 October 2026
Disclosure: I created the ForgePage skill mentioned near the end of this post and sell it on Agensi. The process before that section works with or without it. The images in this post are illustrative mock-ups of the kind of output involved, not screenshots from a real client project.
Building a landing page for a small business usually goes wrong in the same way: someone opens a template, pastes in some copy, and the page ends up looking like every other one, with a vague headline, a stock gradient background and a call to action buried below the fold. The problem isn't the tools. It's skipping the thinking that comes before them. This post walks through a seven-step process for going from a business website, or even a one-paragraph brief, to a finished, deployed landing page in a single working session.
A procedural, non-figurative brand visual: the kind of code-generated artwork described in step 4.
The 7-step process
1. Write a brief from the source, then confirm it
Read the existing site (or your one-paragraph description) and write down what is actually there before you design anything:
- Industry and audience: who is this for?
- Real brand colours: taken from the existing logo or site, not invented.
- Services: the specific things the business sells.
- Trust signals: years in practice, qualifications, memberships, real results.
- Primary call to action: the single action the page should drive.
- Conversion leaks on the current site: for example, a call to action buried below the fold, or an abandoned-cart problem.
Then show the brief to the owner or client and get a yes before building. A confirmed brief stops you building a polished page on a misreading of the business.
An illustrative brief for an imaginary sustainable clothing brand, showing the fields to fill in and confirm before any building starts.
2. Give the page one job
A landing page isn't a mini website. Choose one action, such as booking a consultation or completing a purchase, and make everything point towards it. Repeat the same button text at the top, the middle and the bottom, and remove navigation that lets visitors wander away.
3. Write two headline angles
Draft one headline that builds trust ("Built on trust, delivered with care") and one that creates honest urgency ("Secure your account before time runs out", but only when the deadline is real). Keep both in the page, with one commented out in the code, so you can swap them and test which works better with real visitors. Avoid fake urgency such as invented deadlines or countdown timers that reset.
The same page with a trust headline and an urgency headline, each with its own subheading and button.
4. Build visuals from the brand, not from a default
You don't need an image generator to make a page look designed. Visuals can be generated in code, using SVG shapes and CSS gradients built from the client's actual colours. This is sometimes called procedural design. The risk is drifting into the same purple-to-blue gradient blobs that every AI-built page uses, so set rules in advance:
- Use only colours from the brand palette and tints of them.
- Change the shapes and layout between sections instead of repeating one pattern.
- Make sure text stays readable over every visual.
- Keep decorative shapes abstract, with no fake photos, people or logos.
Where a business really needs photographs (a restaurant, a hotel, a portrait photographer), use the owner's real photos. If you later want photoreal imagery from an AI tool, write the prompts separately and treat them as an optional upgrade, not a requirement for launch. My guide to writing reusable AI image prompts covers how.
An optional prompt list for adding photoreal images later: useful, but the page works without it.
5. Add motion sparingly and respect user settings
Motion should guide attention to the headline, the proof and the button. Choose the lightest method that works: CSS alone for simple fades and slides, or a library such as GSAP for more complex scroll effects. Whatever you pick, switch animation off for visitors who have asked their device to reduce motion:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
6. Add the SEO and accessibility basics
SEO scaffold:
- A unique page title (aim for about 60 characters or fewer) and meta description (about 150 to 160 characters).
- Open Graph and Twitter card tags so links preview well when shared.
- Structured data (JSON-LD) such as the LocalBusiness type, with the real name, address, phone and opening hours.
- A
sitemap.xmland arobots.txtfile.
Accessibility:
- Check colour contrast against the WCAG AA targets: at least 4.5:1 for normal text and 3:1 for large text.
- Write meaningful alt text for every image that carries information.
- Use one
h1and a logical order of headings. - Make sure every button and form field works with a keyboard and shows a visible focus outline.
7. Deploy, then verify
Static landing pages can be hosted on services such as Cloudflare Pages, Netlify, Vercel or GitHub Pages. After deploying, run through a short checklist before you hand the page to anyone:
A successful deployment: a live address and a completed push in the terminal.
| Check | What to look for |
|---|---|
| Links and buttons | Every link works; the main button goes to the right place |
| Forms | A test submission arrives, and the success message appears |
| Mobile | Text readable, buttons easy to tap, nothing overflowing the screen |
| Speed | Run Google PageSpeed Insights and fix the biggest items it flags |
| Claims | Every number, qualification and testimonial can be traced to the confirmed brief or a real source |
| Contrast and motion | Contrast checker passes; animation stops when reduced motion is on |
Common mistakes to avoid
- Building before confirming the brief. It is the cheapest step and the one that prevents the most rework.
- Inventing proof. Never make up testimonials, awards or statistics. A page with less proof that is true is better than one with more that isn't.
- Competing calls to action. Three different buttons split attention and lower the chance of any of them being used.
- Heavy animation on a slow page. If effects make the page feel slow on a phone, remove them.
- Skipping mobile testing. Most visitors to a local business page arrive on a phone.
Where my ForgePage skill fits
I run the same sequence often enough that I built a skill for it. ForgePage is a SKILL.md skill for AI coding agents such as Claude Code and Cursor, and any other tool that reads the open SKILL.md standard. You give your agent a business URL or a short brief, and the skill follows the process above:
- It reads the business and produces a brief for you to confirm before any copy or code is written.
- It writes a trust headline and an urgency headline for testing.
- It builds the page with procedural visuals based on the brand's colours, under written rules against the generic gradient-blob look, so no image-generation subscription is required.
- It adds an SEO scaffold (meta and social tags, JSON-LD, sitemap and robots.txt) and a WCAG AA accessibility pass, with a Lighthouse 90+ performance target.
- It includes five industry-tuned templates: legal, hospitality, real estate, fitness and SaaS.
- It deploys to Cloudflare Pages, Netlify, Vercel or GitHub Pages, whichever you choose.
- It offers optional cookie-free analytics (Plausible or Fathom) and optional upgrade prompts for AI imagery.
What it can and can't do
Procedural visuals are abstract and geometric, so they suit professional-services and similar businesses better than ones that sell on photography. The skill can only work with what the source site or brief tells it, so you still need to review the facts, the copy and the claims before the page goes live. The Lighthouse score is a target, not a guarantee, because real results depend on your content and host. You will also need your own account with whichever host you choose.
At the time of writing it is a one-time $5 purchase on Agensi. Check the listing for current terms.
Frequently asked questions
Do I need an image generator like Midjourney?
No. The process above uses code-based visuals by default. AI or real photography is optional, and the page works without it.
Can I start from a short description instead of a URL?
Yes. Write the brief by hand from what you know about the business, then have it confirmed in the same way.
Will the page invent testimonials or statistics?
It shouldn't, because the process only uses what is in the confirmed brief. Still, check every claim yourself before publishing.
Where can I learn more about why landing pages fail to convert?
See my 5-point diagnostic framework.
Comments
Post a Comment