mcpField
U
ux-copy

ux-copy

github.com/sickn33デザイン・UI48.7k58 回インストール1 日前に更新
リポジトリ

ux-copy について

UX Microcopy Generator は、ボタンラベル、エラー、空状態、トーストなど、短い英語の UI 文言を作成するスキルです。既存のトーン仕様やプロジェクトの執筆指針を使うプロダクトチーム向けで、ブランドの声を定義したり、英語以外の翻訳を作成したりはしません。

主な機能

  1. 01操作が明確なボタンラベルの作成
  2. 02役立つエラーメッセージの作成
  3. 03行動を促す空状態文言の作成
  4. 04簡潔なトースト通知の作成
  5. 05提示されたトーンやデザイン指針の適用

活用シーン

  1. 01購入や設定操作のボタン文言の作成
  2. 02フォームエラーと解決方法の提示
  3. 03空状態で次の操作を案内
  4. 04保存や取り消し可能な削除の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill ux-copy

インストール後、Claude Code で/ux-copyを入力して読み込まれたか確認します。

詳細

UX マイクロコピー生成

使用するタイミング

カジュアルながらも丁寧な語り口とトーンに沿って、UX マイクロコピー（ボタンラベル、エラーメッセージ、空の状態、トースト通知）を作成する必要がある場合に、このスキルを使用します。

使用しないタイミング

  • 長文コンテンツ（ブログ記事、ドキュメント、マーケティングページ）には使用しません。対象外です。
  • フィードバック状態のデザイン全体（テキストだけではない場合）には使用しません。→ /ss-feedback を使用してください。
  • ブランドの語り口やトーンそのものの定義には使用しません。このスキルは語り口の仕様を利用するもので、作成するものではありません。
  • 英語以外の言語への翻訳には使用しません。単一言語のみを対象とします。

コンテキスト：$0 説明：$ARGUMENTS

対象プロジェクトに engine/UX-WRITING.md が存在する場合は読み込んでください（このスキルには含まれていません）。このスキルが適用するルールセットです。ボタンはアクションを表す名前にし（「送信」は避ける）、エラーでは責めるのではなく解決を助け、空の状態では次の行動を促し、金額に関するコピーは落ち着いた表現にし、1つの概念には1つの用語を使います。韓国語／CJK のプロジェクトでは、「Toss feel」と呼ばれる、明快で落ち着きがあり、人間味のある表現について §W8 を参照してください（一貫した敬語、ユーザー視点の「自分の口座」、冗長な表現を省く）。

手順

  1. デザイン言語のリファレンスを読みます。

    • DESIGN-LANGUAGE.md に「マイクロコピーのトーンガイド」と「UX ライティング」のセクションがあれば、それを参照します。ない場合は、プロジェクトで提供されている語り口の仕様と既存のコピーを使用し、存在しないルールを作り出さないでください。

  2. 語り口の原則を適用します。

トーンのルール
  • カジュアルながらも丁寧：親しみやすく、機械的ではありません。親切な友人と話すような表現にします。
  • 能動態：「変更を保存しました」とし、「変更が保存されました」とはしません。
  • 肯定的な表現：「30ドル以上のご注文で送料無料」とし、「30ドル未満のご注文には送料がかかります」とはしません。
  • 平易な言葉：「送金する」とし、「振込を開始する」とはしません。
  • 簡潔：すべての言葉に意味を持たせます。
コンテキスト別のコピーのパターン
ボタンラベル（CTA）
Format: [Action verb] + [Object] (optional)
Good: "Place order", "Get started", "Save changes", "Try again"
Bad:  "Submit", "OK", "Click here", "Proceed to next step"
  • 画面ごとに主要な CTA は1つだけにします。
  • ラベルは次に起こることを明確に示す必要があります。
  • 主要な CTA は最大3語にします。
空の状態
Format: [Friendly observation] + [Suggested action]
Good: "No activity yet. Create your first project to get started."
Bad:  "No data found."
  • 常に次の行動を提案します。
  • 関連するアイコンを使用します（32px、text-text-tertiary）。
  • トーンは、責めずに励ます表現にします。
エラーメッセージ
Format: [What happened] + [What to do]
Good: "Couldn't load the data. Please try again."
Bad:  "Error 500: Internal Server Error"
  • 技術的なエラーをユーザーに表示しないでください。
  • ユーザーではなくシステムに原因があることを示します。
  • 常に復旧のための操作を提示します。
トースト通知
Format: [Confirmation of what happened]
Good: "Saved!", "Changes applied", "Item deleted · Undo"
Bad:  "Operation completed successfully"
  • 最大2行にします。
  • 元に戻せる破壊的操作には「元に戻す」リンクを含めます。
  • トーストの表示時間はデザイン上の既定値として扱います。重要な復旧操作には、常時表示される、またはユーザーが操作できる手段が必要です。
フォームのラベルと補足
Label: Noun phrase ("Email address", "Password")
Placeholder: Example or hint ("[email protected]")
Helper: Format guidance ("Must be at least 8 characters")
Error: Specific issue when safe to disclose; on public account flows avoid revealing whether an address is registered.
確認ダイアログ
Title: [Question about the action]
Body: [Consequence explanation]
Primary: [Action verb] ("Delete", "Confirm")
Secondary: "Cancel" when it cancels the pending action; "Close" only when it simply dismisses information.
  1. 依頼されたコンテキストに合わせてコピーを作成し、次の内容を提示します。
    • 主要なコピー（表示する内容）
    • バリエーション（コンテキストによって異なる場合）
    • そのコンテキストに特化した推奨事項と避けるべき事項

制限事項

  • 上流のソースとローカルプロジェクトのコンテキストがタスクに明確に合致する場合に限り、このスキルを使用してください。
  • コマンド、生成されたコード、依存関係、認証情報、外部サービスの動作を確認してから変更を適用してください。
  • 例を、環境固有のテスト、セキュリティレビュー、破壊的または高コストな操作に対するユーザーの承認の代わりにしないでください。

コメント

Markdown 対応