3 Steps to Automate Simple Web Page Creation with Cline [Beginner's Guide]
機械翻訳 / Machine-translated
A
AI Friends
4日前・11分で読める
機械翻訳 / Machine-translated
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
What you'll learn in this article
Cline is an open-source AI coding agent that runs inside VSCode (a code editor). Unlike ordinary code-completion tools, when you tell it "create a contact page," it creates the HTML file, polishes the design with CSS, and even verifies that everything works — all automatically. As of August 2026, it has surpassed 5 million installs and earned over 60,000 stars on GitHub, making it a hugely popular tool. Because beginners can finish a complete web page without writing a single line of code, it's the perfect first step into programming. You only need to pay API fees (roughly $5–$50 per month), so there's no need for an expensive subscription.
First, install VSCode on your computer. You can download it for free from the official website. Next, search for "Cline" in VSCode's Extensions Marketplace and click the Install button. Once installation is complete, a new icon will appear in the left sidebar.
Next, obtain an API key (think of it as an authentication password) for an AI model. Because Cline doesn't include its own AI, it connects to whichever AI service you prefer — Anthropic's Claude, OpenAI's ChatGPT, Google's Gemini, and others. For beginners, Claude (roughly $20/month is more than enough) is recommended. Create an account on Anthropic's official website, get your API key, and paste it into Cline's settings screen. That's all the preparation you need.
Open Cline's sidebar and you'll see an input field that looks like a chat window. Type your instructions here in plain English. For example, type "Please create a simple personal introduction page. Include a title, a profile text, and social media links," then press Enter.
Cline will automatically draw up a work plan and ask for confirmation: "I'll create index.html and style.css. Shall I proceed?" The 2026 version of Cline includes a feature called Plan/Act Mode that tells you what it's going to do before it does it, so you can proceed with confidence. Click "OK" and you'll watch the files being created and the code being written in real time. The work is done in anywhere from a few seconds to a few tens of seconds, after which Cline will ask, "Would you like to check the preview?"
Right-click the HTML file Cline created, select "Open with Live Server" (you'll need to install that extension separately), and your page will open in a browser. The title, profile, and social media links should all be neatly laid out.
If you'd like to make changes — say, "I want the text color to be blue" or "I want to add an image" — just type "Change the title color to blue" in Cline's chat box. Cline will automatically edit the CSS file for you. This way, you can keep chatting back and forth until the page is exactly the way you want it. Once you're done, upload the HTML file to a server to publish it. Even as a beginner, you should be able to finish your first web page within 30 minutes.
One of the most frequent mistakes is entering the API key incorrectly. If you see an error message, check the settings screen to make sure no extra spaces or line breaks have crept in. Also, if your instructions are too vague, you'll get unexpected results. Rather than saying "make a stylish page," be specific: "a simple page with a white background, black text, and center alignment."
Another pitfall is an unexpected spike in API usage costs. If you redo things many times on a large project, the fees can add up quickly, so start by practicing with small tasks and move on to more complex work once you're comfortable. Getting into the habit of regularly checking your usage in Anthropic's dashboard will save you from nasty surprises. If Cline stops because of an error, review the chat history to see at which stage it failed, then instruct it to "fix the error from before" — in most cases, it will correct the problem automatically.
Once you're comfortable with the basics, you can try more sophisticated uses. For example, if you instruct Cline to "add a contact form to this page and implement functionality to send the input by email," it will write both the front-end and back-end code. Even without any knowledge of JavaScript or PHP, you'll end up with a working form.
You can also use Cline to improve existing code. Load an old HTML file into Cline and ask it to "rewrite this code in a modern responsive design," and it will automatically convert it into up-to-date, mobile-friendly code. Moreover, if you say "generate test code along with it," it will even create quality-check code for you, making it capable of handling professional-level development. For team projects, Cline's team plan ($20/user per month, with the first 10 seats free) lets multiple people share the same settings, which is very convenient.
This article is a cross-post from AI Friends.
