The Brief
Yasmine Khelifi runs a leather workshop in the medina of Tunis. She has been handcrafting bags, wallets, belts, and custom pieces for fifteen years -- vegetable-tanned leather, traditional techniques from her grandmother. She sells from her workshop and through two boutiques in Sidi Bou Said, but international customers who find her through word of mouth can't find her online. There is no website. There is nothing.
She needs a portfolio site. Large photos that show the leather the way it deserves -- the texture, the stitching, the scale. A page about her process. A way for people to contact her directly. Not a shop. Her pieces are one-of-a-kind. People see the work, they reach out, they talk about it.
It needs to work on phones. That's how a gallery owner in Munich or a private buyer in Tokyo will find her.
Your Role
You are the developer. Yasmine sent an email, and you are building her site.
A web development project follows a pipeline: requirements, design, architecture, build, verify, deploy. A senior developer already handled the upstream work -- they wrote the PRD, documented the design direction, broke the build into tickets, and set up the project governance file. Then they left. You are picking up a complete handoff and executing the tail end: build, verify, deploy.
You direct Claude Code to do the implementation. You decide what to build, when, and in what order. You check the output against real targets. When something is wrong, you figure out why and direct a fix. The code is the output. Directing AI through the work is the skill.
What's New
This is the first project. Everything is new.
You have your tools from setup -- terminal, Claude Code, Git, GitHub, VS Code. You saw Claude build a simple site from a single prompt in the first-look demo. That was one prompt, one pass, no verification.
This is different. The work is broken into tickets with specific acceptance criteria. There are verification tools that will tell you whether the output is actually correct -- not just whether it looks right. And there is a client who has opinions about how her work is presented.
The hard part is not the code. The hard part is the gap between "looks fine to me" and "passes verification." A page can look perfect in your browser and fail an HTML validation check. A site can load instantly on your laptop and crawl on a phone. The tools to close that gap are built into the project.
Tools
- VS Code -- your workspace. File tree, editor, and terminal side by side.
- Claude Code -- AI coding agent. The primary tool for building everything.
- Git and GitHub -- version control, remote repository, issues, and project board.
- html-validate -- catches structural HTML problems that visual inspection misses.
- Lighthouse -- Chrome DevTools audits for performance, accessibility, best practices, and SEO.
- Netlify CLI -- one-command deployment to a live URL.
- Google Fonts -- typography, loaded via link.
Each tool is introduced in context when the work calls for it.
Materials
The senior developer's handoff is complete. You have:
- Yasmine's email -- the original request, in her words.
- PRD -- the requirements translated into buildable specifics: site structure, pages, content, technical decisions.
- Mockup description -- the visual direction: color palette, typography, layout approach, responsive breakpoints.
- CLAUDE.md -- the project governance file. Tech stack, file structure, verification targets, commit conventions, and every ticket from T0 to T7 with acceptance criteria. This is what Claude Code reads at the start of every session. It is the single source of truth for the project.
- Product photos -- Yasmine's leather goods, ready to use.