mcpField
V
visual-design

visual-design

github.com/factory-aiクリエイティブ・メディア117160 回インストール3 日前に更新
リポジトリ

visual-design について

visual-designは、コマンドラインでの画像生成・編集とプレゼンテーション作成を行うスキルです。ビジュアル素材にはnanobanana CLI、Markdown形式のスライドにはSlidevを使います。

主な機能

  1. 01nanobanana CLIで画像を生成・編集
  2. 02ロゴ・アイコン・図の作成
  3. 03パターンやUI素材の制作
  4. 04SlidevでMarkdownスライドを作成
  5. 05PowerPointへの出力やホスト可能なSPAの構築

活用シーン

  1. 01ロゴやアイコンの案を複数生成
  2. 02写真の編集や背景の削除
  3. 03認証フローなどの図の作成
  4. 04プレゼンテーションの作成と出力

インストール

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

$npx skills add https://github.com/factory-ai/factory-plugins --skill visual-design

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

同梱ファイル

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

image-generation.md
presentations.md
reference-slide-example.md

詳細

ビジュアルデザイン

画像生成とプレゼンテーションです。

画像生成

nanobanana CLI を使って、コマンドラインから画像を作成・編集します。

npm install -g @factory/nanobanana
export GEMINI_API_KEY="your-key"

nanobanana generate "company logo" --count=4 --styles=modern,minimal
nanobanana edit photo.png "remove background"
nanobanana icon "settings gear" --style=flat
nanobanana diagram "auth flow" --type=flowchart

対応する用途：ロゴ、アイコン、図、パターン、写真の修復、UI アセット、ビジュアルシーケンス。

詳細：image-generation.md

プレゼンテーション

Markdown ベースのプレゼンテーションツール、Slidev を使ってスライドを作成します。

npm init slidev@latest
slidev                    # dev server
slidev export --format pptx   # export to PowerPoint
slidev build              # build as hostable SPA

Markdown でスライドを作成し、コードのハイライト、アニメーション、図、Vue コンポーネントを利用できます。

詳細：presentations.md および reference-slide-example.md

コメント

Markdown 対応