The Ditto MCP connects your Ditto workspace to AI tools like Claude, Claude Code, Cursor, and Figma Make. Once connected, your agent can create/edit product copy, read your style guides, reuse approved text, check copy for issues, and make changes in Ditto for you. This guide is for anyone new to Ditto's agent workflows, and covers what you can do and gives you prompts to try.
đĄ Using Claude? Add Ditto from Claudeâs connector directory so itâs available on your Claude web app, desktop app, and Claude Code.
Using Cursor? Install the Ditto Agent Package. It instructs your agent to check
your style guide and reuse Ditto text automatically, without you prompting it.
Using Codex, Figma Make, or another tool? See the setup instructions.
Set up your workspace in one prompt
If your team already has text in production, you don't need to start from scratch. Give your agent Ditto's setup prompt, and it scans your codebase to build a first version of your content system your Ditto library in minutes.
From there:
Create a project and connect it to a Figma file to bring design context to your product copy.
Variants are created for any translations and localized copy you've already shipped.
A draft style guide is generated from how your product already writes.
Write and review on brand copy
Your agent follows your style guide and reuses approved copy, whether itâs writing a single screen or reviewing an entire codebase.
Write new copy that follows your style guide
When your agent builds a new screen, prototype, or feature, it can pull your style guide rules from Ditto and write copy that matches your voice, tone, and terminology.
Try this prompt:
Use the style guides in Ditto to generate UI with compliant text.
Reuse approved copy instead of writing new text
Your agent searches your component library and Ditto projects for text that already exists. It uses that text instead of writing something new, which keeps your product consistent and avoids near-duplicates like "Continue" and "Next".
Try these prompts:
Try to reuse text in Ditto when generating UI.
Look at my existing user-facing strings in my codebase and see if you can replace any with text that exists in Ditto.
Check and fix existing copy
Review copy that's already written, whether it's a single screen or a whole product, against your style guide. Your agent then flags which text breaks a rule and suggests a fix.
Try these prompts:
Check my existing user-facing strings and update them so they comply with style guide rules in Ditto.
Translate copy at scale
Your agent can draft translations for any of your variants. It follows any style guide rules set up for that language or locale and saves the results in Ditto for your team to review.
Try this prompt:
Add German text for the strings in the checkout flow. Use the existing "German" variant.
đĄ The variant with a locale code must already exist in Ditto before your agent can translate into it.
Bring designs and prototypes into Ditto
Get copy out of your design files and into Ditto, so your team can review and manage it in one place.
From a Figma file
Connect the Ditto MCP and the Figma MCP, and ask your agent to link the text in your Figma file to text in Ditto. It matches identical copy, groups text by screen, and connects text that already exists in your component library. Watch the video and follow the instructions and prompt for a walkthrough.
Maintain your content system
Keep your workspace consistent as your product grows. Your agent can find duplicates, reorganize your library, and keep your style guide up to date.
Consolidate copy across your workspace
Over time, the same message can get written in many ways across different projects and by teams: "Continue", "Next", and "Next step" on buttons, or three versions of the same error message. Your agent can search your whole workspace, group copy that says the same thing, and show you where to tidy up.
Step 1: Find opportunities to consolidate
Start by asking for a report. This step only reads your workspace, so nothing changes.
Search all my Ditto projects and my component library for text that says the same thing in different ways. Group related copy together, show me which projects each version appears in, and recommend which wording to keep based on our style guide. Don't change anything yet.
You can also narrow the search to one type of copy.
Find every error message across my Ditto projects. Group the ones that describe the same problem and flag any that break our style guide.
Step 2: Consolidate what you approve
Review the report, then tell your agent which groups to consolidate. It keeps the wording you chose, saves it as a component in your library, and links every matching text item to it to enforce the consistency going forward.
Consolidate the groups I approve from your report. For each group, use the recommended wording unless I say otherwise, reuse an existing library component if there is one or create a new one if not, and link all matching text items to it. Before making any changes, list exactly what you'll create and link, and wait for my confirmation.
Or consolidate one type of copy in a single prompt:
Find every button label in Ditto that means "continue" ("Continue", "Next", "Next step", "Continue â") and consolidate them into one library component using our style guide's preferred wording.
Update your style guide
Your agent can add, change, or remove style guide rules. When a rule changes, it can also find and fix every piece of copy that the change affects. This is a fast way to turn repeated review feedback into a rule that applies everywhere.
Try these prompts:
We keep shipping error messages that blame the user. Add a Ditto style guide rule that error messages should be neutral and solution-oriented.
We no longer use title case anywhere. Delete all "title case headings" rules from our Ditto style guides.
Organize your library
As your component library grows, its folders can get messy. Use our agent to propose a cleaner structure and organize your components for you.
Our library folders are a mess. Propose a folder structure by product area, show it to me, and then move the components.