mcpField
B
building-design

building-design

github.com/cedmandocdocデザイン・UI044 回インストール2 日前に更新
リポジトリ

building-design について

building-design のセットアップと設計ワークフローを案内するスキルです。設計ルートの決定やプロジェクトの契約・レシピに沿った作業を支援します。

主な機能

  1. 01設計ルートとビューアーの設定
  2. 02ビューアー依存関係のインストール
  3. 03設計・プレビュー契約の確認
  4. 04意図に応じたレシピの選択

活用シーン

  1. 01building-design の準備状況の確認
  2. 02機能の設計作成
  3. 03既存設計の変更
  4. 04.design.ts ファイルを基にした作業

インストール

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

$npx skills add https://github.com/cedmandocdoc/awesome-skills --skill building-design

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
design.md
index.md
assets/app/
.gitignore
index.html
package.json
tsconfig.json
vite.config.ts
assets/app/system/
define.ts
motion.css
motion.ts
type.css
assets/app/viewer/
App.tsx
canvas.tsx
chrome.tsx
frame.css
Frame.tsx
main.tsx
meta.ts
registry.ts
viewer.css
assets/surface/feature/
feature.design.ts
screen.css
screen.design.ts
Screen.tsx
assets/surface/ui/
component.css
component.design.ts
Component.tsx
references/
creating-design.md
design-contract.md

詳細

Building Design

セットアップ

項目種類必須タイミング完了条件方法
npm を含む Node.js 22.12+ユーザー必須すべてnode --version が 22.12 以降を報告するhttps://nodejs.org
ルートパスと意図質問必須すべてdesign-contract.md → デザインルートの解決で、依頼の意図に合ったルートが見つかるフォルダーを尋ね(デフォルトは design-contract.md → デザインルートに従う)、意図(短いフレーズを1つ)を尋ねます。未入力または空の場合はその値を使用し、それ以外の場合は別のパスを尋ねます。ルートの場所と index.md → intention に記録します
ルートマーカー静的必須すべて<design-root>/index.md が design-contract.md → 作成者署名を含むintention を指定して assets/index.md から index.md を作成します
ビューアーアプリ静的必須すべてビューアーファイルと index.md → ビューアーキーが assets/ と一致するassets/app/ 内のすべてのファイルをコピーします。ドットファイルも含みます(cp -R <skill>/assets/app/. <design-root>/)。assets/index.md から index.md → ビューアーキーを置き換えます
ビューアーのインストール自動必須すべて<design-root>/node_modules/ が存在するデザインルートで npm install を実行します

ワークフロー

  1. セットアップ — 依頼に該当する各 セットアップ 行を順に処理します。完了条件を満たす場合はスキップします。user の場合は、必須なら方法を出力して停止し、任意ならそれなしで続行します。ask の場合は、依頼に含まれる情報を入力し、残りを1つのメッセージでまとめて尋ね、各回答を記録します。auto と static の場合は実行します。
  2. コントラクト — design-contract.md と preview-contract.md を読みます。
  3. レシピ — レシピの行を1つ選び、[Read]列にあるすべてのドキュメントを開きます。

レシピ

意図表現例読むもの
セットアップ「building-design をセットアップして」「building-design の準備はできていますか?」セットアップ — ワークフローのステップ1ですべての行を処理し、各行の状態を報告します
作成または修正「チェックアウト機能をデザインして」「ヒーローの見出しを短くして」、@design/design.md または .design.ts ファイルへの参照creating-design.md

コメント