3 Steps to Automate Website Creation with Devin [Beginner's Guide]
機械翻訳 / Machine-translated

機械翻訳 / Machine-translated
@aifriends
AI Friends(https://aifriends.jp)のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
What you'll learn in this article
Devin is an autonomous AI software engineer developed by Cognition Labs. Unlike ordinary AI chatbots, it doesn't just write code — it draws up a plan, runs tests, and builds a fully functional website. Even if you're a complete beginner at programming, you can create a full-fledged website simply by telling Devin in plain language what kind of site you want, with no knowledge of HTML or CSS required. In April 2026, the pricing plans were revamped so that Devin is now available from $20 per month, making it easy for individuals to try out. Previously priced at $500 per month, this represents a dramatic change. Because it dramatically reduces the time you spend writing code yourself, the biggest benefit is that you can focus your energy on design and content creation.
First, visit Devin's official website (cognition.com) and create an account. Logging in with a GitHub account is recommended, because Devin will automatically save the code it creates to your GitHub repository (a storage location for code). After logging in, select a pricing plan. Beginners can try out the basic features with the Free plan, but for serious use the Pro plan ($20/month) is recommended. Next, configure the integration with GitHub. Just follow the on-screen instructions, click the "Connect GitHub" button, and approve the access permissions. This allows Devin to save code to your repository and read any existing code. Once setup is complete, Devin's workspace will be displayed.
At the bottom of the workspace, you'll find a chat input field. Try typing something like: "Please create a simple personal introduction website. Include sections for a profile, skills, and contact information." The key is to be as specific as possible with your instructions. Vague instructions can lead to unintended results. For example, if you just say "make a cool site," Devin has no way of knowing what you consider cool, so it helps to add specific conditions like "with a simple design using a blue color scheme." Once you press Enter, Devin automatically creates a plan (a work schedule). Thanks to the "Interactive Planning" feature new in 2026, a draft plan appears within seconds. The screen will show steps listed out as bullet points, such as "Create HTML file," "Adjust design with CSS," and "Verify functionality." If the plan looks good, press the "Approve" button. If you want changes, you can give additional instructions in the chat, like "make it more colorful."
Once you approve the plan, Devin begins working autonomously. The right side of the screen shows in real time what Devin is currently doing — messages like "Creating index.html" and "Editing styles.css" scroll by. You can also see the code editor, so you can check exactly what code is being written. When the work is complete, Devin will notify you with a message like "Please check the preview." Click the preview button and your actual website will be displayed in the browser. If anything looks different from what you imagined, just tell Devin in the chat — for example, "Change the header color to green" — and it will make the fix right away. Once you're satisfied with the result, instruct Devin to "Please deploy (publish) the site," and it will automatically upload the code to GitHub and, if needed, handle publication to a hosting service (such as Vercel). Your website will then be visible to anyone in the world.
Here are three pitfalls that beginners often run into. The first is getting results that don't match your expectations because your instructions were too vague. To address this, give Devin as many specific conditions as possible — things like "red background," "3-column layout," and "mobile-friendly is a must." The second is trouble getting the GitHub integration to work. This is often caused by insufficient access permissions on the GitHub side. Go to GitHub's "Settings" → "Applications" and double-check the permissions granted to Devin. The third is Devin stopping mid-task. This happens when the instructions are too complex for it to handle in one go. The solution is to break large tasks into smaller pieces and give instructions in stages — "First, just build the top page," then "Next, add a contact form" — which tends to go much more smoothly. If an error message appears, just copy and paste it into the chat and ask Devin to "Fix this error," and it will usually resolve the issue on its own.
Once you're comfortable with the basics, try these even more convenient approaches. The first is making use of the "Devin Search" feature. You can ask questions in plain language about an existing codebase — for example, "Where is the login functionality?" — and Devin will tell you the relevant file and line number. This can dramatically cut down the time spent hunting through code in complex projects. The second is the "Devin Wiki" feature. This automatically generates documentation for your project — just say "Create a wiki for this project" and Devin will produce a document summarizing the role and usage of each file. It's invaluable for team development. The third technique is saving template-style instructions. Keep frequently used prompts (e.g., "Create a responsive, SEO-optimized landing page") in a notepad or similar tool, and you can easily copy and paste them for future use. Also, as a new feature available from February 2026, it is now possible to run multiple Devin instances simultaneously and divide up the work on large-scale projects.
This article is a cross-post from AI Friends.