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.
💡 If you have existing style guides, email their PDFs to support@dittowords.com and we'll import it into your workspace for you!
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 suggetsions
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 coding agents
With Ditto's MCP integration, AI coding agents like Claude Code and Cursor pull your approved copy and style guide rules automatically — so generated UI text is already on-brand before it hits the codebase.
Setup takes a few minutes and only requires a Ditto API token. See Ditto MCP for AI agents for installation steps.