Hello, Source

Last week at Webflow Conf, Webflow announced several new products – the largest of which is Source by Webflow — opens in a new tab. A new platform for builders and marketing teams and agents to work with websites.

This is going to be a big deal for marketing teams. But I come from a decade of experience building sites with Webflow – what does it mean for developers?

From the announcement post — opens in a new tab:

AI has made building easier. Anyone can ship a site through prompting, but building is only one part of the job. The hard part is what comes after: scaling what works, knowing what to change, and driving impact with every iteration.

I’m not going to philosophize over the tension between “this AI genie is the best thing that’s ever happened to me, also can we put it back into the bottle” (that can be another post, or series, or just my diary).

Instead, I’m going to use this to address some of the commentary I’ve seen:

But can I still build sites with Source?

Heck yeah.

My portfolio

This is Jonfolio V9. In the past, I’ve always created my portfolio sites when I’ve been interested in some new technology. The first being Webflow! Others being Spline, some random CSS properties I wanted to explore, and last year I used the brand new Claude Code and hosted on Webflow Cloud.

So building with Source just seemed natural.

Source

If you don’t know, I work at Webflow. My team was the first non-product team to get super early access to Source (and I think I was the first who successfully got it installed, making me very special).

The version I have now is essentially an alpha. Same version the current research preview group has. It’s grown significantly from when I first opened it, and there are some things that are working really well, and some things that are… well, it’s in alpha. And I get to give feedback directly to the folks building it!

This is actually the first site I’ve started from scratch in Source. Previously, I’d converted various Webflow sites to Astro, or to Next.js + Sanity, and started working on example use cases from there. The import process was smooth from day 1, mostly because there’s no real import – Source is local, and my codebase is local, so I just pick the repo in Finder, open it, and run it locally. The site opens in Source’s browser view.

I’ve done a lot of testing on building views, including this lil beauty:

But this is my first time starting a new site.

Building from scratch

Now, I’m not a designer. And I’m not technically talented enough to come up with all the particle fanciness on my own. But that’s what the agent is for! And, if Source is a new way of working on sites compared to the Designer, I wanted to lean into that.

I started a new session and used this prompt I stole from Anshu Chimala — opens in a new tab:

I want to come up with a bold, unique design language for my portfolio. Can you list as many ideas as you can, with short, high-level descriptions? Go broad, not deep.

It gave me 27 directions, and one of them was a particles/interaction-led direction. I honed in on that, gave it a few bullets about what I imagined that would look like (including the particle-ized images and transitions), and sent that back and asked for a starter prompt for a new agent.

Started a new session with that prompt, and a few minutes later had something honestly pretty close to what you see today!

I went through a few iteration prompts to iron out exactly how I wanted transitions to work, all with placeholder content. Then I put the repo of my existing portfolio in a folder and asked the agent to get all my content and images in.

From there, I took over to fix some of the AI-isms the agent had put in, manually editing text and adjusting some spacing.

Using different tools

Source got me a lot of the way there, and set all the foundations and interaction model and most of its code is still in the codebase.

I did end up switching to Codex for a few things where I just felt more comfortable with its particular strength in browser use for debugging, and creating a whole bunch of iterations for how exactly the particle treatment interacted with images.

The original version of the particle images were luminescence-based, which created a really cool lighting effect but took a very specific type of image. And on mobile, it took foreverrrrr to get image placement right so things weren’t overlapping with text.

For a while I was switching back and forth between Source and Codex, using them as part-partners, part-adversarial to review each other’s approaches.

What was really cool about that experience was just the ability to switch between tools – nothing new to vibe coders, but an entirely new concept for Webflow. Because my Astro site is a local codebase, I can work with it wherever I want, and everything’s reflected back in the preview in Source. And I can take advantage of the strengths of different tools and models.

Some fancy tricks

Miscellaneous things I’m pretty happy with – performance is pretty great. Lighthouse scores are tricky with this, because the loading is instant with all the content you need, interactive immediately, but the lighthouse performance score is kind of artificially low because of the load-in particle animation, which it treats as LCP. I’m ok with that for now.

OG images are all dynamically generated at build time, for both the homepage and blog posts, based on the title, intro content, and the featured image, using the same particle-ization. I’ve used OG image generation before, but it’s nice to have it part of the build step.

There’s also some niceties going on with type resizing, like the blog post H1, which will resize based on the length of the post. Keeps short headlines like this big and bold, while accounting for longer ones down the road.

For hosting, I’m on Webflow Cloud again. In the future, I’ll be able to deploy directly from Source to Cloud. For now, my Source access is through my official Webflow account, but my portfolio is on my personal account, so sticking with a normal GitHub-based deploy.

What’s next

Going back to what Ben Haefele wrote in the announcement post:

Anyone can ship a site through prompting

Check!

The hard part is what comes after

On it!

While I’m but a humble dev, without much need for SEO and user journeys and constant optimization and personalization and localization, I plan to keep building and testing.

There’s lots to explore with the malleable nature of Source, custom views, defining a brand system, and eventually agents.

I plan to use this site as my ongoing testing ground for everything that comes next.

Can’t wait for you to get your hands on Source!