Vibe Coding とは?10分で何かを作ってみよう
beginner~10 分0/4 ステップ
Vibe Coding とは?
Vibe coding の考え方はシンプルです。あなたが作りたいものを言葉で説明すると、AI がそれを作ってくれます。
構文の暗記は不要。Stack Overflow の迷宮にはまることもありません。あなたは設計者 — あなたがビジョンを描き、AI がレンガを積みます。この最初のレッスンでは、HTML を書くだけで自分のプロフィールカードを作ります。AI と対話するとき実際に何が生成されているのかを理解し、10分以内に本物の成果物を世に出しましょう。
手順
1
あなたの名前を入れた <h1> を追加しましょう — これはあなた自身のプロフィールカードです
ヒント： 試してみましょう: `<h1 class="text-2xl font-bold text-white text-center mb-2">Your Name</h1>`
2
自分の仕事や人となりを一文で書いた <p class="bio"> を追加しましょう
3
<li> を3つ入れた <ul class="skills"> を追加しましょう — あなたの得意なことは何ですか?
4
一番下に <a class="cta-link"> ボタンを追加しましょう — あなたとつながるためにクリックできるリンクです
あなたのコード
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ViBotでバイブコーディング無料メッセージ 0 / 12
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ：あなたの名前を入れた <h1> を追加しましょう — これはあなた自身のプロフィールカードです
ライブプレビュー
ライブプレビュー