This year is all about vibing and no, not just in the beach sense. AI is transforming how we write code, how we learn new tools, and how we think about building things on the web. In this post, I’ll walk you through how I built my first landing page with Windsurf AI, using Astro, deployed via Cloudflare Workers. I’ll share what worked, what didn’t, and how I’d approach things next time.
We’re organizing an online hack event this summer called Vibe Summer: a month-long async coding series with a different weekly “vibe” challenge. Naturally, we needed a landing page. What better way to build it than by vibe coding it?
Vibe Coding vs. AI-Assisted Programming
Let’s define some terms:
Vibe coding: Letting AI tools generate code freely, with minimal oversight. Pure vibes.
AI-assisted programming: Collaborating with AI more intentionally and breaking down problems into smaller chunks, prompting iteratively, and understanding what’s going on under the hood.
For this project, I leaned into the latter. While vibe coding is fun for rapid prototyping, when building something that will be shared publicly (and later extended), I prefer more control. I enjoy being in charge of the project structure.
The Tech Stack
We're partnering with Cloudflare for the hack event, so hosting the landing page on Cloudflare was a no-brainer. Since Cloudflare recommends using Cloudflare Workers for new projects instead of Cloudflare Pages, I opted for Cloudflare Workers.
Cloudflare Workers support static assets. This allows you to deploy both static and dynamic pages. Static assets such as HTML, CSS, JavaScript, and images can be bundled and served directly from the edge with low latency. Cloudflare Workers support multiple frameworks and have templates for them.
For the frontend, I chose Astro: a modern web framework I was already familiar with from previous projects at Fiberplane. It supports an island architecture, which is great for performance and interactive UI, and plays nicely with Workers.
Kickstarting with Templates
Rather than starting from scratch, I used starter templates to get up and running faster. Even in times of AI a starter template provides you with a clean project structure.
There are two relevant templates:
- Astro’s official landing page template
- Cloudflare’s basic helpful Astro template
I picked the latter. It's simpler, with fewer moving parts, which makes it ideal for a lightweight landing page.
pnpm create cloudflare@latest vibesummer-landing --framework=astro
cd vibesummer-landing
pnpm i
pnpm dev
pnpm run deploy
In hindsight, I also cloned the other template to inspect its elements and building blocks. The Cloudflare template was just slightly lighter, and it was easier to get a quick overview.
Pro tip: To guide your AI IDE (like Windsurf), set up a rules file. It helps contextualize your codebase and gives the AI better instructions on how to structure code and handle specific files or conventions. Disclaimer: I haven't set it up for my project.
Designing with AI
For the initial layout and design, I tried “vibing” with V0. I prompted it to create a first version:
i need a landing page for an online event called Vibe Summer. It should have dark and light mode, and have a similar styling ;like the Brat summer branding with neon green. We need to include logos for partners, a link to our discord and also announce each weekly challenge there
While the visual results weren’t great, it gave me a decent starting point and helped me think through the layout hierarchy:
I used the layouts to create astro components like a hero section and a section for rewards, challenges etc, and included them in my index.astro
import Layout from '../layouts/Layout.astro';
import Community from '../components/Community.astro';
import Hero from '../components/Hero.astro';
import Features from '../components/Features.astro';
import Challenges from '../components/Challenges.astro';
import Rewards from '../components/Rewards.astro';
---
<Layout>
<Hero />
<Features />
<Challenges />
<Rewards />
<Community />
</Layout>
Thankfully, we have a designer on the team who stepped in with actual design feedback: fonts, colors, spacing, and UI components.
CSS and Layout Iterations
Once I had the design inputs, I used Windsurf AI to implement styling and more advanced card layouts across the site in my Astro project. Unfortunately, I haven't saved my first prompts, and Windsurf only saves the 20 recent chat sessions per project...
Some CSS tasks (like basic spacing or flexbox) I could handle manually. However, for more complex styling or translating design specifications, I relied heavily on Windsurf’s suggestions.
One area where AI struggled: global styling. Windsurf kept duplicating styles across components instead of using a shared global.css. While a proper rules file for Windsurf might have solved this, it ended up leading me to explore the Astro docs on global styling and improve the AI-generated code and structure. Keeping me in the loop definitely helped me learning better about the tools and project structure.
Code Quality and AI Shortcomings
While AI was helpful, it wasn't perfect:
- No global styles: As mentioned, styles were duplicated unless manually refactored.
- No linting: Windsurf didn’t set up linting by default. I added it myself.
- Blind changes: AI can sometimes suggest changes without explaining trade-offs. It’s crucial to review everything.
The biggest takeaway? Understand what your AI tool is doing. Review changes, intervene when necessary, and don’t rely blindly on generated code.
Final Thoughts
Was this the perfect landing page? Definitely not. But that wasn’t the point. It was about learning, experimenting, and building something real with AI and gaining better intuition along the way.
The better you understand your tools/ codebase, the more effectively you can utilize AI as a true programming assistant. With surface-level knowledge, AI can help you hack things together. But with deeper understanding, it becomes a multiplier.
When learning new tech, resist the urge to accept AI suggestions blindly. Pause, inspect, read the docs, and loop back. That’s where the real growth happens.
If you’re curious to see the results here is the page:
https://vibesummer.honc.dev/
and also the code:
https://github.com/Nlea/vibesummer-landingpage
If you have any feedback, feel free to reach out on the socials :) And if this is of interest, try out vibing and learning with us during Vibe Summer :)
Top comments (0)