brainstorming
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or planning anything new, in software or out of it (a talk, a business, a renovation).
figma-copy-rewriterRewrite UI copy directly on Figma files to be simpler, jargon-free, and terminologically consistent. Trigger when: user says "rewrite copy", "simplify copy", "fix the text", "copy audit", "UX copy review", "clean up the wording", shares a Figma URL and mentions copy/text/wording, or asks to make text simpler/clearer/more consistent on a Figma file.
Independent GitHub snapshot · Automated classification · Original documentation governs
Rewrite interface copy on Figma screens to be simple, jargon-free, and terminologically consistent. Works on any Figma file.
Prerequisites: Load the figma:figma-use skill before calling use_figma. Load ux-copy-guidelines.md before auditing.
Read all text nodes from the target Figma file or specific page/frame.
Step 1: Get the fileKey from the user (extract from Figma URL if provided).
Step 2: Run use_figma to list all pages and identify target scope (full file, specific page, or specific frame).
Step 3: Run use_figma to extract every text node: { nodeId, characters, parentFrameName, textType }.
Text type classification (infer from context):
heading -- h1-h3 sized text, section titlessubheading -- h4-h6 sized text, card titlesbody -- paragraph text, descriptionslabel -- form field labelsplaceholder -- greyed-out input texthelper -- small text below fieldsbutton -- text inside button-shaped frameserror -- red/orange text near form fieldsbadge -- small tag/chip textfooter -- bottom-of-screen textExtraction script pattern:
// Switch to target page first
const targetPage = figma.root.children.find(p => p.name === "PAGE_NAME");
if (targetPage) await figma.setCurrentPageAsync(targetPage);
const textNodes = [];
const root = targetPage || figma.currentPage;
root.findAll(node => {
if (node.type === 'TEXT' && node.characters.trim().length > 0) {
// Walk up to find parent frame name
let parentName = '';
let parent = node.parent;
while (parent && parent.type !== 'PAGE') {
if (parent.type === 'FRAME' || parent.type === 'COMPONENT') {
parentName = parent.name;
break;
}
parent = parent.parent;
}
textNodes.push({
id: node.id,
text: node.characters,
fontSize: typeof node.fontSize === 'number' ? node.fontSize : 'mixed',
parentFrame: parentName
});
}
return false;
});
return { count: textNodes.length, nodes: textNodes };
Load references/ux-copy-guidelines.md. For each extracted text node, check against the 14 guideline sections:
Terminology consistency check: Build a term-usage map across ALL extracted text. Flag when the same concept uses different words (e.g., "Phone number" on one screen, "Mobile number" on another).
For every flagged text node, generate improved copy following the guidelines. Group rewrites by screen/frame.
Present a before/after diff table to the user. Group by screen/frame for easy scanning.
## Screen: 03 - OTP Verification
| # | Node | Before | After | Reason |
|---|------|--------|-------|--------|
| 1 | header title | "Verify Your Number" | "Verify your number" | Sentence case (section 12) |
| 2 | subtitle | "We'll send a one-time password to your WhatsApp" | "We'll send a verification code to your WhatsApp" | Terminology: "verification code" not "one-time password" (section 3) |
| 3 | button | "Send OTP →" | "Send code →" | Jargon: "OTP" → "code" (section 4) |
Ask the user to approve, edit, or reject each change. Do NOT proceed to Phase 5 until the user explicitly approves.
Write approved changes back to Figma using use_figma. Process in batches of 10-15 nodes per call.
// Load font BEFORE changing text
const node = await figma.getNodeByIdAsync("NODE_ID");
if (node && node.type === 'TEXT') {
// Load all fonts used in this text node
const fonts = node.getRangeAllFontNames(0, node.characters.length);
for (const font of fonts) {
await figma.loadFontAsync(font);
}
node.characters = "NEW TEXT HERE";
}
Critical rules for push:
loadFontAsync before changing node.characters -- will throw otherwise.getRangeAllFontNames to discover exact fonts (not hardcoded).use_figma call to avoid timeouts.get_screenshot to verify changes look correct.The user provides ONE of:
If no Figma URL/fileKey is provided, ask for it.
Input: "Rewrite the copy on this Figma file to be simpler: https://figma.com/design/abc123/MyApp"
Output flow:
Input: "Audit the copy on page 'Registration Form' for terminology consistency"
Output flow: