I’m a designer.

I've always found the Figma to production process extremely frustrating (we've all seen the memes) and I've been looking for better ways to contribute to more code, and build my own projects.

I met a guy with the same frustrations on the development side (Sev), so we decided to partner and build a product that rei-magines the way we approach building front-end, developing UIs, and designing using code - all before injecting any AI into the product.

Speaking of AI….(elephant in the room), before thinking about injecting any into our product, we wanted to take careful consideration of how it could actually postively impact workflows in a way in which enables you to ship high-quality product.

And in our opinion -> prompting your way towards a higher quality interface ain't it.

So we asked the question, how can we provide customers with an editor that allows for them to build at AI-level speed, with a syntax that is super accessible to designers, developers and LLMs (build for the future right?)

As a result we built Layouts.dev, a notebook-style editor that's designed to be the fastest way to build interfaces using a custom HTML-shorthand and TailwindCSS.

Key areas of focus:

• A familiar syntax that's super accessible (byee html fluff)

• 100s of customizable prebuilt components

• Icon, image and illustration libraries.

• Superfast real-time preview of your build across devices.

• Sync with NextJS or one-click export to React/HTML.

• Copy and paste back into Figma.

We've been using it internally to build our entire product UI and it's been a game changer and we'd love to continue to build this together with a community.

Excited to hear your feedback and see what you build with Layouts.