Genstyl — Design System tool | AI demo
https://genstyl.ovidiu.works/?utm_sou...
“Claude, I’m going to give you the keys to the Lamborghini!”
(comment below if you know the reference! 😆)
TL;DR
It took a whole week, but I’m very happy with the results: I implemented an MCP layer for Genstyl, my design system app, and let Claude take it for a spin! Needless to say, I’m shocked by the results! Check the video, and/or continue reading to find out more!
For years I’ve intentionally done something: I’ve been avoiding looking up website builders or similar tools for one simple reason—to not get discouraged by what is already out there. Why? Because I wanted to build it without the fear of it being irrelevant (that’s survival mode, not creative).
Boy, did things change in the industry. 😅 Recently, I announced Genstyl’s website and got an amazing response from people who know me personally; but I’m not going to lie, my target audience was nowhere to be found: they’re way too busy either (understandably) fighting against AI on social media or (also understandably) already having fun using it to optimise their workflows.
The question in my mind: Is Genstyl still useful or dead on arrival? Tough thing to ponder on when you’ve spent so much time dreaming about it and then some more designing and building it!
Inspired and, honestly, a little bit pushed by what’s going on with AI in the design space, I’ve allocated myself a week to test the waters. The start was rough and discouraging, but the more features I placed at Claude’s digital finger tips, the more I realised this can totally work! And now after only seven days, I’m quite shocked how great this works!
I’m going to write more techy, in-depth things at a later time, but here are my top learnings after my very first week working with AI integration in an existing software. Let’s go!
“Claude, let me teach you Genstyl Speech” 🙊
This was the big time saver, my app was already built to listen to instructions (commands) and implementing the mapping between the LLM and Genstyl was almost trivial. The UI was already speaking the language (DSL), the LLM had zero issues picking it up. Architecture matters.
“Claude, this is […] and here’s when you use it.” 🔨
Adding annotations to everything the AI needs to use is like embedding instructions for another real person into your software. It felt weird to write these “comments” as if someone else was going to read them, but after the LLM connects to your MCP service it goes: “I know kung fu”, and I had to reply “Show me!”
“Claude, this is all you get!” 🧰
Constraints are great! Just like they help humans to focus, get creative and not get paralysed by too many options, they also help the LLM decide what to use and when. Genstyl’s whole philosophy is to reduce the number of choices and focus on the end result, visually. Communicating in primitives (aka tokens) is the key to maintaining consistency, but we all know how important the “design system” is.
“Claude, how can I make your life easier?” 🤬
Really! I asked the LLM to give me feedback on the bottlenecks for the tools I provided. It felt like talking to a frustrated coworker who had to jump through hoops constantly to get their work done. I designed the app for a human to use, of course it got frustrated not being able to do operations in batches! But really, have a conversation with you LLM, ask it to print out the issues ordered from most painful to less painful and you have a solid list of things to work on next.
#designtools #designtocode #typography #frontenddevelopment #websitebuilders #ai #llm