ux-writing-skill

🥈Silver

Automate UX writing to enforce design system standards. Ideal for operations teams managing large-scale content. Integrates with Claude and Codex for consistent, high-quality output.

77110Updated 1mo ago

Intermediate30min to implementautomation

Saves ~45 min per use

Quick InstallView Source

git clone https://github.com/content-designer/ux-writing-skill.git

Works with:

Claude

Overview

About This Skill

Automate UX writing to enforce design system standards. Ideal for operations teams managing large-scale content. Integrates with Claude and Codex for consistent, high-quality output.

How to Use

1. **Identify the UI element**: Specify the component (e.g., button, modal, tooltip) and its context (e.g., login screen, checkout flow). Use tools like Figma or Storybook to reference the design system. 2. **Define constraints**: Provide the design system name (e.g., Material Design, Carbon Design), tone (e.g., conversational, formal), and character limits. Include edge cases (e.g., error states, empty states) to ensure coverage. 3. **Run the prompt**: Paste the template into Claude/ChatGPT and replace [PLACEHOLDERS] with your specifics. For bulk generation, use a CSV/JSON file to list elements and iterate with the AI. 4. **Review and refine**: Cross-check the output against the design system. Adjust for edge cases missed (e.g., accessibility labels for screen readers). Use tools like Storybook’s 'Variants' tab to test consistency. 5. **Automate**: Integrate with tools like GitHub Actions or Figma plugins to auto-generate microcopy when design files are updated. Log discrepancies in a spreadsheet for review.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/content-designer/ux-writing-skill

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate UX microcopy for [UI_ELEMENT] in [PRODUCT_NAME] following the design system guidelines. Ensure the text is [TONE: e.g., concise, friendly, professional] and adheres to the [STYLE_GUIDE_NAME] rules. Include variations for [USE_CASE: e.g., error states, empty states, tooltips]. Output in a table with columns: 'Context', 'Copy', 'Character Limit', and 'Notes'. Example: 'Generate microcopy for a password reset button in a SaaS app following Material Design guidelines. Include variations for primary and secondary buttons.'

Example Output

### UX Microcopy for Password Reset Button

| **Context**               | **Copy**                     | **Character Limit** | **Notes**                          |
|---------------------------|------------------------------|---------------------|------------------------------------|
| Primary Button (Desktop)   | Reset Password               | 20                  | Bold, uppercase, Material Design   |
| Primary Button (Mobile)    | Reset password               | 18                  | Sentence case, touch-friendly      |
| Secondary Button           | Forgot password?             | 22                  | Italic, underlined, subtle hover   |
| Error State (Invalid Email)| Email not found. Try again.  | 25                  | Red text, inline validation        |
| Tooltip                    | Click to reset your password | 30                  | Appears on hover, concise          |
| Empty State (Post-Reset)   | Password reset complete!     | 24                  | Green text, success confirmation   |

**Design System Compliance:**
- All copies use sentence case (except primary buttons).
- Error state aligns with Material Design's error styling.
- Tooltip avoids technical jargon (e.g., 'SMTP server' omitted).

**Tone:** Friendly but professional, avoiding overly casual language like 'Oops!' or 'Whoops!'.