Agency Landing Page Design with AI Tools

Role: Product Designer Tools: Claude (Claude Design), Base44 Deliverable: A fully designed, live agency landing page Timeline: 3 hours

Overview This project explored a question I kept coming back to: how far can a designer get today by pairing an AI design tool with an AI app builder, without touching a traditional dev handoff at all? The answer turned out to be "all the way to a live page." I designed an agency landing page in Claude Design, then imported it directly into Base44 to turn the static design into a working, hosted site.

What would normally involve a design phase in Figma, a handoff document, and a developer sprint collapsed into a single continuous workflow between two tools that speak the same language. The Challenge

Agency landing pages are deceptively hard. They need to establish credibility in seconds, communicate a service offering without drowning the visitor in copy, and end with a conversion moment that doesn't feel pushy. The design also has to hold up on real devices with real content, which is exactly where static mockups usually fall apart.

The constraint I set for myself: no manual coding, no handoff docs. The design tool produces the artifact, and the builder consumes it directly.

I started in Claude Design by describing the page I wanted: the structure, the tone, and the sections an agency site needs hero, services, work highlights, social proof, and a contact CTA. Rather than pushing pixels, the work here was conversational. I iterated by describing what felt off ("the hero needs more breathing room," "the services section reads too corporate") and reviewing each revision as a rendered page, not a flat mockup.

Because Claude Design outputs a real HTML file rather than an image of a design, every iteration was already responsive and interactive. Hover states, spacing behavior, and typography scaling were all testable from the first draft, things that would take extra effort to prototype in a conventional design tool. 2. Importing into Base44

This is where the workflow gets interesting. Base44 can import a Claude Design directly from its share URL. One import step, and the design became the foundation of an actual Base44 app, no redlining, no rebuilding the layout by hand, no "the dev version looks slightly different" phase.

The import preserved the design faithfully, which meant the time I'd invested in refining spacing and hierarchy in Claude Design carried over instead of being thrown away at the handoff boundary.

3. Refining in Base44 With the design living inside Base44, refinement continued through the same conversational pattern: describing changes to the AI builder and reviewing the live result. This stage covered the functional layer, wiring up the contact form, tightening responsive behavior on smaller screens, and adjusting content that read differently in a live context than it did in the design.

The result is a live, hosted agency landing page that went from first prompt to published without a traditional development phase.

🔗 Preview Website Link

The more interesting outcome is the workflow itself. The design-to-development boundary, historically the most lossy, most frustrating part of shipping a website, simply wasn't there. The design file was the starting code, and the builder treated it as such.

The handoff is the bottleneck, and it's optional now. Most of the friction in shipping a marketing page isn't design or development, it's translation between them. A design tool that outputs real HTML, paired with a builder that imports it natively, removes the translation step entirely.

Conversational iteration favors judgment over production. Neither tool needed me to execute; both needed me to evaluate. The designer's job shifts from making the thing to knowing when the thing is right, which is arguably what the job always was.

Solo designers get leverage that used to require a team. As a freelancer, the ability to take a client from "we need a landing page" to a live URL in one continuous workflow changes what I can quote, and how fast.

Real artifacts beat mockups for client review. Sharing a responsive, interactive page instead of static frames changed the quality of feedback. Clients react to how something feels to use, not how it looks in a screenshot.