Claude Code & Codexの高忠実度HTMLデザイン。

スライドデッキ、ランディングページ、インタラクティブなプロトタイプ、インタラクティブな解説、アニメーション、デザインシステムなど、構造化されたデザイン思考と組み込みの高品質なガードレールによって支えられています。

デモ ·例 ·バグ報告

---

クイックスタート

クロード・コード

インストール後、cc-designは/cc-design:designコマンドで起動します。

コデックス

インストール後、cc-designは[$cc-design参照を通じて有効化されます。

例示プロンプト

CC-Designはコンテキスト収集、設計計画、品質チェック、検証を担当します。あなたが計画を承認し、それが構築します。

ショーケース

能力

cc-design

High-fidelity HTML design for Claude Code & Codex.

Slide decks, landing pages, interactive prototypes, interactive explainers, animations, design systems, and more — powered by structured design thinking and built-in quality guardrails.

Demo · Examples · Report Bug

---

Quick Start

Claude Code

# 1. Add the cc-design marketplace
/plugin marketplace add ZeroZ-lab/cc-design

# 2. Install the plugin
/plugin install cc-design@cc-design

# 3. Reload plugins to activate
/reload-plugins

After installation, cc-design activates via /cc-design:design command.

Codex

# 1. Add the cc-design marketplace from GitHub
/plugin marketplace add ZeroZ-lab/cc-design

# 2. Install the plugin
/plugin install cc-design@cc-design

# 3. Reload plugins to activate
/reload-plugins

After installation, cc-design activates via $cc-design reference.

Example prompts

"Design a landing page for our SaaS product"
"Create a 10-slide pitch deck for the Q3 board meeting"
"Build an interactive prototype of the checkout flow"
"Create an interactive explainer showing how our RAG pipeline works"
"Make a comparison explainer for React vs Vue"
"Build a decision tree for tech stack selection"
"Animate this logo reveal with the Pentagram style"
"Export the deck as editable PPTX"

cc-design handles context gathering, design planning, quality checks, and verification — you approve the plan, it builds.

Showcase

Capabilities