mcpField
R
replica-design

replica-design

github.com/jakeschincariolデザイン・UI6.3k722 回インストール4 週間前に更新
リポジトリ

replica-design について

replica-designは、再構築のメモとスクリーンショットからデザイントークン、コンポーネント仕様、UIプリミティブを作るスキルです。独自でアクセシブルなデザインシステムを整えながら、インターフェースを再構築するチーム向けです。

主な機能

  1. 01視覚的役割とレイアウトの測定
  2. 02トークン CSS と Tailwind マッピングの生成
  3. 03WCAG AA に基づくテキストコントラスト確認
  4. 04コンポーネントの状態とアクセシビリティ仕様
  5. 05再利用可能な UI プリミティブの構築

活用シーン

  1. 01参考スクリーンショットからのデザイントークン作成
  2. 02テキストと背景のコントラスト確認
  3. 03コンポーネントのバリエーションと状態の記録

インストール

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

$npx skills add https://github.com/jakeschincariol/replica-skill --skill replica-design

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

同梱ファイルcontrast.pytokens.json

詳細

replica-design

replica/recon.md と replica/screens/ 内のスクリーンショットを読み込みます。replica/design/tokens.json（このフォルダー内のテンプレート）、tokens.css、Tailwind のマッピング、replica/design/components.md を書き出します。

python3 contrast.py replica/design/tokens.json     # every text pair, WCAG ratio

ルール

再構築するのはシステムです。つまり、役割、スケール、パターン、フォームやモーダルの動作です。これらは独占できるものではなく、ユーザーも使い慣れたものを期待しています。一方、次のものは決して流用しないでください。

  • ロゴ、アイコン、イラスト、写真、サウンド。 オープンなアイコンセット（Lucide、Phosphor、Heroicons、Tabler など。すべて MIT などのライセンス）を使い、イラストは自作するか、制作を依頼してください。元のものをトレースしてはいけません。
  • ライセンスされたフォント。 元のサイトが有料フォントやプロプライエタリなフォントを使っている場合は、同じ用途に適したオープンなフォントを選んでください。例：Inter、Geist、IBM Plex、Manrope、Source Serif。
  • 元の文章。 ラベルも空の状態の表示文も、すべて新しく書いてください。
  • 元のブランドカラー。 役割（accent）として記録し、今はニュートラルな仮の色を使ってください。replica-brand で独自の色に置き換えます。特徴的な色とレイアウトの組み合わせはトレードドレスにあたるため、リリース前に変更してください。

ステップ 1：推測せず、測定する

スクリーンショットを使って測定します（拡大し、ユーザーのマシンでカラーピッカーを使ってください）。

  • 色の役割。色そのものではありません。bg、surface、border、border-input、text、text-muted、accent、on-accent、danger、success、warning。アプリで実際に使われているグレーの数を数えてください。通常は 5～7 種類です。
  • 文字のスケール：サイズ、行の高さ、太さ。スケールに合わせます（12、14、16、20、28、40 が一般的です）。フォントファイルではなく、フォントの種類を記録してください。
  • 余白：要素間の間隔を測定します。ほとんどの場合、4 または 8 が基準になります。スケールを記録してください。
  • 角丸、シャドウ、モーション：それぞれ 2～3 種類です。
  • レイアウト：コンテンツの最大幅、グリッド、ブレークポイント、サイドバーの幅、ヘッダーの高さ。

ステップ 2：トークンを書く

tokens.json に値を入力します。役割名はそのままにしてください。replica-brand では値だけを変更します。tokens.css をカスタムプロパティとして生成し、Tailwind のテーマにマッピングして、コンポーネントでは生の hex 値ではなく bg-surface text-muted を使うようにします。

アプリで使うテキストと背景の組み合わせごとに pairs リストを追加し、次を実行します。

python3 contrast.py replica/design/tokens.json

AA は最低基準です。本文テキストは 4.5:1、大きなテキスト、入力欄のボーダー、フォーカスリングは 3:1 です。失敗があると終了コード 1 になります。コンポーネントごとに修正するのではなく、トークンを修正してください。

ステップ 3：コンポーネント仕様

recon リスト内の各コンポーネントについて、components.md にブロックを 1 つ作成します。

Button
  variants  primary, secondary, ghost, danger
  sizes     sm 32px, md 40px, lg 48px
  states    default, hover, active, focus-visible (2px ring, accent), disabled, loading
  tokens    bg accent, text on-accent, radius md, font sm/600
  a11y      real <button>, visible focus, loading keeps the label for screen readers
  used on   S02, S07, S09

recon で確認したすべての状態に加え、フォーカス、無効、読み込み中、エラー、空の状態も記載します。キーボード操作とスクリーンリーダーの動作も仕様に含めてください。

ステップ 4：プリミティブを構築する

画面を作る前に、コンポーネントをコードで一度、単独で構築します（/design ルートまたは Storybook）。スタックにアクセシブルな基盤がある場合は、それを使ってください（Radix、shadcn/ui、React Aria）。ページのスクリーンショットを撮影します。これがデザインシステムの確認です。

出力

tokens.json、tokens.css、Tailwind の設定、components.md、構築したプリミティブ、AA の失敗がゼロのコントラストレポート。次は /replica-build です。

コメント

Markdown 対応