Vibe Coding with AI: Building a Production Landing Page in Under an Hour

A workshop I didn't follow to the letter

Saturday, March 28, 2026: the second Cursor workshop in Quito. The plan was simple. The instructor would hand out prompts, everyone would build a landing page with Cursor, and each attendee got $20 in credits to play with.

The thing is, I already have a landing page (listerineh.dev). So instead of following the script, I ran an experiment. I don't even use Cursor day to day (I'm a Windsurf person), but with $20 in credits and a hypothesis, I set out to build the Cursor Quito landing page to test one idea: vibe coding with a plan behind it can get professional results faster and cheaper than the usual way.

The idea: AI as the architect, not just the typist

Most people use these tools with one prompt: "build me a landing page". The AI writes something, you iterate, and after fifty-odd prompts and a lot of manual cleanup you might have something decent.

I wanted to try something else: use Gemini as the architect and prompt designer, and Cursor in auto mode, guided by custom skills, to execute. Concretely:

1. Plan with Gemini: architecture, design system, content and SEO, all decided upfront.
2. Write custom skills: seven of them, to steer how Cursor behaves.
3. Execute with few prompts: eight in total, each written carefully.
4. Deploy and polish: ship to Vercel and fix by hand only what's needed.

The real question was whether technical knowledge plus a bit of AI orchestration could produce something professional in under an hour.

Seven skills, eight prompts

The skills lived in .agents/skills/, and each one shaped a different part of what Cursor did:

1. Frontend: award-site composition, no cards, typography first, full-bleed hero.
2. Community experience: a Quito identity, a builder-to-builder tone, local coordinates.
3. Technical SEO: meta tags, structured data, performance, semantic HTML.
4. Creative coding: Three.js, particle systems at 60fps, atmospheric 3D.
5. Tailwind: no external CSS, utility-first, no component libraries.
6. Motion: Framer Motion, scroll-linked effects, smooth transitions.
7. Project architecture: clean folders, TypeScript interfaces, tidy imports.

Gemini helped me write them, but they weren't documentation. They were constraints, rules that kept the AI focused on quality instead of volume.

The prompts were numbered files, 01-init.md to 08-architecture.md: project setup and the visual concept, the "Product Engineer" manifesto section, the community activity log, environment variables, SEO, performance, resources, and a final architecture cleanup. Gemini designed them so each one built on the previous. No going back, no "let's try something else". Just one after another.

The look: brutalist minimalism, Andes edition

The visual direction came from the first prompt, under the name "The Pulse of the Digital Andes": brutalist minimalism, a near-black background (#050505), volcanic neon accents and some glassmorphism. In practice:

• no cards, just layout, columns, dividers and whitespace
• huge headlines at clamp(3rem, 10vw, 8rem) with tight tracking
• a Three.js "neural field", a particle system that reacts to the mouse, standing in for Quito's tech community
• monospace details, like the coordinates (0° 13' 0" S / 78° 31' 0" W) in 10px
• a terminal-style activity log with timestamps and status badges

It ended up feeling more like a living system than a static page.

Where I disagree with the workshop

The workshop's message was that you don't need to be technical to build a landing page with AI. I think that's half true.

You can generate a landing page with AI, no doubt. Making it professional, fast and polished is another story, and that's where knowing what you're doing shows up.

First, to steer it. I knew I wanted React Three Fiber and not raw Three.js, Framer Motion and not CSS transitions, Tailwind utilities and not custom stylesheets, real TypeScript interfaces and not any everywhere. Without that, you take whatever the AI gives you and hope.

Second, to design the plan. The seven skills weren't random. They came from years of frontend work, from understanding design systems and component architecture, SEO and web performance, and from knowing tools like Next.js, Vercel and TypeScript. Gemini helped me put that knowledge into words. It couldn't have come up with it on its own.

Third, to catch the mistakes. AI code has its quirks: hover states that don't work on mobile, spacing that breaks at some breakpoint, a Three.js scene that's heavier than it should be, contrast problems. I fixed them quickly because I knew where to look. Someone without that background would ship them and never notice.

The numbers

• Time: under an hour from the first prompt to the Vercel deploy.
• Cost: less than half of the $20 in credits.
• Prompts: eight.
• Manual fixes: about ten minutes, mostly hover states and spacing.

The biggest surprise was Three.js. I asked for a particle system that reacts to the mouse and got a smooth 60fps result on the first try. The neural field genuinely looks expensive.

You can see it at cursor-quito.vercel.app, and the code is at github.com/listerineh/cursor_workshop.

Vibe coding with a plan vs. without one

The workshop showed that AI can build websites. My experiment was about what happens when you add structure and experience on top:

The takeaway for me: AI is incredibly powerful when you know how to direct it, and directing it takes knowledge.

AI makes building accessible, not expertise

The optimistic version is "anyone can build a website now". My version is "anyone can generate code now, and building something good still takes knowing what you're doing".

Cursor, Windsurf and the rest multiply what you already know. They let experienced developers move faster, try more things and spend their time on decisions instead of syntax. They don't replace design sense, performance awareness, accessibility, UX intuition or the ability to debug. You can vibe code your way to a landing page. Making it fast, good-looking, accessible and maintainable still needs someone who knows the craft.

If you want to try this workflow

1. Plan with an AI as architect (Gemini, Claude, GPT). Have it define the visual concept, the content, the component structure and the skills for your coding AI.
2. Write the skills. Design principles, code standards, performance requirements, accessibility rules. They become your coding AI's personality.
3. Write sequential prompts. Each with one clear goal, building on the previous one and referencing the skills.
4. Run it in auto mode and let the skills do their job.
5. Polish by hand what AI usually gets wrong: hover states, responsive spacing, performance edge cases, visual details.

What I took away

We're at a point where AI turns plain language into working code, and that's amazing. But the interesting part isn't prompting at random. It's designing the prompts, setting the constraints and refining the result. Vibe coding isn't about writing less code, it's about iterating faster with a better sense of direction. And that direction still comes from you.

If you want to dig into it, everything is public: the live site, the source code, the 8 prompts and the 7 skills.