Communitygithub.com

plugin87/ux-writing

撰寫或審查 UI 文案——按鈕、錯誤訊息、空白狀態、微文案、通知、標籤——使用語調系統(清晰、簡潔、實用、人性化、誠實),搭配「發生什麼事→原因→解決方法」的錯誤公式與包容性語言規則。當使用者需要介面文案、錯誤訊息、空白狀態文字或文案審查時使用。

ux-writing 是什麼?

此技能專為 AI 代理(如 Claude Code、Cursor、Codex)設計,用於撰寫或審查使用者介面(UI)文案。它能根據專案的語調系統,產出清晰、簡潔且人性化的介面文字,適用於按鈕、錯誤訊息、空白狀態、微文案、通知與標籤等場景。技能支援主流 AI 代碼編輯器,並遵循一套嚴謹的公式:按鈕需將動詞前置並明確結果;錯誤訊息依循「發生什麼事→原因→解決方法」的結構,避免死路;空白狀態則需先提供價值再引導操作。此外,它會自動執行包含 10 個檢查項目的出貨前清單,確保文案符合語句大小寫、數字格式、無責怪用語、使用標籤而非佔位符,以及避免僅依賴顏色或方向的指示,使最終文案易於朗讀且符合國際化與無障礙標準。

相容平台~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 文案撰寫

以專案的語調撰寫或評論介面文案。

步驟

  1. 閱讀 content/voice-tone.md(語音原則、語氣光譜、公式、微文案模式、包容性語言、出貨前檢查清單)。
  2. 根據使用者的情緒狀態(入門/成功/常規/錯誤/破壞性)調整語氣。壓力越大 → 語言越平實。
  3. 套用公式:
    • 按鈕:將動詞前置,命名結果。
    • 確認對話框: 確認按鈕重述動作與對象——例如「刪除帳戶」,而非「刪除」/「確定」/「是」/「確認」。標題提問(「刪除帳戶?」),按鈕以對應的文字回答。取消按鈕保持為「取消」。對於不可逆或高風險操作,須要求輸入文字以確認步驟(WCAG 3.3.4/3.3.6)。
    • 錯誤訊息:發生什麼事 → 原因 → 解決方法(無死路、無代碼或堆疊追蹤)。
    • 空白狀態:價值 → 第一個動作。
  4. 強制執行寫作規範:句子大小寫、無全部大寫、數字、不責怪使用者、使用標籤(非佔位符)、無僅依賴方向或顏色的指示。
  5. 執行 10 項目的出貨前文案檢查清單。

輸出

最終文案(或審查紅線稿)應能自然朗讀並通過檢查清單。若 UI 有字元限制,請保持在限制內。

驗證(宣告完成前強制執行)

對每一行文字執行 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.

相關技能