Grazy

Grazy was born out of a personal frustration I experienced while working as a designer. I lacked the proper tools that would allow me to quickly test and iterate designs based on live HTML elements. Additionally, there were so many times I needed to reproduce live design elements without access to older sources, because the code was in production, but legacy.

At first, it started off as a simple way to play around with Claude Code. I wanted to see how viable it would be to build a tool that imports live HTML into Figma. Armed with a decent understanding of HTML and of Figma autolayout constraints, I started to put something together.

It was the Christmas holidays, 2025, and I had some time to myself, so I started fleshing out the core functionality: a browser extension and the Figma plugin that would be the backbone of Grazy. It took me a couple of days to get it into a working state.

The next week I started to think: what if I could also export code? I was working on my portfolio in parallel and thought how useful it would be to design bits in Figma and export the code to refine them. So I began working and got it to a decent state in a couple of days.

I played around with it and built support for more UI frameworks to see how viable it could be. Then it clicked: this is the type of product that bridges the gap between designers and developers. It can save developers time and enable designers to try coding themselves. At the very least, it helps people better understand how HTML works.

When it started, the UI was entirely hacked together using Claude Code. Lately I have used Grazy itself to extract HTML from its own interface, import it into Figma, and use it in my marketing materials.

Discovered use cases

Here are some of my favorite uses-cases I have discovered for Grazy so far while working with it:

• Export color and size tokens from the design system straight to production.
• Using Grazy to extract live UI for marketing materials. This is by far my favorite use-case so far.
• Using it to study how developers built interface elements I loved using.
• Quick prototyping. I exported figma components straight to code to create a quick HTML prototype for a new feature at work.
• By adding inline base64 image embedding, I also made it super viable as a tool for creating HTML newsletters and emails.
• Used it to reverse-engineer some older newsletters at work.
• Used it to extract some legacy HTML at work to refactor and bring up to date.

Marketing materials I designed

Plugin Covers design

Design for the plugin covers

Plugin ui evolution

Stages of the plugin UI evolution from early prototype stages to current production

Launching Grazy

After polishing it up a bit, I decided to launch it so others might betatest it and get some feedback. That's when it hit me that I could really have a decent product on my hands, with perspective users in both the design and development communities.

So I spun up a landing page, added some content, and launched it. I have been chipping away daily ever since, incrementally making it better and adding new features that could make it better.

Lessons learned

1. AI can be incredibly helpful in cutting down time from idea to prototype and production. But you need to have a very solid understanding of architecture, design patterns and principles to be able to efficiently guide it and get the most out of it.

2. A single person can still launch a full product that solves real problems for real users. But it will take much more time than it would for a team. Yet if you can efficiently leverage tools like Github Copilot and Claude Code, you can shorten that time.

3. Building the product and adding features is only half the battle. Marketing, community building and user engagmenet is the really difficult part of helping you lift it off the ground.

4. Starting off a product free, will be a good way to make it difficult to later monetize it. Consider starting with a paid plan from the get go, even if it's a small amount. That also validates the need.

5. Don't rely on friends to help you with feedback, help or opinions. They will either hype you or simply not care. Seek out real users as fast as you can.

6. Building anything that does not have AI inside will effectively put a brake on your products growth during this time, and make it considerabley less attractive for users. Even if your design is solid and built for efficiency and privacy. It's a much much tougher sell.

The plan is to continue working and refining it, while also working on:

1. Launch strategy - Currently working on this.

2. Monetization strategy - Completed. Preparing the legal paperwork and payment systems..

3. Licensing system - Needs to be built.

4. User acquisition and community building - Ongoing. Need to make some videos showcasing how fast it works.

Some of the features I am looking to add in the near future include:

• Improving and adding support for accessibility-first code generation
• Improving conversion accuracy for all platforms
• Adding support for more exotic frameworks like: Blazor
• Adding support for more frontend frameworks like: Svelte, Vue, Angular and ReactNative
• Add support for bundled components download.

I loved working and building this suite of products, mostly because it gives me a break from the usual design work while giving me the freedom to experiment, learn and explore new technologies and workflows. Plus I can always do real-world testing of my own theories related to product.