About the project

🤔 What is it?

Compendi is an AI tool that focuses on fixing one of the biggest issues in UX/UI generation by agents: inconsistency. This tool offers a way of storing styles as design tokens and component rules, being able to replicate them perfectly with no deviance. This tool also offers different protocols, focused on replicating existing designs (Apostle) and creating new ones from the ground up (Messiah), both allowing the user to save and replicate ad nauseam.

🧠 Rationale

Modernity and the advent of AI are coming for every single digital work niche, and embracing it is inevitable, one way or another. As for UX/UI, tools like Google AI Studio and others, breach the gap between non-UI-savy users and what they need for creating some interfaces. Unfortunately, just like any usage of AI, mainly in the hands of non-specialists, results tend to be inconsistent, as the models are ever-evolving, and prompts can be interpreted differently at all times. That being said, design consistency is almost unreachable. Now I ask you, what if this was not the norm? What if UI styles created by agents could be stored and replicated? What if UX good practices were the norm right off the bat? This is where my personal AI project comes in!

🎯 The challenge

• Find ways of storing design variables for future usage by AI agents;

• Ensuring AI agents won't face hallucinations ever again when producing UI;

• Make sure that UX principles are being accounted for during agentic work;

• Create protocols and tools that help the user to generate their own styles;

Developing the idea

🌩️ Brainstorming

When working with AI agents, the better you know what to ask for, the better the results you are getting! Since this tool we're creating is meant to lie within a .MD file, our biggest work will be around prompt-engineering. Before we begin with that part, we needed to figure out exactly what we wanted this tool to feature, and with that, a few key points came up:

• Style catalogue: The styles saved by this tool need to be displayed in a concise manner. For users, it's not about the tokens created and stored, it's about the usage of them in a quick and effective manner. For this, the tool was programmed to greet the user and offer them the ability to create something using one of the many styles saved inside the tool;

• Protocol Apostle: The idea of a protocol inside this tool that could create a style entry based on an already existing interface provided by the user was the first sub-tool conceptualized. With this one, the user could choose a level of fidelity, choosing between providing a screenshot, a URL, :root css, or even component code to achieve a copy of the given example.

• Protocol Messiah: The second sub-tool created focused on leveraging the full power of agentic UI creation. This one had a pretty traditional usage, where the user offers prompts on what they wish to create style-wise, and the agent delivers options and results, delivering a similar approach to tools like Google AI studios or Claude Code.

• Self-expanding: When creating new styles using this tool, the natural flow would be for these to be saved so they can be re-utilized later, and this is exactly what I did! When creating new styles, and upon allowing the tool to do so, these get automatically added into the file for later use;

Understanding the user

👤 Using personas

Now with a solid idea obtained by brainstorming a bit, we were ready for the refinement step: creating our persona! As a quick reminder, personas are vital for understanding who's your target user, and what pain-points you will be resolving for them. Your ideas and concepts brought up on the previous stages of research will be tested!

👨‍💻 Lucas, 24 years (Vibe coder)

"Yo, I love these AI tools so much; they give me such power that I would've never obtained before! My code is clean and optimized, my files are state-of-the-art level, now I only need some good UX/UI to launch my product… Been trying my hand at Claude Code and Google AI Studios, but I haven't been getting quite the polished result I've been seeking. It's just more and more soulless AI slop; everything looks the same even if I use different prompts. I wish there was a tool specialized in these that could actually help me to create some designs for interfaces and then scale them, because getting something decent and then not being able to replicate it again is also a problem I'm facing… Oh, well."

💭 Motivations

• Wants a tool that can offer consistent UX/UI design;

• Wants to have scalability on their interfaces created;

• Wants to leave the "boring" parts in the hands of a professional;

💔 Pain points

• Keeps getting soulless and repetitive designs from agentic UI models;

• Can't build anything from the ground up because consistency is not an option;

• Is tired of having models hallucinating on them when creating interfaces;

Defining the user flow

📖 User stories

After understanding our persona, we created the user stories, which is the final step to tying our new functionality proposals with our end-user needs. Some examples below:

• UI Catalogue: "As a user, I would love to just choose a system style that I like, almost like in a menu, and use it ad nauseam for my projects";

• Protocol Apostle: "I would love to be able to almost perfectly clone another style that I found somewhere; this can be really useful!";

• Protocol Messiah: "As a user, if I'm already using prompts to generate UI, I might as well do it on a tool that allows me to save and replicate them with perfection";

• Intuitive usage: "I like this idea of being guided through creating new styles! This way I don't need much expertise myself!";

🫚 User flow

Having all of these done, we created our definitive user flow! This design spec. shows a simplified view on how we expect the user to interact with the functionalities proposed:

🔗 Compendi Flow

Bringing compendi to life

✏️ Work methodology

Our workflow for this one was quite intuitive, as it based itself in:

• Starting small: I started by creating some simple UI elements and details in the form of rough tokens, and started to see how well agents could apply it;

• Creating golden rules: For every flaw or unexpected result we got, another rule was set to ensure these wouldn't happen again;

• Upgrading the semantics: As the project progressed, the agents demonstrated interest in more advanced semantics, so they could achieve better results while using less of their cognitive capabilities;

• Defining components: To better ensure the tool understood the assignment, technical and functional details were added for most of all commonly used interface elements, to ensure the agents had their bread and butter!

• Making it scalable: The more our structure grew, the more our focus also went towards ensuring the growth of the tool was oriented towards the future addition of protocols and such;

• Adding the first protocols: With a solid base replicable design system, adding the tools that would allow the users to create more entries was the next step;

• Refining rules: For both protocols and base replication functionalities, rule refinement was key, as slowly we got the chance to remove more restrictive rules, adding more space for agentic greatness;

• Optimizing everything: With our results looking better and better, the final step was optimizing everything, both on processes and semantics, to ensure this tool was as solid as it should be;

• Testing: With everything working, this tool was deployed on multiple agents, platforms and work environments, successfully refactoring entire interfaces, creating new designs, and storing them as intended for future usage;

The results

Normally, I'd do a list showing all the results, but in this case, I'd like to invite you to test it out yourself! Yes, I'm making this open source so anyone who visits this portfolio can have access to it!

👁️ The Compendi:

Here's the 🔗 link for the GitHub page where you can obtain and review the file!

🛠️ How to use it:

1. Download the .md file or copy the content of compendi_v1.0.1.md.

2. Paste the file into your project's folder or the contents in your AI's "Custom Instructions" as text.

3. That's it. The Architect is now active, and you can refer the file on a prompt to use it!

The outcome

With the completion of this project, Compendi was created and released, delivering all the tools needed to create solid design styles in an era of AI-powered UI.

If you like this project, or even got some ideas for improvements, let me know in our soon-to-be scheduled interview ;)