Build a personal portfolio site with AI chat as a non-developer
A step-by-step guidebook for designers who want to build your first app. Task: A step-by-step guidebook for designers who want to build your first app. Hey there! This is an 🚀 exclusive open edition of AI-First Designer 🚀, to help designers transition into successful AI-First builders. Members get access to proven strategies, frameworks, and playbooks. For more: Get free 1:1 mentorship | Be first to win in career as an AI-First Designer | Claim your AI Design Guide for free Hi friends, Before we get into today’s newsletter, I’m so proud and excited to share the latest stuff we’ve been cooking (all taught by yours truly)… NEWS: ⭐️ If you're a designer who wants to start building apps, here's your roadmap. I am not a developer. I built 3 apps and shipped them in 2 weeks. Designers who vibe-code, ship 10x faster. And get paid 10x more. ⭐️ Learn vibe coding with Claude Code & Cursor → go from Figma to shipped prototypes for only $249 $599 today. *including 3 new vibe-coding courses like Figma MCP, iOS Apps, and more. No coding background required. Apply to join today Friends, Claude Code is the highest leverage skill you can learn this year. You don’t want to miss this. So I’ve written a full guide for you. For context... I built my personal website, with an AI chat that answers questions about my work, in 48 hours. Three days later, I shipped a growth design tool. I’m not a developer. I’m a designer. A year ago, I couldn’t ship a single line of code without an engineer. Now I deploy products on weekends. Same person, different tool (no more Figma)! This is the complete guide to using Claude Code as a designer -> step by step, command by command. What is Claude Code? Claude Code is a coding agent. You give it instructions in plain English, and it writes code for you. You prompt: “Create a landing page with a hero section, three feature cards, and a footer.” It executes. Or something like. “Add an AI chat widget that answers questions about my portfolio.” It executes. You don’t need to understand syntax. You need to understand what you’re building. Imho, this is even better than Cursor or anything else out there (as of today). Things I’ve built ⭐️ Project 1: Tetris game Okay, this one is insane: I built a Tetris game using only Figma MCP connected to FigJam, then back to Claude Code. I did not even design or touch a single line of code. No joke, this one blew me away (see my reaction at 7s). 😂 ⭐️ Project 2: Growth design tool An internal tool for analyzing metrics and suggesting design experiments. Database-backed. User authentication. AI-powered recommendations. 3 days. Working product. Live on the internet. How insane, got over 500 users now! Now, let’s get you up to speed on these. Step 1: Install Claude Code On Mac: Open Terminal (search “Terminal” in Spotlight) and run: If you don’t have npm, install Node.js first from https://nodejs.org Verify installation: Type -> Claude Code should launch. You’ll see a text interface where you can start typing instructions. Step 2: Basic terminal commands Claude Code runs in the terminal. Here’s what you need to know: That’s it. You don’t need anything more than this to get started. Step 3: Create your first project Create a project folder (aka directory): Now you’re inside Claude Code, in your project folder. Start with a plan ALWAYS (critical): Adjust accordingly (critical): Implement: Implement this project according to plan.md. Start with the HTML structure, then add CSS styling. Watch as files appear: index.html, styles.css, images/. Preview locally: How do I preview this in my browser? For a local server: Open http://localhost:3000 in your browser. Step 4: Iterate through prompts This is where designers have an advantage. You already know how to give feedback. Styling: Responsiveness: Functionality: Debugging: Each prompt → code change → refresh browser. The loop is fast. Step 5: commit (aka save) to GitHub Create a GitHub account: Go to https://github.com and sign up (free). Create a repository: Click + → New repository Name it (e.g., my-portfolio) Name it (e.g., my-portfolio) Keep it Public or Private Keep it Public or Private Don’t initialize with README Don’t initialize with README Click Create repository Click Create repository Copy the repository URL. Connect and push: In Claude Code: Initialize git in this project and connect it to my GitHub repository: https://github.com/yourusername/my-portfolio.git Or manually: Create documentation: Create a README.md that explains what this project is and how to run it locally.; tools: Claude Code. Human role: The original post does not say how a person stayed involved.; limitations: The guide assumes familiarity with basic terminal commands and requires installing Node.js and npm. It relies on external services like GitHub, Vercel, and potentially Supabase/OpenAI for advanced features, which may incur costs or require account setup. The source does not detail security implications of exposing API keys or handling user data. Human review is critical for adjusting plans and debugging, as the AI may not always produce optimal or secure code without explicit guidance..
Tools
Published on Agent Work Atlas:
Overview
A step-by-step guidebook for designers who want to build your first app.
Workflow
A step-by-step guidebook for designers who want to build your first app. Hey there! This is an 🚀 exclusive open edition of AI-First Designer 🚀, to help designers transition into successful AI-First builders. Members get access to proven strategies, frameworks, and playbooks. For more: Get free 1:1 mentorship | Be first to win in career as an AI-First Designer | Claim your AI Design Guide for free Hi friends, Before we get into today’s newsletter, I’m so proud and excited to share the latest stuff we’ve been cooking (all taught by yours truly)… NEWS: ⭐️ If you're a designer who wants to start building apps, here's your roadmap. I am not a developer. I built 3 apps and shipped them in 2 weeks. Designers who vibe-code, ship 10x faster. And get paid 10x more. ⭐️ Learn vibe coding with Claude Code & Cursor → go from Figma to shipped prototypes for only $249 $599 today. *including 3 new vibe-coding courses like Figma MCP, iOS Apps, and more. No coding background required. Apply to join today Friends, Claude Code is the highest leverage skill you can learn this year. You don’t want to miss this. So I’ve written a full guide for you. For context... I built my personal website, with an AI chat that answers questions about my work, in 48 hours. Three days later, I shipped a growth design tool. I’m not a developer. I’m a designer. A year ago, I couldn’t ship a single line of code without an engineer. Now I deploy products on weekends. Same person, different tool (no more Figma)! This is the complete guide to using Claude Code as a designer -> step by step, command by command. What is Claude Code? Claude Code is a coding agent. You give it instructions in plain English, and it writes code for you. You prompt: “Create a landing page with a hero section, three feature cards, and a footer.” It executes. Or something like. “Add an AI chat widget that answers questions about my portfolio.” It executes. You don’t need to understand syntax. You need to understand what you’re building. Imho, this is even better than Cursor or anything else out there (as of today). Things I’ve built ⭐️ Project 1: Tetris game Okay, this one is insane: I built a Tetris game using only Figma MCP connected to FigJam, then back to Claude Code. I did not even design or touch a single line of code. No joke, this one blew me away (see my reaction at 7s). 😂 ⭐️ Project 2: Growth design tool An internal tool for analyzing metrics and suggesting design experiments. Database-backed. User authentication. AI-powered recommendations. 3 days. Working product. Live on the internet. How insane, got over 500 users now! Now, let’s get you up to speed on these. Step 1: Install Claude Code On Mac: Open Terminal (search “Terminal” in Spotlight) and run: If you don’t have npm, install Node.js first from https://nodejs.org Verify installation: Type -> Claude Code should launch. You’ll see a text interface where you can start typing instructions. Step 2: Basic terminal commands Claude Code runs in the terminal. Here’s what you need to know: That’s it. You don’t need anything more than this to get started. Step 3: Create your first project Create a project folder (aka directory): Now you’re inside Claude Code, in your project folder. Start with a plan ALWAYS (critical): Adjust accordingly (critical): Implement: Implement this project according to plan.md. Start with the HTML structure, then add CSS styling. Watch as files appear: index.html, styles.css, images/. Preview locally: How do I preview this in my browser? For a local server: Open http://localhost:3000 in your browser. Step 4: Iterate through prompts This is where designers have an advantage. You already know how to give feedback. Styling: Responsiveness: Functionality: Debugging: Each prompt → code change → refresh browser. The loop is fast. Step 5: commit (aka save) to GitHub Create a GitHub account: Go to https://github.com and sign up (free). Create a repository: Click + → New repository Name it (e.g., my-portfolio) Name it (e.g., my-portfolio) Keep it Public or Private Keep it Public or Private Don’t initialize with README Don’t initialize with README Click Create repository Click Create repository Copy the repository URL. Connect and push: In Claude Code: Initialize git in this project and connect it to my GitHub repository: https://github.com/yourusername/my-portfolio.git Or manually: Create documentation: Create a README.md that explains what this project is and how to run it locally.
Reported result
The author successfully deployed a live portfolio site with an AI chat widget within 48 hours. The source claims the site is accessible via a live URL, though specific performance metrics or user engagement data for the portfolio itself are not provided. The author also mentions building other projects like a Tetris game and a growth design tool, but these are separate from the portfolio case. No failures or negative outcomes are reported in the source text.
Human role
The original post does not say how a person stayed involved.
Limitations
The guide assumes familiarity with basic terminal commands and requires installing Node.js and npm. It relies on external services like GitHub, Vercel, and potentially Supabase/OpenAI for advanced features, which may incur costs or require account setup. The source does not detail security implications of exposing API keys or handling user data. Human review is critical for adjusting plans and debugging, as the AI may not always produce optimal or secure code without explicit guidance.
Try it
Act as a designer building a personal portfolio site using Claude Code. I have no coding background. My goal is to create a static site with a hero section, projects gallery, about me, and contact info, plus an AI chat widget that answers questions about my work. 1. Install Claude Code and Node.js if not present. 2. Create a new project directory named 'my-portfolio'. 3. Launch Claude Code and prompt it to create a 'plan.md' file outlining the tech stack (prefer vanilla HTML/CSS for simplicity), file structure, and implementation steps. 4. Review the plan and instruct Claude Code to adjust it if necessary. 5. Prompt Claude Code to implement the HTML structure and CSS styling based on the plan. 6. Iterate on design details (e.g., responsiveness, hover effects) through prompts. 7. Add an AI chat widget feature by prompting Claude Code to integrate a suitable service or mock it for now. 8. Initialize a Git repository, commit the code, and push to a new GitHub repository. 9. Deploy the site to Vercel and verify the live URL. Before deploying or pushing to GitHub, show me the local preview and ask for my confirmation. If any errors occur, provide the error message and ask for clarification on how to fix it. Do not spend money on external APIs without my explicit approval.
Source reports are not independently verified. Publication date is the catalog publication date, not the original article date.