Gemini CLI 拡張機能により、AI のイメージ生成とフロントエンドの設計スキルが実現。

インストール

またはローカルパスからインストールします。

スキル

###ナノバナナプロ(画像生成)

GoogleのGemini 2.5 Flash(Nano Banana Pro)を使って画像を生成します。 デモビデオをご覧ください。

トリガー: generate image, create image], [make image], [nano banana]], [[image-generation]]]

前提条件:

• uv - Pythonパッケージマネージャ(画像生成スクリプトを実行するために必須)。 uvインストールウォークスルーを見る
• [GEMINI_API_KEY Google AI API キーで環境変数

使用法:

例:

• 「サンゴ、ティール、そして深いネイビーの背景の金の過酷な円を重ねるミニマルな幾何学模様」
• 「濡れた通りに映るネオンライトで夕日で未来の街並み」

###フロントエンドデザイン

設計品質の高い特徴的な、生産等級のフロントエンド インターフェイスを作成します。

注記: このスキルは、より簡単なインストールのためにanthropics/skillsからコピーされます。

Triggers: frontend, design], ui], [component], [page, [[[T12], [landing page, [[dashboard]], [[[website]]]

Gemini Skills

A Gemini CLI extension providing AI-powered image generation and frontend design skills.

Installation

gemini extensions install https://github.com/buildatscale-tv/gemini-skills

Or install from a local path:

gemini extensions install /path/to/gemini-skills

Skills

Nano Banana Pro (Image Generation)

Generate images using Google’s Gemini 2.5 Flash (Nano Banana Pro). See the demo video.

Triggers: generate image, create image, make image, nano banana, image-generation

Prerequisites:

• uv - Python package manager (required to run the image generation script). See the uv installation walkthrough
• GEMINI_API_KEY environment variable with your Google AI API key

Usage:

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Your image description" \
  --output "/path/to/output.png" \
  --aspect landscape  # optional: square, landscape, portrait
  --reference "/path/to/reference.png"  # optional: reference image

Example prompts:

• “A minimalist geometric pattern with overlapping translucent circles in coral, teal, and gold on a deep navy background”
• “A futuristic cityscape at sunset with neon lights reflecting on wet streets”

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality.

Note: This skill is copied from anthropics/skills for easier installation.

Triggers: frontend, design, ui, web, component, page, interface, landing page, dashboard, website

This skill guides creation of visually striking, memorable interfaces that avoid generic AI aesthetics. It emphasizes:

• Bold typography choices
• Cohesive color themes
• Purposeful animations and micro-interactions
• Unexpected layouts and spatial composition
• Atmospheric backgrounds and visual details

Extension Management

# List installed extensions
gemini extensions list

# Update this extension
gemini extensions update buildatscale-gemini-skills

# Disable extension
gemini extensions disable buildatscale-gemini-skills

# Enable extension
gemini extensions enable buildatscale-gemini-skills

# Uninstall extension
gemini extensions uninstall buildatscale-gemini-skills

Development

To develop locally, link the extension:

gemini extensions link /path/to/gemini-skills

Changes will be reflected immediately without needing to run gemini extensions update.

Repository Structure

.
├── gemini-extension.json    # Extension configuration
├── GEMINI.md                # Context file loaded by Gemini CLI
└── skills/
    ├── nano-banana-pro/
    │   ├── SKILL.md         # Skill documentation
    │   └── scripts/
    │       └── image.py     # Image generation script