Open Design (Claude Skill) — インストール & ライブデモ

なぜ使うのか

主な機能

19のデザインskill — Web、モバイル、スライド、画像、動画
71のブランド品質デザインシステムスキン
サンドボックスプレビュー（HTML/PDF/PPTX/MP4）
Claude Code、Codex、Cursor、Gemini、OpenCode、Copilotで動作
ローカルファースト；SaaS依存なし

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Open Design

特定のブランドスタイルでピッチデッキを生成する

👤 創業者 / PM ⏱ ~30 min beginner

使うタイミング： 10枚のデッキが必要だが、Keynoteと格闘したくない場合。

フロー

ブランドを選択

Use open-design. Pick the Stripe-style skin. List its tokens.✓ コピーしました

→ スキントークンが表示される
下書き

Generate a 10-slide deck for our launch — title, problem, solution, traction, roadmap, ask. Use the Stripe skin.✓ コピーしました

→ 一貫したスタイルの10枚のスライド
エクスポート

Export to PPTX so I can edit in Keynote.✓ コピーしました

→ PPTXファイルが書き込まれる

結果： AI生成に見えないデッキ；一貫したブランドの感触。

注意点

画像生成が汎用的に見える — skillがアイコンとイラストセットを提供；どれを使うか指定する

組み合わせ： filesystem

ブランドスタイルでランディングページをプロトタイプする

👤 ヒーローページをイテレーションする開発者/デザイナー ⏱ ~25 min intermediate

使うタイミング： 本番ビルド前に3つのビジュアル方向性が必要な場合。

フロー

バリアント

Generate 3 hero variants — Linear, Notion, and Vercel skins. Same content, different style.✓ コピーしました

→ 3つのHTMLプレビュー
選択してイテレーション

Take the Linear one. Tighten typography and add a secondary CTA.✓ コピーしました

→ 洗練されたHTML

結果： 深いビルドの前に素早い方向性の意思決定。

注意点

スキントークンが既存のCSSと衝突する — サンドボックスプレビューが競合を回避；選択的に統合する

組み合わせ： ui-ux-pro-max-skill

スクリプトから短いマーケティング動画を生成する

👤 マーケティング / DevRel ⏱ ~60 min intermediate

使うタイミング： 30秒のスクリプトがあり、動画が必要な場合。

フロー

絵コンテ

Turn this script into a HyperFrames storyboard — 6 shots, brand-styled.✓ コピーしました

→ 絵コンテ
レンダリング

Render to MP4.✓ コピーしました

→ MP4ファイルが書き込まれる

結果： デザイナーに依頼せずにブランドと一致した短い動画。

注意点

レンダリング時間が無視できない — 最終レンダリング前に絵コンテでイテレーションする

組み合わせ

他のMCPと組み合わせて10倍の力を

open-design-skill + ui-ux-pro-max-skill

ブランドスキン + デザインの基礎

Use UI/UX Pro Max for typography, open-design for brand skin.✓ コピーしました

open-design-skill + filesystem

プロジェクトディレクトリへの出力

Export deck to /presentations/launch/.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
list_skins	(なし)	ブランドスタイルを選ぶとき	free
design_web	spec, skin	Webページ / プロトタイプ	token
design_slides	outline, skin	ピッチ / トークのデッキ	token
export	format: html\|pdf\|pptx\|mp4	最終納品時	レンダリング時間

コストと制限

運用コスト

APIクォータ: N/A
呼び出しあたりのトークン: レンダリング重視の出力（動画）では重め
金額: 無料
ヒント: 最終レンダリングではなく絵コンテでイテレーションする

セキュリティ

権限、シークレット、影響範囲

最小スコープ： ローカルサンドボックス + ファイル書き込み

認証情報の保管： なし

データ送信先： なし — ローカル

トラブルシューティング

よくあるエラーと対処法

動画のレンダリングが失敗する

ffmpegがインストールされていることを確認；skillが不足している依存関係をフラグする

スキンが一貫して適用されない

一部のテンプレートはスキンシステム以前のもの；READMEに記載されているスキン対応テンプレートを使用

代替案

Open Design 他との比較

代替案	代わりに使う場面	トレードオフ
Anthropic Claude Design	ファーストパーティサポートが必要な場合	クローズド；カスタマイズ性が低い
手作業のデザイン	デザイナーがいる場合	イテレーションが遅い

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る