Communitygithub.com

plugin87/ux-writing

编写或审阅UI文案——按钮、错误提示、空状态、微文案、通知、标签——运用语态与语调体系(清晰、简洁、有用、人性化、诚实),遵循“发生了什么→为什么→如何修复”的错误公式及包容性语言规则。在用户需要界面文案、错误消息、空状态文本或文案审阅时使用。

ux-writing 是什么?

该技能用于为UI界面编写或审阅用户可见的文案,包括按钮、错误提示、空状态、微文案、通知和标签。它围绕一个明确的语态与语调体系(清晰、简洁、有用、人性化、诚实)组织,并提供了一套可操作的公式,例如:按钮文案要前置动词并指明结果;错误信息遵循“发生了什么→为什么→如何修复”的结构;空状态先传达价值再引导操作。技能还强制要求遵循句子大小写、使用数字、不指责用户、使用标签而非占位符、避免仅依赖颜色或方向的指示。在声明完成前,必须通过一个10项预发布检查清单,涵盖可朗读性、避免术语/指责/死胡同、包容性语言、字符限制和可翻译性。该技能独立于特定平台,可被Cline、Codex、Cursor等AI代理用于生成或审查界面文案,确保文案专业、一致且以用户为中心。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/ux-writing

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

技能:UX Writing

以项目语态编写或审评界面文案。

步骤

  1. 阅读 content/voice-tone.md(语态原则、语调谱、公式、微文案模式、包容性语言、预发布检查清单)。
  2. 根据用户情绪状态匹配语调(新手引导/成功/常规/错误/破坏性操作)。压力越高,语言越平实。
  3. 应用公式:
    • 按钮:前置动词,指明结果。
    • 确认对话框: 确认按钮复述操作和对象 —— “删除账号”,而不是“删除”/“确定”/“是”/“确认”。标题提问(“删除账号?”),按钮用匹配的词语作答。“取消”保持为“取消”。对于不可逆或高风险操作,要求键入确认步骤(WCAG 3.3.4/3.3.6)。
    • 错误:发生了什么 → 为什么 → 如何修复(无死胡同,无代码或堆栈跟踪)。
    • 空状态:价值 → 第一个操作。
  4. 强制规范:句子大小写,无全大写,使用数字,不指责用户,使用标签(而非占位符),无仅有方向或颜色的指示。
  5. 执行10项预发布文案检查清单。

输出

最终文案(或标注修订的审阅意见),要求朗读自然流畅,并通过检查清单。如有严格的字符限制,需严格遵守。

验证(声明完成前的强制步骤)

对每一行文案逐项运行 content/voice-tone.md 中的10项预发布检查清单——不得跳过:

  • 朗读自然流畅;操作前置动词;无术语/指责/死胡同。
  • 错误遵循“发生了什么→为什么→如何修复”;空状态给出“价值→操作”;禁止单纯的“无数据”/“错误”。
  • 规范:句子大小写,使用数字,使用标签(而非占位符),无仅有颜色或方向的提示,包容性语言。
  • 在字符限制内;可翻译(无拼接——参见 accessibility/i18n-rtl.md)。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

相关技能