inflearn logo

Creating Selling Websites with AI: From Homepages and Landing Pages to AI Agent-based CMS Practical Production

Learn a practical web production workflow that can be applied immediately in the field—from homepages, landing pages, and interactive websites to AI Agent-based CMS—using AI image/video generation tools and Vibe Coding. This course is not just about creating a single screen with AI. It covers the process of generating images and videos using the latest AI tools such as OpenAI Images 2.0, Kling, and Higgsfield, and utilizing them as hero images, background videos, transition videos, and interaction assets for actual websites. Based on Next.js, you will step-by-step implement cinematic landing pages, game-like interactive homepages, inquiry pages, and blog content pages, mastering structures and workflows that professionals can refer to immediately when creating homepages or landing pages. In particular, this course does not stick solely to traditional admin-page-style CMS. You will implement an AI Agent-based CMS structure where AI Agents like Codex and Claude Code organize content and image assets based on predefined skills and upload rules, then upload them to Neon DB and Vercel Blob Store. In other words, instead of an administrator manually entering data into forms one by one, you will experience an operational method where you provide blog topics, reference materials, and image assets, and the AI Agent organizes the content structure and uploads it in a consistent format. Later, this structure can be further enhanced into traditional admin pages, approval workflows, or automation pipelines as needed. Furthermore, it doesn't end with production; we will prepare elements necessary for actual operation, including Vercel deployment, GoDaddy domain connection, SEO meta tags, favicons, OG images, sitemaps, and robots.txt settings. The course also covers the process of registering sites and verifying ownership on Google Search Console, Bing Webmaster Tools, and Naver Search Advisor, as well as setting up Google Analytics and Google Tag Manager to track visitor data. By the end of the course, you will be able to independently reproduce a professional web production workflow that spans AI-driven planning, image/video asset creation, Next.js implementation, SEO optimization, deployment, search engine registration, analytics tool setup, and AI Agent-based content operation.

23 learners are taking this course

Level Basic

Course period Unlimited

Vibe Coding
Vibe Coding
codex
codex
vercel
vercel
prompt engineering
prompt engineering
Next.js
Next.js
Vibe Coding
Vibe Coding
codex
codex
vercel
vercel
prompt engineering
prompt engineering
Next.js
Next.js

What you will gain after the course

  • How to plan and implement homepages, landing pages, and content sites using AI and Vibe Coding in accordance with professional workflows

  • How to generate image and video assets for websites using AI tools such as OpenAI Images 2.0, Kling, and Higgsfield

  • How to use AI-generated images and videos as hero images, background videos, transition videos, and interaction assets

  • Practical experience in building deployable websites and landing pages based on Next.js

  • How to implement differentiated interactive web experiences, such as cinematic landing pages, scroll interactions, and game-like UX/UI

  • How to understand an AI Agent-based CMS structure that organizes and uploads content using AI Agents like Codex and Claude Code

  • How to manage blog content and image assets by integrating Neon DB and Vercel Blob Store

  • How to build a foundation for search visibility by preparing SEO meta tags, favicons, OG images, sitemap, and robots.txt

  • How to register your site and verify ownership on Google Search Console, Bing Webmaster Tools, and Naver Search Advisor

  • How to publish your own website with a real domain by connecting Vercel deployment and a GoDaddy domain

  • How to set up Google Analytics and Google Tag Manager to track visitor data and check operational metrics

  • The entire pipeline for completing AI-generated outputs into actual operational websites and content systems, rather than just simple drafts.

Websites that sell with AI
From practical production to operation!

Implement your own AI-based CMS.


Break away from traditional website creation methods.
Complete a real-world, operational project using the latest AI tools and Next.js,
while developing your ability to plan and build original web services.


AI Web Development:
Create practical websites using AI tools and Next.js.

OpenAI Images 2.0, Kling, and Higgsfield are used to generate images and videos with the latest AI tools,
while you directly implement cinematic landing pages,
interactive homepages, and AI Agent-based CMS using Next.js.



This is not a lecture that simply creates screens.
You will experience an AI-based CMS operation method where an AI Agent organizes content and Neon DB and Vercel Blob Store
automatically upload it.



Vercel deployment, GoDaddy domain connection, SEO optimization,
and even setting up Google Analytics and Tag Manager,
you will master the overall practical operations.và nắm vững toàn bộ quy trình vận hành thực tế.

Build your own website
with AI and Next.js

Section 1 - AI Web Development Environment Setup and Orientation

In this section, we will set up the AI tools and development environment used in this course and preview the final website we will be building. This includes the process of creating a Next.js project and connecting it to GitHub.

Section 2 - Basics of Creating a Cinematic Landing Page

Create the basic components of a cinematic landing page using OpenAI Images 2.0 and Higgsfield. Learn step-by-step how to implement scroll-based dynamic cinematic interactions.

Section 3 - Building an AI-Powered Game-Style Homepage

Create an interactive game-concept homepage using Higgsfield, GPT Image, and Next.js. Practice everything from generating hero key visuals to completing a video-transition contact page.

Section 4 - Website Deployment and Search Engine Optimization

We will proceed with the website deployment using Vercel and the process of connecting a GoDaddy domain. You will learn how to set up SEO meta tags, prepare favicons and OG images, register with search engines, and verify ownership.

Section 5 - AI Agent-Based Content Management System (CMS)

Build a simplified CRM system to manage blog posts and publish them to your website using AI agents such as Cursor, Claude Code, and others. This includes integration with Neon DB and Vercel Blob Store.

Section 6 - Setting Up Website Operation Analysis Tools

You will learn how to set up Google Analytics and Google Tag Manager to track and analyze website visitor data. This will provide the foundation for measuring and improving website operational performance.

In this course, you will cover a practical AI web development workflow—from planning and implementation using Vibe Coding and prompt engineering to building a real service with Codex and Next.js, and finally deploying it via Vercel.

Are you still feeling overwhelmed by the idea of building a website with AI?
This course was created specifically for people like you.


✔️ Those who want to quickly create practical websites using AI and Next.js

  • Those who want to directly create high-quality images and videos using the latest AI tools (Images 2.0, Kling, etc.)

  • Those who want to directly implement Next.js-based cinematic landing pages and game-style homepages

  • Those who want to learn how to build an AI Agent-based CMS and automate content operation workflows

✔️ Planners and designers who want to experience the entire process from website planning to deployment and operation

  • Those who want to turn a planner's ideas into reality, from AI asset creation to website implementation

  • Those who want to learn the practical operational process, from Vercel deployment and domain connection to SEO configuration and GA/GTM setup.

  • Those who want to learn the know-how of creating interactive websites using AI

✔️ **Anyone who wants to complete their own service using new technologies**

  • Those who want to go beyond simple tutorials and create a functional, operational website by combining AI and coding

  • Those who want to gain experience in building efficient content management and operation systems using AI Agents.

  • Those who want to understand and directly replicate the entire practical web production pipeline required in the AI era.


Turn your ideas into real services with AI and Next.js.
From planning to operation, you can now achieve it without obstacles.

Notes before taking the course


Practice Environment

  • Operating System: Windows, macOS, and Linux are all supported.

  • Software: Node.js (latest LTS version recommended), Cursor (code editor), and Git are required.

  • PC Specifications: At least 8GB of RAM is recommended for web development and running AI tools. An SSD will provide a smoother environment for the hands-on practice.

Prerequisites and Important Notes

  • If you have experience in frontend development, you will be able to understand the course content more easily.

  • It is recommended to have a basic understanding of Next.js and JavaScript.

  • If you are using AI tools for the first time, prior learning on prompt engineering may be helpful.

Learning Materials

  • Lecture slide PDF files are provided.

  • All code examples used in the practice sessions are provided via GitHub.

  • It is recommended to refer to the official documentation of AI image and video generation tools (OpenAI Images 2.0, Kling, Higgsfield, etc.).


Recommended for
these people

Who is this course right for?

  • Those who want to quickly create practical websites or landing pages using AI

  • Intermediate-level developers who want to build a production-ready website using Next.js

  • Designers and planners who want to utilize AI image and video assets for website interactions.

  • Those who want to master the flow of web operations, from SEO and domain connection to search engine registration and GA/GTM.

  • Those who want to build a content operations automation structure using AI agents such as Codex or Claude Code

Need to know before starting?

  • It is helpful to have a basic understanding of HTML, CSS, and JavaScript.

  • It will be easy to follow along if you have at least some experience using React or Next.js.

  • It is helpful if you have experience running npm commands in the terminal and installing projects.

  • Knowing the basic usage of Git and GitHub makes it easier to understand the deployment and version control processes.

  • It is okay if you have no experience using AI tools, but having experience writing prompts will be helpful.

Hello
This is ludgi

692

Learners

34

Reviews

8

Answers

3.8

Rating

10

Courses

Hello, I am the CEO of Ludge Co., Ltd.


I have carried out projects across various sectors, including startups, the financial industry, and public institutions, and

I have gained experience not only in development but also in directly operating services.

Through these experiences, I have developed the ability to solve problems and complete projects by collaborating with team members and freelancers. In particular, going beyond the role of a simple developer, I have...

In this process, I have cultivated the ability to solve problems and complete projects by collaborating with team members and freelancers.


In particular, I believe I can be of even greater help to those who have a dream of running their own service, going beyond just the role of a developer.

I look forward to growing together as we experience the joy of completion and a sense of accomplishment. Thank you.

More

Curriculum

All

19 lectures ∙ (3hr 2min)

Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

ludgi's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

Limited time deal

$16,720.00

60%

$33.00