Intro
I want to share the process of building a website using AI. With smart AI usage, you really don't need programming skills to set up a portfolio site. This is a simple project you can do yourself. In this article, I'll show you the entire process. There are many AI tools out there, I'm a fan of Claude Code, so I went with that. The article goes from general to specific - the further down you read, the more nuances you'll find that are worth remembering and might slip past if you're new to this.
AI as a smart advisor who always has time
You can start your journey with the web version of Claude / ChatGPT or whatever. Treat AI as your entry point to the topic. The more you progress, the more tools you'll add - your personal advisor will help choose the right ones for your case. For me, it was Claude Code because I use it daily. I chose Cursor as my IDE, switched to it from free VS Code, which is also great but not as AI-friendly as Cursor. In short, Claude Code is the executor and Cursor is the environment where the executor works.
Pro tip: If you're non-technical and some terms are foreign to you - use this simple trick: copy the article to AI and ask "What did the author mean by Cursor as IDE, are there free alternatives?". This way you can set up any setup you dream of, often changing tools. It takes some time but it's fun, I recommend it.
What do I want to do? Brainstorming the site
This is the first phase where I think about what I want to achieve. No pressure, I casually write in a notepad what features I'd like to have, any notes, if I have a concept then what style to use, etc.
For me it was something like this:
I'm planning to make my portfolio site. I'm a developer and I'd like it to reflect who I am, what my achievements are. I have one project I work on as a hobby when I have free time, I'd also like to showcase it. Maybe a projects section with "show more?". Definitely need an "about me" section, contact section. I have an avatar so maybe we'll put it in the "about me" section. I'm not connecting email, my email will be hardcoded. I have an article on Medium, dev, we'll put links to those platforms. We'll also link my LinkedIn. Additionally, we'll add a blog section. I value minimalism and simplicity, I'd like to keep the site in that style. I'd like the project to follow the latest web development standards, both on small and large screens.
Even though there's not much text, this is a good enough introduction to start Spec Driven Development, which means directing AI to achieve the results we want.
Finally, we'll have 4 files:
- requirements.md → project requirements (WHAT we're building)
- plan.md → architecture plan (HOW we're building)
- tasks.md → list of tasks to complete (what SPECIFICALLY to do)
- STATUS.md → current project status (WHERE we are)
The structure can look like this:
docs/
├── requirements.md
├── plan.md
├── tasks.md
├── STATUS.md
Having our notes, we can move to the first .md file. This format is AI-friendly, it's the standard.
Developing requirements with AI
Time to transform our rough notes into structured specs.
WHAT are we building? — requirements.md file
We already know roughly what we want to achieve. Time to write the requirements file requirements.md.
This will be a file informing AI why the project is being created. We won't write it manually. We launch Claude Code typing something like:
Using my initial plan here our previously prepared notes help me prepare the requirements file requirements.md. Then we'll work on the plan, later we'll define the list of tasks to complete, but for now let's focus only on writing down requirements. At the end we'll save it to a file.
Claude Code will think, might ask some questions, it's worth having a discussion. Here I thought I'd add dark mode and after deeper discussion with AI we concluded that the blog section is unnecessary (since there will be links to Medium and Dev.to). Here's the final requirements.md file:
HOW are we building? — plan.md file
We (me and AI 😛) already know what we're building, now we need to define how. We need to choose the tech stack we'll build in. The site is very simple so we don't need to overcomplicate and we can discuss with AI a stack that fits our requirements. My choice was:
- Next.js because it has good documentation and you can host it for free on the Vercel platform
- for styling Tailwind CSS + shadcn/ui to use ready-made components
After choosing the stack, we can ask AI to research what architecture is worth applying in a portfolio project. Simple project, so the architecture doesn't have to be fancy.
We already have the stack and architecture. We'll host the app on Vercel because it's friendly for Next.js. The domain remains. Half the internet runs on Cloudflare and they have cheap domains per year (about $11/year) → so I decided to buy it there later. Let's move to tasks.
What SPECIFICALLY to do? — tasks.md
Just as we generated a plan based on requirements, we generate tasks based on the plan. We can write in Claude Code:
Review the files @requirements.md and @plan.md and then prepare a tasks.md file that will contain a list of tasks to complete. Tasks should be arranged in a sensible TODO. Spend time as an analyst and think about the tasks. Use ultrathink mode
AI will think and as a result generate a pretty good action plan. If we remember something, we can extend it. We have tasks! Time to track progress.
WHERE are we → STATUS.md
Context is the biggest pain point of working with AI. You want to work so AI knows what you're thinking about and has access to needed information. That's exactly what the STATUS.md file is for - it informs AI what stage you're at. By design, I wanted:
- STATUS.md file to edit automatically after a series of tasks
- after opening a new session and asking Claude Code "where did we leave off?" it would answer based on the STATUS.md file and we'd continue work
To be safe, before the end of a session I asked Claude "Should we update the STATUS.md file?" It happened that it forgot, so I asked.
Claude Code is your friend. Don't know how to prepare STATUS.md file? Ask AI 😈
You can for example type:
Review the files @requirements.md, @plan.md, and @tasks.md, then come up with a progress tracking system. I suggest a STATUS.md file that you'll automatically update after each task. I want to achieve such a result that when I close the Claude Code session and open a new one I'll ask "Where did we leave off?" and you'll know! Don't overcomplicate, the project is small. Review the structure, let's not over-engineer. Ultrathink on this
A few questions and you'll come up with something great. So we have it, we have mini Spec Driven Development. Below is the result:
Final docs touches before work
At this stage it's worth running the /init command in Claude Code. It will make Claude get familiar with the project and generate CLAUDE.md, which it always has access to, it's in its context. Running the command looks like this:
After generating CLAUDE.md let's also type:
Review my work workflow based on @requirements.md, @plan.md, @tasks.md and STATUS.md → make the task tracking system aligned with CLAUDE.md. I don't want to remind you every time about saving progress and where to get the status from, so adjust CLAUDE.md to my workflow. Before closing a session I want to have an up-to-date STATUS.md, and when opening a new one I want you to always review STATUS.md so you can answer the question "What will we be working on now?" Ultrathink on this
This is a very important element for our workflow. We want Claude Code to have the most current project state.
Development
Only at this stage do we connect GitHub, upload the project and start coding. Actually, we ask AI to do it 🙏. I manually pushed the code to GitHub, and then asked Claude Code to use GitHub CLI and make commits. In my case, the first commit to GitHub had several thousand lines of text, not code but just .md files. Well-coordinated specs will make AI handle things great. Remember to commit quite often, preferably after each bigger task.
From this point on, it gets much easier. If you've made it through all this, you'll see how smoothly it'll go now. We navigate AI to go through tasks. You'll probably get a few errors, then ask AI to analyze. For example, I got an error that the Tailwind config file was created in v3, but the Tailwind styles themselves were already in v4. Due to this inconsistency, some styles didn't work. Going through tasks, you'll naturally decide that something is unnecessary, maybe you'll want to add something - that's normal, add it. For me, at the end of the process, I added a second language and another Tech Stack section. But it's best to finish the plan and then beautify.
Testing
After you go through all tasks, it's time for testing. What you don't like, screenshot it and upload to Claude Code asking for a fix, change. You can also ask for audits, for example:
Analyze my site in terms of the latest UX/UI standards. Focus on refining existing elements instead of proposing new ones. Ultrathink on this
You'll see how much such requests give. Don't save on iterations. Ask for different things.
SEO standards, mobile standards, legal standards, performance standards. We don't need to worry too much about security because we have a static site without any integrations. AI is only as good as its user. It's worth asking open questions:
Do you see any elements we might have missed, maybe SEO, performance?
Claude knows a lot. Questions matter.
MCP Playwright
During testing, mcp_playwright came in handy. In short, it did for me what you do manually - tested in Google browser. Usage is simple, first you install:
claude mcp add playwright npx @playwright/mcp@latest
After installation you tell Claude:
Use mcp_playwright to test my site in terms of UX/UI. Suggest improvements if you notice elements that are unreadable or not working.
Claude automatically starts the server and tests:
Lighthouse
There's a plugin to install in Google Chrome called Lighthouse. It lets you measure your site's performance and SEO. I recommend installing it and doing analytics. Copy the report, paste it into Claude Code and ask:
Review the Lighthouse report. Suggest improvements that will help raise the report quality so our site is as Lighthouse-friendly as possible.
The report generated via the plugin looks like this:
You can also use Lighthouse CLI and ask Claude directly to conduct the analysis.
I'd suggest using Lighthouse Chrome only when the site is running on Vercel. Otherwise, some errors might pop up.
Deployment
After the phase of various tests and checking prompts, we're ready for deployment.
For hosting we choose Vercel in the free hobby version.
Vercel — hosting
Uploading is very simple. We create an account, connect with GitHub, choose the repo and click deploy. Done! The site is already running on a test domain from Vercel. This is what a successful deployment looks like:
It's worth going to the Analytics tab and enabling tracking. Remember then to add a cookie consent banner - not every user gives consent. Tracking lets you measure the number of visits and country of origin.
Enabling analytics in Vercel panel:
However, if we want to have our own domain, we'll need Cloudflare.
Cloudflare — domain
At this point, it's time to choose a domain name. You check availability on Cloudflare - if it's free, you click buy and go through payment.
Domain search on Cloudflare:
You have the domain, now it's time for DNS. In Cloudflare you set up records that will connect the domain with Vercel. Don't know how? Paste screenshots into Claude and ask step by step.
Final DNS setup:
DNS in Cloudflare ready, now we connect the domain in Vercel:
Now we have everything. Sometimes you need to wait up to 24 hours for DNS to propagate. When it does - done. That's basically the end. We have a project running on the internet.
Summary
In the article above, I wanted to show what the process of creating a website by a non-technical person can look like. I believe that currently with AI we can do a lot, we don't need to limit ourselves. If previously setting up a site with hosting and domain could be overwhelming, now with AI support it's enough to ask the right questions, paste the right screenshots. Say where we are and what we want to achieve.
This Spec Driven Development system I developed with Claude Code. It works well in small projects. As proof - my site was created exactly like this: https://www.kamilbuksakowski.dev
Result:
I'm satisfied. I encourage you to experiment with Claude Code and don't be afraid of new topics. AI is a great teacher 🚀
Top comments (0)