AI Code Components in @webflow are a huge unlock and they're remarkably different than the code gen you've seen before. Here are some of my favorite prompts and reasons why:

I’m designing in code on my phone through prompts while the baby naps. Wish I could share that with my 20 year old self who kept worrying over the question “should designers code?”

an IDE that shows you ads while your agent is spinning and the ads pay for the tokens

ᨒ Jelly Switch

I just wanna make hover interactions all day long.

🫨 When @webflow announced CSS function support back in June I was mostly excited about fluid sizing, and didn't actually consider it meant I could use one of my favorite color functions, light-dark(). Yes this can be achieved in Webflow's modes. Yes, I love Webflow modes and will still use them for color modes in most client work. But for my personal site and a few client sites I've done, the only two color modes I typically need are light and dark. So why not just rely on Webflow's modes for this? Well, css light-dark() does some cool things out of the box. Importantly, I prefer to hand as much UI-level control back to the user as possible—just as we do when we use rem units to respect their font-size preferences. This is the color scheme equivalent. 🌓 When you use light-dark() you’re building on top of the browser’s native color-scheme system, not re-implementing a theming engine yourself. The browser already knows how to detect the user’s OS theme (which if configured to switch by the user, does so at sunrise/sunset), it will animate the transition cleanly (and take motion preferences into account), and theme built-in UI (form controls, scrollbars, inputs). 🧹 Because this logic is baked into CSS itself, the JS you write for a toggle becomes incredibly small — you’re just overriding color-scheme on the root and storing a preference. With Webflow’s variable modes you’re effectively creating your own theme system: you have to manage two sets of tokens, read and write custom attributes, sync them with localStorage, listen for system preferences manually, etc. ⚠️ In order for this to work you need to set color-scheme: light dark; on either the :root in custom code or on the body via custom properties, which also enables you to override the default for specific components and sections (which I know is done often with Webflow's modes). I prefer the latter to keep it scoped sensibly, you can override the default for specific components if needed, and I also just prefer to keep as much of this stuff out of custom code embeds and visible directly in the designer via custom properties where possible (for easier debugging). Also pls ignore my sloppy variable names this is only how I set this stuff up for my personal work 😅 MDN → developer.mozilla.org/en-US/…