How a content system, AI and a Designer’s frustration became a production tool
I’m a Product Designer with no formal engineering background. But I had a workflow problem I couldn’t ignore. Every day I found myself jumping between Figma, AI tools, and documentation just to write UI content. Rather than accepting that friction, I wondered: What if the guidance came to me instead?
That question led me to build an internal AI-powered Figma plugin, and along the way, taught me more about software engineering than I ever expected.
The pain that started it all
As our organization grew and teams evolved, a small group of content designers suddenly had to support many product teams. Designers often had to wait days, and sometimes longer, for even a single line of UI copy to be reviewed.
The expertise was there, but it wasn’t available in the moment I needed it. At the same time, our content design team had built a structured repository of content guidance that AI systems could retrieve. It wasn’t just a repository of guidelines, it was codified expertise, designed to support AI-assisted content creation. But in practice, I couldn’t easily use that system in the moment I was designing.
To tap into the content system and produce UI content, I had to leave Figma, open M365 Copilot, paste a prompt that called the content system , write a prompt for my use case, and then bring the UI content output back into my design . It worked but it broke my flow everytime.
“I spend more time copy pasting rules in copilot than designing”
- Product designer, Security UX team“By the time content reviews come back, the sprint is over”
- Product designer, Security UX team
The gap wasn’t tapping into the content system, it was that it wasn’t activated in the context where I was working.
We already had the expertise, captured and structured. But until it showed up inside the tool I use everyday, it couldn’t fully scale. I didn’t need more guidance, I needed a way to access it directly in Figma.
What if the rules came to me?
The idea was simple: Select text in Figma, pick a product and a solution or select base rules and get instant content suggestions grounded in the team’s actual guidelines, without leaving the workspace.
Select Text → Pick a Product & solution → Add more context (optional) → AI generates three on-brand variants → Apply in one click
I wasn’t trying to replace content designers, I wanted to put their system to work in the exact moment a designer needs it, amplifying the investment the content team had already made.
Little did I know what I was signing up for..
I was about to face a series of challenges I never expected. Authentication, cloud infrastructure, model limitations, and enterprise security. Words I’d never used in a design review were suddenly becoming part of my daily vocabulary.
these were all the challenges that I encountered on my way and how I tackled them:
The duct-tape demo
The first version was held together with duct tape.For the first prototype, I worked from a local copy of the team’s guidance. It wasn’t elegant, but it was enough to validate whether the idea solved a real problem. I used a personal access token that used to get expired after every 7 days and had to be renewed. I demoed it to leadership and the response was positive. That scrappy prototype opened the door to everything that followed.
“A scrappy prototype opens doors. The first version was held together with duct tape. But it proved value, got buy-in, and secured funding.”
From demo to production
The prototype worked on my laptop, but that wasn’t enough if other designers were going to rely on it. Turning it into an internal tool meant learning cloud infrastructure, authentication, deployment, monitoring, and making a business case for the resources needed to support it. What started as a design experiment was quickly becoming a software product.
I gradually evolved the prototype into a cloud-hosted architecture using Azure services for compute, semantic retrieval, AI generation, and secure authentication. More valuable than learning the individual technologies was learning how they fit together to create a reliable product that others could trust.
Connecting to the live source of truth
My local copy of rules was always stale. I needed the plugin to pull from the centralized content repository, which meant figuring out secure authentication. No more personal tokens that expire every week.
As the prototype matured, I replaced temporary credentials with a secure service-to-service authentication flow and automated the synchronization of content guidance. The result was a system that always worked with the latest guidance without relying on manual updates or expiring access tokens.
When the AI became silent
My first instinct was simple: give the model as much guidance as possible.
It completely failed.
Some products contained so much guidance that the model stopped responding altogether. That’s when I learned an important lesson:
Better AI doesn’t come from more context, it comes from the right context.
The solution: 3-Tier RAG
I implemented Retrieval-Augmented Generation (RAG), instead of sending everything, send only what’s relevant. I organized the rules into a three-tier pyramid:
Tier 1 — Base Rules: Voice, tone, grammar, capitalization. Always included.
Get Monika Mahor’s stories in your inbox
Join Medium for free to get updates from this writer.
Tier 2 — Horizontals: Cross-cutting topics like accessibility, AI agents, developer content. Ranked by relevance.
Tier 3 — Product Rules: Specific to Defender, Purview, Entra, etc. Semantically matched to the selected text.
Each tier has a hard token budget. If a tier overshoots, the least-relevant rules get dropped first, preserving quality. And if the primary AI model is overloaded, the request automatically retries on a backup AI model. The engine quietly degrades from “perfect” to “still useful” instead of showing a hard failure. Designers stay in flow and almost never encounters a failure scenario.
What designers actually get
Every time a designer hits “Generate,” the backend retrieves the most relevant rules, assembles them into a structured prompt, and produces three rewrites:
Formal — Authoritative tone for security contexts where precision matters.
Helpful — Action-oriented and approachable. Guides the user forward.
Casual — Friendly and easy to scan. Removes unnecessary formality.
Each variant comes with a readability score (Flesch-Kincaid grade level) and a rationale explaining why it was written that way, which specific guidelines drove each suggestion.
The system also highlights one variant as its recommendation, chosen based on how closely it aligns with the product-specific content rules retrieved for that surface. If the rules emphasize clarity and action-orientation, the Helpful variant gets the nod; if the surface calls for precision and compliance language, Formal wins. The recommendation reason is shown alongside, so designers understand why the AI preferred that option, and can confidently override it when their context demands a different tone.
For a domain like security, where copy needs the right balance of formal authority and clarity, this metadata helps designers make informed choices.
Users spoke. I listened
Real feedback drove the next wave of improvements:
- “I have to sign in again and again!”
I improved authentication persistence to avoid repeated sign-ins. Designers now stay signed in for 90 days. - “It breaks my bullet lists!”
Added smart list detection. The plugin preserves numbered and bulleted lists during generation. - “I wish I could just describe what I need” Added a context field. Type “this is an error message for a security alert” and the AI factors that into suggestions.
- “Can I copy to clipboard?” One-click copy to clipboard alongside direct “Apply to Figma.” Paste suggestions into docs, emails, or any other tool.
Passing the security bar
Just when the plugin was working beautifully, I was hit with a wall of security compliance items. Deploying a production service inside a large enterprise means meeting enterprise production requirements: non-negotiable controls that every service must pass before going live.
Each one existed to protect users’ data, preventing exploitation, and meeting the organization’s highest security bar. With AI as a pair-programming partner to break down each requirement, explain unfamiliar concepts, and suggest fixes, I was able to clear all in a few weeks.
“Security is not optional and it’s learnable. With the right guidance, even a designer can navigate them.”
The system I built
Looking back, the system eventually consisted of:
- a Figma plugin
- secure authentication
- a retrieval layer that surfaced only relevant guidance
- an AI generation service
- monitoring and automated updates
The enabler
I need to be honest about something: AI dramatically expanded what I was capable of building. I’m a designer, not an engineer. AI didn’t just help me write code. It empowered me to architect, build, deploy, and secure a full production system.
AI unlocked a designer who had the domain expertise and vision, but not the traditional technical skillset.
What I learned
- Start with the pain, not the technology. This plugin exists because of a real, daily frustration, not because AI is trendy.
- A scrappy prototype opens doors. The first version was fragile. But it proved value, got buy-in, and secured funding.
- Security is not optional and it’s learnable. 28 compliance items felt overwhelming. But with the right guidance, even a designer can navigate them.
- AI changes who can build. You don’t need to be an engineer. You need domain expertise, persistence, and the right AI partner.
I realized I wasn’t building prompts anymore, I was building a product.
