読み込み中...
確認：体験を伝えて動くUIをつくり、頼み方を変えて直せたか？ | デザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン | BONO
一覧
デザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
—
%
1
はじめに：Claude Codeで、アイデアを「動くUI」にする
イントロ
Claude Codeで、アイデアを「動くUI」にしてデザインする
チャレンジ
確認：このレッスンで何をするか、言えるか？
2
Claude Codeを使える状態にする
実践
Cursorでターミナルを開いて、Claude Codeを入れる
実践
ログインして、Claude Codeを立ち上げる
チャレンジ
確認：Claude Codeが動いて、会話できたか？
3
ユーザーと体験を伝えて、動くUIをつくる
実践
ユーザーと体験のゴールを伝えて、Todoサービスをつくる
実践
具体的に頼んで直す・戻す・スクショで伝える
チャレンジ
確認：体験を伝えて動くUIをつくり、頼み方を変えて直せたか？
4
Claude Codeの6つの基本操作を覚える
実践
プロンプトを送る・止める
実践
ファイルを渡す（@で指定・ドラッグ＆ドロップ）
実践
編集の承認と、モードの切り替え
実践
スラッシュコマンドで、機能を呼び出す
チャレンジ
確認：6つの基本操作を使えたか？
5
まとめ
イントロ
まとめ：Claude Codeでできるようになったこと
チャレンジ
3.
確認：体験を伝えて動くUIをつくり、頼み方を変えて直せたか？
クエスト3: ユーザーと体験を伝えて、動くUIをつくる
このセクションのゴールは、誰のどんな体験かを伝えて動くUIを作り、頼み方を変えて直せることです。
完了にする
お気に入り
質問する
シェア
このセクションのゴールは、誰のどんな体験かを伝えて動くUIを作り、頼み方を変えて直せることです。
チェック
いきなり「作って」と頼まずに、ユーザー像や体験のゴールなどを書いたプロンプトを渡した
プロンプトをマークダウンのファイルにまとめて保存し、Claude Codeに渡した
できたTodoサービスをブラウザで開いて、タスクを追加できた
色などを1か所、具体的に頼んで変えてもらった
「戻してください」と頼んで、元に戻せた
スクリーンショットを貼って、修正を頼めた
完了にする
お気に入り
質問する
シェア
前
具体的に頼んで直す・戻す・スクショで伝える
次
プロンプトを送る・止める
