Penpot AI workflows explained

What AI workflows are, how Penpot MCP connects your files to agents, and when they’re worth using on real product work.

An AI workflow starts with a prompt and ends with a design, code, or even docs as the output. Here’s how, and why you might use AI workflows.

What is an AI workflow?

An AI workflow is a repeatable process where you specify goals, constraints, and checkpoints, and then use AI to help with planning, editing, auditing, or automating tasks. These workflows could involve a single file, or multiple platforms and tools.

As designers and developers, we can use AI workflows to automate repetitive tasks. We can use its pattern recognition to analyze, optimize, and provide insights into design and development work, and generally speed up the execution of basic design and coding tasks.

0:00

/0:08

We’re not talking about magic here, we’re talking about pattern matching. You could prompt an AI to create a series of mockups for an ecommerce checkout flow, and you would probably get something that is visually appealing but generic. Designs that look good at a glance, but contain inconsistencies and errors upon closer inspection. And bear no relation to what you need to create for your actual work.

This is because AI models (Large Language Models, or LLMs) use the web and other media for training data. Without more contextual information, the model takes the average of what appears most frequently and approximates what matches your request.

In order to use these workflows for professional-level work, you need to provide the model with clear input. And you need to review and iterate over the output. But first, let’s make sure we understand the terminology around AI workflows:

AI workflow terminology

Workflow: a repeatable process.
LLM: Large Language Model, AI model, or just model. LLM is usually what we mean when we say “AI.” An LLM is a type of artificial intelligence trained on huge amounts of data. Its aim is to understand and generate (or mimic) human language, which makes it able to perform tasks, particularly tasks based on pattern matching. GPT, Claude, and Gemini are all LLMs.
Agent: an agent acts on behalf of an LLM. Agents are often tools provided as part of an app or software, with a text input interface. Cursor and OpenCode are both agent clients. Agents don’t answer questions, like AI assistants or chatbots. They can also plan, analyze, and execute tasks.
Prompt: the input you, a human, provides to the AI. You do this by entering text into the agent’s input box. You can also attach files like images as part of your prompt.
Plan and build modes: modes provided by some AI clients. Plan mode is read-only (doesn’t edit your work) and provides a structure for the given task by breaking it into subtasks. Plan mode can help optimize/reduce token costs during build mode. Build mode (sometimes called Agent mode) is when the agent executes the task and can edit your work.
Token: a unit of work by an AI model. A token is roughly based on the number of characters in your prompt requests (input) and how the task is completed (output). Most providers make you pay per token, although some have monthly subscriptions with limited tokens.
Context: the background information you give an AI model so it can produce output that’s relevant to your needs. Context also includes your files, the tools you use, and your history of interactions with an agent.
MCP: Model Context Protocol. A protocol (or standard format) for providing context to the model. The Penpot MCP provides context including how to effectively use its APIs, and how to read and understand its elements, assets, and tokens.
MCP Server: a tool that exposes your Penpot file to your agent, along with the relevant Penpot context.

0:00

/0:08

A basic AI workflow with Penpot

You write a prompt (for example, generate design tokens for this design following the provided naming structure) into your chosen agent.
The agent uses Penpot MCP to read your file and gather context, then sends your prompt (with that context) to your chosen model.
The model works out the output and sends its response back to the agent.
The agent translates the output (using Penpot MCP) into code, documentation, or edits inside your Penpot file.

Looking for how to set up Penpot MCP? We’ve also written tutorials for creating AI workflows with specific clients:

Limitations of AI workflows in professional design and development

There’s a lot of giddy excitement for AI in the tech industry, but like any other tool, we should evaluate its usefulness before adopting it for every task. We should be aware of its risks, shortcomings, and how it might affect the quality of our work.

You need to verify the output

The most important limitation of AI workflows is that you need the skills to verify the model’s output. AI models get things (confidently!) wrong. The output is a guess based on its training data and the information you’ve provided.

I’ve seen models make up features that don’t exist because they exist in similar products, invent API endpoints because they follow a standard structure, and generate unnecessary design tokens based on common patterns. There’s no point generating code for an app if you can’t verify that it isn’t full of errors. Or generating mockups for a website design if you don’t understand how the hierarchy affects the user experience.

Ensure your AI workflows are effective by keeping design decisions as a human task. Judge for yourself that the visuals meet the brand guidelines, specify a design token structure and semantics that work for your team, design your own UX flows and user stories that the agent can use as a specification.

Often it’s easy to spot a big mistake, but we can just as easily skip over the details. These are often situations where a single character typo will break a link, script, or change the meaning of the data. As AI models follow common patterns, they often make up something that looks like it could be real.

Be sure to validate:

URLs
APIs
Statistics and metrics

When it comes to code, treat generated code like a pull request from a junior developer. Read the code, understand it, question it, and don’t merge what you can’t maintain.

Defer to the experts on your team

It can be tempting to use AI models as a fast way to bypass the expertise of your colleagues. Who needs a designer when you can ask the agent to generate a pretty mockup? Who needs a developer when the agent will code up your mockup without challenging your design decisions? But so much of good professional work comes from hard-won subject matter expertise, long-term experience dealing with a legacy codebase, and back-and-forth discussions between experienced colleagues. Defer to the experts on your team before the AI model; they have more context than you have time to feed the model.

You won’t get the same result every time

Repeatability is a key factor in the usefulness of automated workflows. But the repeatable aspect can be tricky with AI workflows. When creating a workflow that you want to use multiple times, it’s important to check that others can follow the same steps and get a similar output and quality.

Further limitations and considerations

Sensitive data. Like with any third-party tool, you should avoid sharing secrets, anyone’s personally-identifiable information (PII), or proprietary organizational information in your prompts or context data.
Intellectual property and licensing. AI models were trained by scraping massive amounts of data from the web and media, so there is a chance the model will output material that may infringe intellectual property. Review any output carefully before publishing or deploying it as your own.
Training data. Your input and context may also be used as training data for the AI model. Be sure that you’ve checked the terms and conditions from any agent software and the models to which they connect.
Expense. Tokens are expensive, and costs can add up quickly. You can usually check the token usage of your model input and output in logs (usually in Settings/near Billing information) provided by the agent or model.
Energy use. Tokens represent the computational work required for an AI model’s input and output, so they also roughly correlate with the energy required for that computational work.

Limit the files and folders you permit a model to access in order to prevent any accidental leaking of information. And be sure to back up any work before you allow an agent to manipulate it! Be conscious of your token usage, and use the token logs to get an understanding of which kinds of prompts result in excessive token usage.

Know when to use AI workflows

The key to knowing when to use AI workflows is understanding when human intervention is more valuable. Is there time saved overall considering any iterations or reworks that might be required? Does it reduce effort without increasing mistakes in your work? Do you have systems in place to catch a model’s errors before they get published or deployed?

Sometimes the clarity and structure you create to benefit an AI model can just benefit you or your team as human designers and developers. You’ve started with a blank canvas and found you’ve written a detailed user story that enables you to draft a prototype with more clarity. Or you’ve written an outline for a test that’ll help you construct a new component from your design system in no time.

It’s also very tempting to eliminate busywork. Personally, I find the busywork is often when I make my best iterations… I realize that the naming structure doesn’t work or the interactive flow is missing a major step. We all know that design isn’t just drawing rectangles, and development is not just typing out a file. This “busywork” is part of design and development, so we have to be sure we’re not automating out the valuable part of the process.

Where to start

Read-only first. “Audit my design tokens” (no edits). Test the feasibility of the workflow.
One small, reversible edit. For example, normalizing spacing on one board. Check how well the task is executed.
Pick a specific achievable goal. Iterate to improve the workflow and make it more repeatable.

When you’re ready to move between design, code, and docs, use our prompting guide, and set up your agent with Cursor or OpenCode when you want to go hands-on.

AI workflows aren’t a shortcut around design and development skill. They’re one way to move faster on the parts you can verify, so you can spend more attention on the decisions only your team should make.

Want to learn more about AI workflows in Penpot? Start here: