Hey writers,

Wireframing just got more designey. You can now turn your Google Docs wireframe into live code ✨

You'll find three design system UI kits in your Drive folder (under AI/Styles):

Cyberpunk: Dark futuristic with neon accents
Neobrutalist: Bold and functional with high contrast
Vaporwave: Retro-tech with gradients and chrome effects

They're HTML files built with Tailwind CSS, loaded with comments for AI to know how to design each section. Open them directly in a browser to explore, use them as inspiration, or simply flex upon designers/coders you work with.

To use:

Convert your wireframe to mock HTML via the Google Docs "Pipewriter" menu, or from the app (the round < > button thingy)
Grab the master prompt doc from the AI folder, edit if needed
Copy sections into your AI prompts for variations/conversions (or drop the whole file to your trusty LLM)

There's a tutorial video in the folder if you want to see it in action.

Also quietly launched a taste of webapp to come on pipewriter.io - a web editor that converts your writing to AI-friendly code (similar to what we do in Docs). Very early prototype, but feel free to play with it.

Let me know if you run into any issues.

— Ivan

P.S. These updates are included in your beta access. If you know any writers who'd find this useful, the $59 launch price is still active 🫶

0 comments