강의

멘토링

커뮤니티

BEST
Programming

/

AI Coding

[VOD] 6週間完成!開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

10分で바이브코딩で作れる単純なサービスはもう捨てましょう! '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

難易度 中級以上

受講期間 無制限

  • codecamp
  • nwd09074926
AI 활용법
AI 활용법
실습 중심
실습 중심
바이브코딩
바이브코딩
커서
커서
AI 코딩
AI 코딩
React
React
Next.js
Next.js
cursor
cursor
prompt engineering
prompt engineering
Vibe Coding
Vibe Coding
AI 활용법
AI 활용법
실습 중심
실습 중심
바이브코딩
바이브코딩
커서
커서
AI 코딩
AI 코딩
React
React
Next.js
Next.js
cursor
cursor
prompt engineering
prompt engineering
Vibe Coding
Vibe Coding

学習した受講者のレビュー

学習した受講者のレビュー

4.9

5.0

희소식

20% 受講後に作成

現在2セクションまで受講を完了し、講義がとても良いので途中でレビューを残します。 2セクションまでしか見ていないのに、この講義をどれほど一生懸命準備してくださったのかが十分に分かりました。プロンプトをどのようにすればより効率的に使用できるのかが分かりましたし、教えてくださるプロンプトがとても有用だと思います。 私が見たバイブコーディング講義の中で現在まで最も満足のいく講義です。質問を投稿すると素早く回答してくださるので、受講中に問題が発生しても無理なくうまく続けることができました。 進度をどんどん進めていたところ、カーソルの使用量制限にかかってしまい、やむを得ず進行を止めましたが、後でまた続きから楽しく受講します。 良い講義をありがとうございます。

5.0

정진호 Jung

32% 受講後に作成

会社で私の目の前に迫った状況に本当にぴったり合う救世主のような講義です..!

5.0

항상배우는아이

100% 受講後に作成

Live チャレンジの後半にある追加講義だけを別途販売していただけると嬉しいです。バックエンド部分の講義もお願いします~~

受講後に得られること

  • バイブコーディングでFigmaデザインと100%同一にUI生成する方法

  • 実際に適用可能なプロンプトの提供

  • バイブコーディングで機能中心の全体プロジェクト完成

  • バイブコーディング ポートフォリオ

  • 会社で使用可能な実務中心のVibeCoding

banner


開発者の皆さん!

AIでコーディングしていて
無駄な作業で時間を浪費した経験、ありますよね?


現実:思い通りにならない 😭😭


多くの開発者がAIを活用してコーディングをしながら
時間とリソースをすべて無駄にした経験を語ることがあります。


そこでコードキャンプがこのお悩みを解決するために
開発者のための「バイブコーディング」を準備しました。

.

.

.

開発者のための
本物のバイブコーディング実務編


YouTubeでも教えてくれない
本当の実務でプロンプトを体系的に活用する方法を
しっかりお教えします。



Inflearn独占
[ 初 公 開 ]


AIで、今や開発者が設計した構造のまま
即座に実装できます。


コードキャンプの講義を受けた後の私 = 望む形のページが完成!



コードキャンプと一緒ならプロンプトのみ
お望みのUIや機能を実装できます。


コードキャンプだけの開発者のための
バイブコーディング秘訣が気になりませんか?


本講義は
開発者のためのVibe Codingです。

なぜバナナが代表イメージなのですか?バナナといえばVibe Coding思考の流れに沿ってVibe Codingらしく選びました。しかし、開発者のためのVibe Codingは感覚だけでは進められません。体系的で設計ベースで進める必要があります。

この講座は開発者のための真剣なVibe Codingです。実務に適用可能なレベルのVibe Codingです。
特に、ジュニア開発者であればAI時代に必ず知っておくべき必須スキルです。

Figmaを扱えるProject Manager、UIUX designer、サービス企画者が学習するにも十分な難易度で進めています。一人起業やN jobを望むなら挑戦してみてください!

講座の後、皆さんは...

1. どんなFigmaデザイン100%実装

Vibe Codingでは、Figmaデザインを100%実装できず、もどかしい思いをされていませんか?

私たちのチーム、または自分が作りたい正確な
Figmaデザインを、Vibe Codingで
100%正確に、素早く生成する秘訣を公開します。

不完全な初期Figma MCPの成果物 → 正確に生成する(ヤノルジャホームページの例)

2. 企画意図通りに機能を100%実装

5分で作れる単純なバイブコーディングサービスではなく、
本格的なサービスを作りたかったのではないですか?

このコースの後は、実際の実務でも完全自動化バイブコーディングを適用して作業できます!

もっともらしい機能ではなく、本当に実務で必要な機能を作ります!

実務のためのバイブコーディングは
違わなければなりません。

コード一行もなく、
プロンプトで実務サービス構築


「感情日記帳」プロジェクトでVibeCodingのほぼすべての方法論を学習します!

  • Figmaデザインをそのままに UI を生成する

  • 実務開発のように共通コンポーネントを作る

  • バイブコーディングのための開発順序を決める

  • 様々な機能の実装とAPI連携

  • ログインと権限分岐処理

  • 開発者らしい並列処理方法

  • AIがミスをした時に安全に元に戻す



金のように貴重なAI、
言うことをよく聞くプロンプトを提供


私の意図通りに120%の成果物を得るプロンプト提供及び作成法を学習します!

  • カーソルルールの設定方法

  • 再利用可能なプロンプトの提供

  • 100%安定した結果を得るためのルール

  • バイブコーディングのためのフォルダ構造




私の意図通りに
120%の成果物を得る開発手順


AIが生成するバイブコーディング方式は、コードの衝突を避けるための開発順序が重要です!

プロンプトはすべて同じ
並列処理はCursor AIの長所


AIが生成するバイブコーディング方式は、コードの衝突を避けるために並列可能な範囲を把握する必要があります!

開発者・非開発者を問わず、状況に応じて
実務に適用可能なVibe Codingを学ぶことができます。

  • バイブコーディングに特化した開発原理・概念を含めて、非開発者でも十分に学習可能です。

  • 開発者がバイブコーディングで自主的に成長できるようにロードマップを提案します。

どの講座よりも、
制作が難しかったですが、結局自信のあるカリキュラムが完成

バイブコーディングの特性上、毎回異なる結果物が出る可能性があるため、カリキュラムの完成が難しかったです。
誰もが同じ結果物が出るように修正及び結果物を再検討する方法を見つけました!

  • 実務に沿った明確なカリキュラムをご確認ください。


ちょっと待って、参考にしてください!

今ご覧になっている講座の価格が最も安いです

講座は継続的にアップデート予定であり、
それに伴う価格改定が行われる可能性があります!

すべてのプロジェクトを
バイブコーディングで作ることができます!

1. プロンプトを修正するだけで作ってみましょう!

  • 講義プロジェクトの感情日記帳と有名ブログサービス「Velog」の原理は同じです!

  • より複雑な旅行プラットフォーム「マイリアルトリップ」も原理は同じです!


2. 有名なブログサービス「Velog」のUIとほぼ全て同じです。

感情日記帳(講義実習プロジェクト)

  • 日記保管箱 → 写真保管箱への移動

  • 日記カード

  • 全体フィルター

  • 検索ロジック

  • すべてのページ遷移ロジック

  • 二重モーダルおよびプロバイダーロジック

Velog(有名なブログサービス)

  • トレンディング → 最新・フィード移動

  • ブログカード

  • 今週のフィルター

  • 検索ロジック

  • すべてのページ遷移ロジック

  • 二重モーダルおよびプロバイダーロジック

  • 日記保管箱 → 写真保管箱への移動:トレンディング → 最新・フィードへの移動と同じ

  • 日記カード:ブログカード同一

  • 全体フィルター:今週フィルター機能は同一

  • 検索ロジック同一

  • すべてのページ遷移ロジックは同一

  • 二重モーダルおよびプロバイダーロジック同一

3. 旅行プラットフォーム「マイリアルトリップ」のフロントエンド原理とほぼ同じです。



今ではどんなサービスでも実務適用バイブコーディングで素早く簡単に
フロントエンドをAtoZ実装できます。

練習できる
様々なFigmaデザインを提供しています。

HTMLからデザインソースを直接取得するHTML to Designプラグインの使い方も扱っています!

  • プロンプトを修正して、様々なデザインでバイブコーディングを練習してみてください。

  • 1人起業または収益化サービスのためのプロジェクトを実装してみてください。

Velog Figma

マイリアルトリップ Figma

29cm Figma

受講前の注意事項

Cursor AI 有料プランが必要です。

最善の結果を出すために、Cursor AIの有料プランを使用しています。Claude 4.0基準でAI生成を行うため、トークン消費がある点にご注意ください。

Figmaは無料プランで利用できます。

バイブコーディングでプロジェクトを作成する際は、Figmaの有料サービスであるDevモードがなくても可能です!提供されたデザインを皆さんのページにコピペして使用してください。

前提知識と注意事項

  • 基礎的なHTML、CSS、Javascriptの知識があると良いです。

  • Reactの基礎知識があれば、バイブコーディングがもっと簡単になります!

  • プロンプトの書き方と開発の概念を一緒に学ぶことができます。

こんな方におすすめです

  • バイブコーディングでフロントエンドを素早く作りたい開発者なら

  • Figmaで企画及びデザインが可能な方、特にUI/UXデザイナー&PMなら

  • 毎月入ってくる「第2の給料」を退勤後に簡単に作りたいなら

  • スタートアップで素早い成果物が必要なら

この講義がぴったりだと思います。

もしかして、ノウォンドゥが
初めてですか?

これまでいただいたノウォンドゥ様のキーワードと受講レビューをまとめました。
この講義を通じてノウォンドゥ様と共にアプリ開発者として成長してみてください🚀

#親切な講義
#細かい
#パワフル
#耳にすっと入る
#本物の開発者
#メンターのメンター


#コーヒー豆
#いいねいいね

何か
ご質問はありますか?

Q. どの程度の事前知識が必要ですか?

React.jsまたはNext.jsの基礎知識をお持ちの方に最適化された講座です。
プロンプトベースのバイブコーディングで、開発サイクル全体を学習できる核心講座です。
working promptを提供するため、プロンプトを応用して個別プロジェクトに適用できます。
私たちが経験した試行錯誤を皆さんがしなくて済むよう、できる限り多くの内容を盛り込みました。

Q. Cursorはどのプランに加入すればよいですか?

より確実な結果を得るために、より賢いAIを選択することが望ましいと判断しています。講義ではCursorの有料プランを使用しており、Claude 4.0とo3で開発を進めています。したがって、トークン消費が多少発生している点を必ずご確認ください。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • バイブコーディングで実サービスを構築したい誰でも

  • バイブコーディングを会社で使いたい誰でも

  • バイブコーディングのポートフォリオが必要な誰でも

  • 精巧な1人起業サービスをVibeCodingで作りたい誰でも

  • 自分のサービスを作りたいUIUXデザイナー

  • 自分のサービスを作りたい企画者またはPM

前提知識、
必要でしょうか?

  • React基礎

  • HTML、CSS基礎

こんにちは
です。

15,650

受講生

468

受講レビュー

230

回答

4.8

講座評価

15

講座

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

カリキュラム

全体

57件 ∙ (23時間 36分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

34件

4.9

34件の受講レビュー

  • heetask님의 프로필 이미지
    heetask

    受講レビュー 5

    平均評価 5.0

    修正済み

    5

    20% 受講後に作成

    現在2セクションまで受講を完了し、講義がとても良いので途中でレビューを残します。 2セクションまでしか見ていないのに、この講義をどれほど一生懸命準備してくださったのかが十分に分かりました。プロンプトをどのようにすればより効率的に使用できるのかが分かりましたし、教えてくださるプロンプトがとても有用だと思います。 私が見たバイブコーディング講義の中で現在まで最も満足のいく講義です。質問を投稿すると素早く回答してくださるので、受講中に問題が発生しても無理なくうまく続けることができました。 進度をどんどん進めていたところ、カーソルの使用量制限にかかってしまい、やむを得ず進行を止めましたが、後でまた続きから楽しく受講します。 良い講義をありがとうございます。

    • 46firstmate님의 프로필 이미지
      46firstmate

      受講レビュー 1

      平均評価 5.0

      5

      32% 受講後に作成

      会社で私の目の前に迫った状況に本当にぴったり合う救世主のような講義です..!

      • codecamp
        知識共有者

        実務で役に立てて良かったです!今後もさらに高度化して使ってみてください!

      • はい、積極的に応用してみます!Claude Codeに関してもし何かコツがあれば、講座にしてください!

    • promptbankoffici9282님의 프로필 이미지
      promptbankoffici9282

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      Live チャレンジの後半にある追加講義だけを別途販売していただけると嬉しいです。バックエンド部分の講義もお願いします~~

      • blessthy님의 프로필 이미지
        blessthy

        受講レビュー 14

        平均評価 5.0

        5

        95% 受講後に作成

        Cursor AIバイブコーディングを体験したくて受講したのですが、思いがけずこれまで勉強してみたかったフロントエンドも一緒に体験してしまいました。超お得!元々フロントエンドをやっていた方はすぐに受講できそうですが、私は基礎を身につけるのに少し時間がかかりました。講師の方が初めて触れる方を基準に簡潔に継続して分かりやすく説明してくださったのが良かったし、プロンプトをどのように運用すべきかよく学べました。最近はGemini 3が出てからAntigravityがCursorの対抗馬として浮上してきているそうですね。業界は本当に速いですね。それでもここで学んだ本質は変わらないと思います。良い講義を作ってくださってありがとうございます。

        • ppos786679님의 프로필 이미지
          ppos786679

          受講レビュー 3

          平均評価 5.0

          5

          18% 受講後に作成

          これは実際の開発に役立つ。少し難易度はあるが、中途半端なバイブコーディング講義よりもずっと良い。

          ¥20,116

          codecampの他の講座

          知識共有者の他の講座を見てみましょう!

          似ている講座

          同じ分野の他の講座を見てみましょう!