Blog / Masterclass · 4 min read
Build Your Portfolio Website With AI: The Five-Phase Framework Atlas Teaches Operators
Outcomes first, then tools. In this masterclass Colin Pal shows Atlas EAs how to take an idea to a deployed website with Claude Code: brainstorm, product requirements, implementation plan, execute one task at a time, test and ship. The same framework runs every automation and micro-app an operator builds.
Colin Pal
Recorded 13 April 2026 · Published 2 November 2026
- Start With Outcomes, Not Tools
- The Tech Stack
- The Five Phases
- Plugins and Modes That Make It Easier
- The Live Demo
- Why This Matters Beyond a Website
- Frequently Asked Questions
Key takeaways
- Every build has to serve one of three outcomes for the executive: more revenue, better margin, or time back. If it does not, it is tinkering.
- Spend most of the time in brainstorming and planning. A clear PRD and implementation plan make execution cheap; skipping them burns tokens and patience.
- Execute one task per fresh session to protect the context window, and keep each project in its own folder.
This session was recorded for Atlas operators, and the example is deliberately simple: turn an EA's Gamma profile into a live personal brand website. Nobody needs a portfolio site for their executive. What they need is the framework, because it is the same one behind every automation, agent and micro-app an operator will build.
Watch on YouTube · More from the Atlas channel
Start With Outcomes, Not Tools
Colin's opening is the part founders should hear. There are endless AI tools and endless cool things to do with them. An operator's job is to cut the noise and get to outcomes, because outcomes are what anyone is hired for. Three buckets matter to an executive:
- Drive revenue.
- Increase margin. The example he gives: your executive pays $100 a month, or $10,000 a year across seats, for a tool. You believe you can build the part they actually use for a fraction of that. Frame it that way and the answer is "what do you need to make it happen?"
- Give back time. Which is what EAs already do, so the executive can put that time back into the first two.
Nobody is better placed to know which outcomes matter than the person who works with the executive every day. The tools come after that judgment, not before it.
You are hired to achieve outcomes. Becoming an AI operator does not change that. It changes what you can build to get there.
The Tech Stack
A paid LLM subscription (Claude Pro or Team for Claude Code; the equivalent for Codex). A free IDE, Colin uses VS Code, which gives you the file tree, the terminal and Claude Code in one window instead of three apps. Claude Code installed on the machine and added as a VS Code extension. Optional: a voice dictation tool, because brainstorming out loud is faster than typing. Prerequisite packages like Node, Git and Next.js can be installed up front with one prompt, or Claude Code will ask for them when it needs them.
The Five Phases
1. Brainstorm. Gather all the context before any code. What problem is this solving, who uses it, what are the core features, what is the feel, what is in scope for version one. Colin spends most of his time here on every build, because when the brainstorm is clear, execution is easy, and when it is not, you spend tokens asking for rework.
2. The PRD. Turn the brainstorm into a product requirements document: the brief. For a website it is a creative brief; for an automation it is the same thing with different headings. Do it in Claude Chat or Cowork, save it as Markdown, drop it into the project folder.
3. The implementation plan. Ask Claude Code to review the PRD and write a step-by-step, phase-by-phase plan into plan.md. Now you have the brief and the project plan, the same two documents you would want before any team executes anything. For apps, Colin adds an interactive mock-up with dummy data between these steps, because a PRD that reads well can still look wrong.
4. Execute. One task at a time. Open a fresh Claude Code session per task, have it re-read the PRD and the plan, do the task, update the plan, close. This protects the context window: when a session fills up it compacts and forgets, and the next task suffers. Watching each task also teaches you how it works.
5. Test and deploy. Push to GitHub, publish, go live. Covered in the following session.
Plugins and Modes That Make It Easier
Superpowers wraps the whole flow into commands: /brainstorming, /writeplans, /executingplans. Skill Creator for reusable workflows. Playwright so Claude can open a browser and screenshot a site that blocks direct access, which happened live in the demo. Frontend Design so the output does not look like every other AI-built page.
On modes: start in Ask Before Edits so nothing happens without your approval, move to auto-edit when you trust the tool, use Plan Mode for brainstorming so it writes nothing prematurely. Use Sonnet for brainstorming and planning and Opus for execution if you are watching token usage.
The Live Demo
With one EA's Gamma profile as source material, Colin runs the Superpowers brainstorm: purpose, single page, "approachable" as the vibe, simple HTML. Claude proposes three layout approaches, he picks one, it writes the design spec (the PRD by another name) and then the implementation plan broken into tasks, and starts building with sub-agents in the last minutes of the call. The finished site was posted to the community afterwards; the next session covers testing, GitHub and going live.
Why This Matters Beyond a Website
Swap "portfolio site" for "weekly report agent" or "invoice chasing automation" and nothing in the framework changes. Brainstorm the outcome, write the brief, write the plan, execute in small safe steps, test, ship, then maintain it. That is the discipline Atlas trains into operators, and it is why a founder gets working automations rather than Saturday experiments. If that sounds like the kind of work you want to do, the careers page has the open roles.
Frequently Asked Questions
Who Is This For?
Executive assistants and operators who want to build real things with AI, and founders who want to see the discipline behind what their operator builds. The portfolio site is a teaching example; the framework is the point.
What Do I Need to Follow Along?
A paid Claude or ChatGPT plan (for Claude Code or Codex), a free IDE such as VS Code, Claude Code installed and added as an extension, and a terminal. Voice dictation is optional and Colin swears by it.
Does Atlas Teach This to Its Operators?
Yes. This session is part of the AI Operator track, alongside a full Claude Code course and build-together days inside the Atlas community.
Atlas places and trains executive operators, and coaches the founders who work with them. See what you are actually buying or book a call.
You Might Also Like
How Atlas Operators Set Up an AI Workspace: The Full Workshop
A two-hour, hands-on session in which Colin Pal walks Atlas EAs through the four components of an AI workspace, for themselves and for their executives: the command centre, the second brain, the memory system and the integrations layer. This is what 'your operator sets up your AI' looks like in practice.
What an AI Operator Actually Does: Inside an Atlas Coaching Call
Demand for traditional EA work is falling and demand for AI-supported workflows is rising. In this recorded coaching call, Colin Pal defines the four jobs of an AI operator, shows the agent that writes his start-of-day brief, and lays out the three habits that get someone there.
How Atlas Selects and Trains Operators
Over 2,000 people apply every week. About one in a hundred is placed. Here is what happens to the other ninety-nine, and what the one goes through before they ever see your inbox.
You Can Make More Money.
You Cannot Make More Time
Two minutes to tell us where you are stuck. Then a conversation about whether this is the right moment for you.