<translate>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
```
body{
font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",sans-serif;
background:#ffffff;
color:#111827;
line-height:1.75;
}
.container{
max-width:1100px;
margin:0 auto;
padding:0 24px;
}
.hero{
background:#000000;
color:#ffffff;
padding:120px 24px;
text-align:center;
}
.badge{
display:inline-block;
padding:8px 16px;
border-radius:999px;
background:rgba(59,130,246,.16);
color:#60a5fa;
font-size:14px;
font-weight:700;
margin-bottom:24px;
word-break:keep-all;
}
.hero h1{
font-size:62px;
font-weight:900;
line-height:1.18;
margin:0 auto 28px;
color:#ffffff !important;
text-shadow:0 2px 18px rgba(96,165,250,.28);
max-width:900px;
word-break:keep-all;
overflow-wrap:normal;
white-space:normal;
letter-spacing:-0.02em;
}
.hero h1 .title-line{
display:block;
}
.hero p{
font-size:23px;
color:#e5e7eb;
max-width:760px;
margin:0 auto;
word-break:keep-all;
overflow-wrap:normal;
}
.highlight{
color:#60a5fa;
}
.section{
padding:96px 0;
}
.section-title{
font-size:40px;
font-weight:800;
text-align:center;
margin-bottom:24px;
color:#111827;
line-height:1.45;
word-break:keep-all;
overflow-wrap:normal;
}
.section-desc{
font-size:20px;
color:#4b5563;
text-align:center;
max-width:760px;
margin:0 auto;
line-height:1.85;
word-break:keep-all;
overflow-wrap:normal;
}
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
margin-top:56px;
}
.card{
padding:32px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e5e7eb;
}
.card h3{
font-size:22px;
margin-bottom:12px;
color:#111827;
line-height:1.5;
word-break:keep-all;
overflow-wrap:normal;
}
.card p{
color:#4b5563;
font-size:17px;
line-height:1.8;
word-break:keep-all;
overflow-wrap:normal;
}
.dark{
background:#000000;
color:#ffffff;
}
.dark .section-title{
color:#ffffff;
}
.dark .section-desc{
color:#cbd5e1;
}
.dark .card{
background:#111827;
border:1px solid #1f2937;
}
.dark .card h3{
color:#ffffff;
}
.dark .card p{
color:#cbd5e1;
}
.link-box{
margin-top:48px;
padding:34px;
border-radius:24px;
background:#f8fafc;
border:1px solid #dbeafe;
text-align:center;
}
.link-box h3{
font-size:24px;
color:#111827;
margin-bottom:12px;
line-height:1.5;
word-break:keep-all;
}
.link-box p{
font-size:17px;
color:#4b5563;
margin-bottom:24px;
word-break:keep-all;
line-height:1.8;
}
.kimi-button{
display:inline-block;
padding:14px 26px;
border-radius:999px;
background:#2563eb;
color:#ffffff !important;
font-size:17px;
font-weight:800;
text-decoration:none !important;
transition:all .2s ease;
}
.kimi-button:hover{
background:#1d4ed8;
transform:translateY(-2px);
}
.project-box{
background:#ffffff;
padding:40px;
border-radius:24px;
box-shadow:0 10px 40px rgba(0,0,0,.08);
margin-top:50px;
}
.project-box h3{
font-size:28px;
margin-bottom:14px;
color:#111827;
line-height:1.4;
word-break:keep-all;
}
.project-box p{
color:#4b5563;
font-size:18px;
margin-bottom:18px;
line-height:1.8;
word-break:keep-all;
overflow-wrap:normal;
}
.project-box ul{
margin-top:16px;
padding-left:20px;
}
.project-box li{
margin:12px 0;
color:#374151;
font-size:17px;
line-height:1.75;
word-break:keep-all;
overflow-wrap:normal;
}
.quote-box{
margin-top:52px;
padding:36px;
border-radius:24px;
background:#eff6ff;
border:1px solid #bfdbfe;
color:#1e3a8a;
font-size:21px;
font-weight:700;
text-align:center;
line-height:1.8;
word-break:keep-all;
overflow-wrap:normal;
}
.cta{
background:linear-gradient(135deg,#000000,#111827);
color:#ffffff;
padding:120px 24px;
text-align:center;
}
.cta h2{
font-size:54px;
line-height:1.2;
margin-bottom:12px;
word-break:keep-all;
}
.cta p{
font-size:22px;
color:#cbd5e1;
margin-top:26px;
max-width:760px;
margin-left:auto;
margin-right:auto;
line-height:1.8;
word-break:keep-all;
overflow-wrap:normal;
}
@media(max-width:768px){
.hero{
padding:80px 20px;
}
.badge{
font-size:12px;
padding:7px 14px;
}
.hero h1{
font-size:40px;
line-height:1.25;
}
.hero p{
font-size:19px;
line-height:1.75;
}
.section{
padding:72px 0;
}
.section-title{
font-size:31px;
line-height:1.45;
}
.section-desc{
font-size:18px;
}
.link-box{
padding:28px 22px;
}
.link-box h3{
font-size:22px;
}
.kimi-button{
width:100%;
max-width:320px;
padding:14px 20px;
}
.quote-box{
font-size:18px;
padding:28px 22px;
}
.cta h2{
font-size:34px;
}
.cta p{
font-size:18px;
}
}
</style>
```
</translate>
MULTI AI WORKFLOW · VIBE CODING · WEB PROJECT
一つのAIだけを
使わないでください。
タスクに応じてAIモデルを使い分ければ
より速く作成でき、
トークン費用もはるかに合理的に管理できます。
```
AIコーディングの核心は何を使うかよりも
いつ、どのように使い分けるかにあります
この講義は、特定のAIツール一つだけを紹介する授業ではありません。
一つの開発フローの中で、複数のAIモデルを状況に合わせて選択し、
必要な瞬間にモデルを切り替えながらウェブサービスを完成させる過程を扱います。
アイデアと画面構成
最初からコードを書き始めるのではなく、AIを活用してサービスの方向性や画面構成を素早く形にします。
実装と修正
実際の開発環境でAIに機能実装を任せ、結果を検討しながら必要な部分を整えます。
モデルの切り替えとコスト管理
すべての作業に高価なモデルを使わず、役割に合ったモデルを選択してトークン費用を節約する方法を学びます。
このような悩みをお持ちの方なら、この講義がぴったりです
AIコーディングを使ってみたことはあるものの、まだ自分の作業スタイルとして確立できていない方のための実践講義です。
AIを使っても結果にムラがある方
単にプロンプトをうまく書くことにとどまらず、AIに仕事を分担して任せる流れを習得します。
トークン費用が負担に感じる方
すべての段階で同じモデルを使わず、草案・実装・検討の段階ごとにモデルを使い分けます。
AIコーディングを初めて始める方
複雑な理論よりも、実際のウェブサイトを作る流れに沿って自然に身につけることができます。
講義で扱う開発の流れ
一つのプロジェクトを進めながら、複数のAIツールを役割ごとに使用します。
重要なのはツールの名前よりも、自分の作業に合わせて組み合わせる方法です。
Kimi
迅速にアイデアを具体化し、ウェブページの草案やコンテンツ構造を作成するために活用します。
OpenCode
ローカル開発環境でAIと共にコードを修正し、プロジェクトを実際にブラッシュアップしていきます。
Codex
より複雑な実装やコードの改善が必要な瞬間にモデルを切り替え、作業効率を高めます。
KimiモデルAPIを直接使ってみたいなら
講義で扱うKimiモデルAPIを直接テストすることができます。
複数のAIモデルを共に活用するワークフローを実習しながら、
Kimiをどのような役割に使うと良いか、直接確認してみてください。
Kimi 모델 API 사용해보기
この講義の目標は「一つのAIを使いこなす方法」ではなく、
「複数のAIを自分の開発フローに合わせて組み合わせる方法」を習得することです。
結局重要なのは、柔軟な開発ワークフローです
AIモデルによって得意なことが異なります。
あるモデルは素早く安価に下書きを作るのに適しており、
あるモデルは複雑なコードの実装やレビューに適しています。
この講義では、一つのコンテキストの中でモデルを切り替えながら、
コストと成果物のバランスを取る実践的なAI開発手法を体験します。
実践プロジェクト
AIと共にコンテンツを発信できる
自分だけのウェブサイトを制作します。
Modern Content Website
単なるサンプルページではなく、実際に自分のコンテンツを載せて運営できる静的ウェブサイトを作ります。
開発経験が多くなくても、全体の流れに沿ってAIと一緒に成果物を完成させられるように構成しました。
- サービスアイデアと画面構成の検討
- 洗練されたランディングページの制作
- コンテンツを発行できる静的ブログの構造作り
- レスポンシブUIの構成
- AIに修正を依頼し、結果を検討する
- モデルを切り替えながら実装品質とトークンコストを調整する
- 実際のサービスのように見える形で仕上げる
受講後には、このような感覚が身につきます
「この作業はどのAIに任せるのが良いだろう?」
「どこまでAIに任せて、どこで自分が判断すべきだろう?」
「コストを抑えつつ、成果物のクオリティを維持するにはどうすればいいだろう?」
これらの問いに対して自ら判断し、
自分のプロジェクトに合ったAI開発フローを自ら構成できるようになることが、この講義の核心です。
より速く作り、
より柔軟に組み合わせ、
より合理的に開発してください。
Kimi · OpenCode · Codexを一つの流れで繋ぎ
実践的なAI開発ワークフローを体験してみてください。