Ditto's AI content system connects your style guide to everything your team writes — flagging violations as they happen, generating first drafts in design context, and helping AI coding agents use your approved copy.
Step 1: Build your style guide
Your style guide is the foundation of the AI system. It holds the rules and context Ditto’s AI content systems draws from.
💡 Already have a style guide? Use Ditto’s MCP tools to create and upload your style guide into Ditto!
Generate a style guide from your codebase
If you don't have a style guide yet, run Ditto's CLI Scan on your codebase to generate one inferred from your existing production copy. This is a good way to get a working style guide in place without creating it entirely from scratch.
Generate a style guide with Scan:
Run Ditto's CLI Scan on your codebase
Check the banner linking to your generated style guide, or open the Style guide tab to find it directly
Review the inferred rules and edit or remove any that don't fit
Build a style guide from scratch
Create a style guide:
Click + New style guide
Name your style guide and click Create
💡 You can set commonly used style guides to be enabled by default so it’s rules are applied in all projects
Create a rule:
Click + Add rule in your style guide
Add a name, section, and description
[Optional] Add target tags so the AI knows which text items to apply this rule to. If no tags are included, the rule will be applied to all text items in your project
Provide at least one example, then click Add rule
Step 2: Enforce content rules with Magic Edit
Once your style guide is enabled in a project, Magic Edit checks your copy against the rules automatically and surfaces suggested fixes inline.
Respond to a suggested edit:
Select a text item and click suggested edits
See the rule that contribute to the suggestion and preview the edit
Accept or reject the suggestion. Accepting the suggestion will apply the edit to the text item and create the text item in your project
Ditto also proactively scans all text items in your project and surfaces every style guide suggestion in one place — so you can work through them in bulk without selecting items one by one.
Review style guide suggestions:
Navigate to Projects → Suggestions → Style Guide and see all style guide suggestions
Step through each suggestion using the carousel. Each card shows the suggested edit and the rules behind it
Choose to Accept, Reject, or Skip for now
Accept applies the edit to the text item
Reject dismisses the suggestion
Skip for now moves to the next suggestion without taking action — you can come back to it later
Step 3: Draft copy with Magic Draft
Magic Draft generates copy directly in your Figma designs, using your style guide rules, the surrounding text, and your broader Ditto workspace as context.
Generate copy using Magic Draft:
Select one or more text layers, and click Magic Draft
Enter a prompt into the chat window the click enter. The more specific your prompt is, the better the result will be
Accept (✓) or reject (✕) the suggestion. The generated copy is displaced directly in your design so you can preview the results
💡 Magic Draft is limited to 20 text layers at a time. Select a subset of the text layers if you’re hitting the limit
Refine copy using Magic Draft:
Reject all: start the drafting process from scratch with the original copy
Refine: building off of the generated draft with a new prompt
Try again: returns to the last prompt and previous suggestions to have another go
Step 4: Connect Ditto to AI agents
Pull approved copy and style guidelines into AI agents like Claude Code and Cursor with Ditto's MCP so agents always have the latest context on your content system and product text. Set up in minutes, and let your agents audit, generate, and translate on-brand UI text before it hits your codebase.
Generate UI with compliant text
Add this to your agent instructions to apply style guide rules whenever the agent creates new UI:
Use the style guides in Ditto to generate UI with compliant text.
The agent will call get_styleguide_rules before writing any user-facing strings, and apply those rules to the text it generates.
Audit existing strings
You can also use the tool to check and fix text that already exists in your codebase:
Check my existing user-facing strings and update them so they comply with style guide rules in Ditto.
The agent will fetch your rules, scan your code for user-facing strings, and suggest updates where the text doesn’t match your guidelines.
Turn a code review comment into a rule
When you notice a recurring content issue, ask the agent to capture it as a rule so future text follows it automatically:
We keep shipping error messages that blame the user. Add a Ditto style guide rule that error messages should be neutral and solution-oriented, with an example like "You entered an invalid email" → "Enter a valid email address."
The agent calls get_styleguide_rules to find the target style guide and section, calls get_workspace_tags if it wants to tag the rule, then calls create_styleguide_rules.
💡 Find more examples on how to instruct AI agents to use Ditto’s style guidelines to generate compliant copy, reuse approved text, and keep your style guides up-to-date