本文へスキップ
oh-my-design
はじめに▾

最初の5分

インストールして、一つの画面を改善する

バンドルを導入し、doctor で実際のファイルを確認したら、具体的な製品画面を一つ依頼します。

準備

  • 01 / 03

    Node.js 18以上

    準備済み20+
  • 02 / 03

    製品リポジトリ

    準備済みgit
  • 03 / 03

    Claude Code、Codex、OpenCode、または Cursor

    準備済みAI

クイックスタート

  1. 01

    プロジェクトルートを開く

    プロジェクト単位で導入すると、デザイン文脈も製品コードと一緒にバージョン管理できます。

  2. 02

    バンドルを導入

    対話式インストーラーは利用中のツールを検出し、完全な製品バンドルを既定値にします。

    npx oh-my-design-cli@latest
  3. 03

    再起動して検証

    エージェントを再起動し、新しいスキルを読み込ませます。doctor はカタログ、エージェント、DESIGN.md の不足を報告します。

    npx oh-my-design-cli@latest doctor
  4. 04

    最初の成果を依頼

    具体的な画面から始めます。エージェントはデザイン質問の前にリポジトリを確認します。

    DESIGN.md を使ってホーム画面を改善して。挙動を保ち、結果を検証して。

チャネル別の非対話インストール

Claude Code

スキル、サブエージェント、カタログ、安全にマージされるプロジェクトフックを導入します。

npx oh-my-design-cli@latest install-skills --agent claude-code --all

最初の変更が製品画面に反映されたら完了です

初回実行では、目に見える UI 改善、プロジェクトの DESIGN.md、次に依頼する内容まで確認します。