mcpField
S
ss-copy

ss-copy

github.com/bitjaruデザイン・UI993826 回インストール今日更新
リポジトリ

ss-copy について

ss-copyは、英語のUXマイクロコピーを作成するStyleSeedのスキルです。設計言語とUXライティングのルールに基づき、ボタン、エラー、空状態、フォーム、確認画面などの文言を整えます。

主な機能

  1. 01アクションを示すボタンラベル
  2. 02復帰方法を添えたエラーメッセージ
  3. 03次の行動を促す空状態の文言
  4. 04フォームと確認画面の文案パターン
  5. 05用途別の文案とバリエーション

活用シーン

  1. 01画面の主要アクション用ラベル作成
  2. 02復帰方法を示すエラー文の作成
  3. 03空状態やトースト通知の作成
  4. 04フォーム補助文と確認ダイアログの準備

インストール

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

$npx skills add https://github.com/bitjaru/styleseed --skill ss-copy

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

詳細

このワークフローを実行する前に、セッションごとに1回の更新前チェックを行ってください。

UX マイクロコピー生成

レジストリ優先の成果物境界

.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求された成果物 ID を解決し、その後 .styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み込んでください。レジストリを使用するプロジェクトでは、グローバルなレガシーバンドルにフォールバックしないでください。レガシープロジェクトでは、レジストリが存在しない場合に限り .styleseed/effective-rules.md を使用できます。

使用しないケース

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

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

まず engine/UX-WRITING.md を読んでください — このスキルで適用するルールセットです。ボタンはアクションに名前を付け（「送信」ではなく）、エラーは責めずに解決を助け、空の状態では次の行動を促し、金額に関するコピーは落ち着いた表現にし、概念ごとに用語を統一します。韓国語／CJK のプロジェクトでは、明快で落ち着きがあり、人間味のある「Toss らしさ」（존댓말 の一貫性、ユーザー視点の「내 계좌」、冗長さを省く表現）について §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 行にします
  • 元に戻せる破壊的な操作には「元に戻す」リンクを含めます
  • 情報トースト：3 秒。アクショントースト：5 秒。
フォームのラベルと補足
Label: Noun phrase ("Email address", "Password")
Placeholder: Example or hint ("[email protected]")
Helper: Format guidance ("Must be at least 8 characters")
Error: Specific issue ("This email is already registered")
確認ダイアログ
Title: [Question about the action]
Body: [Consequence explanation]
Primary: [Action verb] ("Delete", "Confirm")
Secondary: "Close" (not "Cancel" — avoids confusion)
  1. 要求されたコンテキストに合わせてコピーを生成し、以下を提示します。
    • 主要なコピー（表示する内容）
    • バリエーション（コンテキストによって異なる場合）
    • そのコンテキストに応じた推奨事項と避けるべき事項

コメント

Markdown 対応