강의

멘토링

로드맵

BEST
Programming

/

AI Coding

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

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

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

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

こんなことが学べます

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

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

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

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

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

banner


開発者の皆さん!

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


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


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


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

.

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


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



Inflearn独占
[ 初 公 開 ]


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


コードキャンプの講義を聞いた後の私 = 望む形のページが出てくる!



コードキャンプと一緒ならonlyプロンプト
お望みのUIや機能を実装していただけます。


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


本講義は
開発者のためのバイブコーディングです。

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

この講義は開発者のための真剣なバイブコーディングです。実務に適用可能なレベルのバイブコーディングです。
特に、ジュニア開発者であればAI時代に必ず知っておくべき必須スキルです。

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

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

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

バイブコーディングでFigmaデザインを100%実装できずにもどかしい思いをしたことはありませんか?

私たちのチーム、または自分が作りたい正確な
Figmaデザインをバイブコーディングで
100%正確かつ迅速に生成する秘訣を公開します。

中途半端な初期Figma MCP成果物 → 正確に生成する(ヤノルジャホームページ例示)

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

5分で作れる単純なバイブコーディングサービスではなく、
きちんとしたサービスを作りたいと思いませんでしたか?

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

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

実務のためのVibe Codingは
違わなければなりません。

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


「感情日記帳」プロジェクトでバイブコーディングのほぼすべての方法論を学習します!

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

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

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

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

  • ログインおよび権限分岐処理

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

  • AIが間違えた時に安全に元に戻す



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


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

  • カーソルRule設定方法

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

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

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




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


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

プロンプトは全て同一
並列処理はCursor AIの長所


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

開発者・非開発者問わず、状況に応じて
実務適用可能なバイブコーディングを学習できます。

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

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

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

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

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


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

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

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

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

1. プロンプトを修正するだけで作ってみてください!

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

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


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

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

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

  • 日記カード

  • 全体フィルター

  • 検索ロジック

  • 全ページ移動ロジック

  • デュアルモーダル及びプロバイダーロジック

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

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

  • ブログカード

  • 今週のフィルター

  • 検索ロジック

  • 全ページ移動ロジック

  • デュアルモーダル及びプロバイダーロジック

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

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

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

  • 検索ロジック同一

  • 全ページ移動ロジック同一

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

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



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

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

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

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

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

Velog Figma

マイリアルトリップ Figma

29cm Figma

受講前の参考事項

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

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

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

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

前提知識および注意事項

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

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

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

このような方におすすめします

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

  • Figmaで企画・デザインが可能な方、特にUIUXデザイナー&PMなら

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

  • スタートアップを夢見るなら迅速な成果が必要

この講義がぴったり合うでしょう。

もしかして노원두가
初めてですか?

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

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


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

ご質問は
ございますか?

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

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

Q. カーソルはどのプランに入るべきでしょうか?

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

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

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

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

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

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

  • React基礎

  • HTML、CSS基礎

こんにちは
です。

15,203

受講生

417

受講レビュー

216

回答

4.8

講座評価

14

講座

"Try anything, Try everything!"

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

カリキュラム

全体

57件 ∙ (23時間 1分)

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

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

受講レビュー

全体

12件

5.0

12件の受講レビュー

  • heetask님의 프로필 이미지
    heetask

    受講レビュー 5

    平均評価 5.0

    修正済み

    5

    20% 受講後に作成

    I have completed up to Section 2, and the course is so good that I'm leaving a review in the middle of it. Even though I've only watched up to Section 2, I could already tell how much effort you put into preparing this course. I was able to learn how to use prompts more efficiently, and the prompts you teach seem extremely useful. This is the most satisfying course among all the VibeCoding courses I've taken so far. When I post questions, you respond quickly, so even when problems arise during the course, I can continue without any issues. I was making good progress, but I had to stop due to cursor usage limits, so I'll continue and enjoy the rest of the course later. Thank you for the great course.

    • ppos786679님의 프로필 이미지
      ppos786679

      受講レビュー 3

      平均評価 5.0

      5

      18% 受講後に作成

      This actually helps with real development. It's a bit challenging, but it's much better than mediocre vibe coding lectures.

      • adgjl11259350님의 프로필 이미지
        adgjl11259350

        受講レビュー 4

        平均評価 5.0

        5

        100% 受講後に作成

        It was the best. But maybe because Next.js was the main focus, more than half of the class content was about Next.js, which I think was a bit disappointing.

        • mytalk4813072님의 프로필 이미지
          mytalk4813072

          受講レビュー 1

          平均評価 5.0

          5

          61% 受講後に作成

          • devwon1004님의 프로필 이미지
            devwon1004

            受講レビュー 8

            平均評価 5.0

            5

            32% 受講後に作成

            ¥19,795

            codecampの他の講座

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

            似ている講座

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