← 一覧へ
🎨 デザインCC / Codex 両対応難易度: 初心者
ダッシュボード作成 dashboard
ワンクリックでプロ級ダッシュボード！
これは何？
ダッシュボード作成は、管理画面や分析画面を簡単に作れるスキルです。1つのHTMLファイルで完結し、必要な要素がきれいに配置されます。初心者でも迷わず使えるよう、丁寧に設計されています。
これでできること
- 管理画面や分析用のダッシュボードを作成できる
- KPIカードやチャートを自動的に配置できる
- デザインシステムに基づいた配色やレイアウトを実装できる
- 1つのHTMLファイルで完結するコードを生成できる
こんな時に便利
ウェブアプリの管理画面を作りたい時
リアルタイム分析ダッシュボードが必要な時
シンプルなコントロールパネルを作りたい時
ダッシュボードのプロトタイプを素早く作りたい時
使い方
DESIGN.mdを参考に、ダッシュボードの目的を指定するだけです。KPIカードやチャート、ナビゲーションなど必要な要素が自動的に配置され、1つのHTMLファイルとして出力されます。
使用例（こう頼んでみよう）
販売管理用のダッシュボードを作成してくださいトラフィック分析ダッシュボードを生成してくださいユーザーアクティビティのダッシュボードを作ってください必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/nexu-io/open-design/tree/main/design-templates/dashboard手動で置く
Claude Code →
~/.claude/skills/dashboard/Codex →
~/.agents/skills/dashboard/使いこなしのコツ
- DESIGN.mdを確認して、デザインシステムに沿った配色を使いましょう
- ダッシュボードの目的を明確に伝えると、より適切なレイアウトが生成されます
- HTMLファイルの構造を理解するために、生成されたコードを確認しましょう