Dev of the Future with Agentic Coding

Before We Start

Get these ready before the workshop so you can follow along smoothly.

1

Install Claude Code

Two ways to get started: CLI for terminal lovers, or VS Code extension.

npm install -g @anthropic-ai/claude-code

Or install the VS Code Extension

Installation Guide →

2

Code Editor

Have VS Code or Cursor installed. Either works great with Claude Code.

VS Code → Cursor →

3

GitHub Desktop

We'll use GitHub Desktop to publish your code. Install it and sign in to your GitHub account before the workshop.

Download GitHub Desktop →

4

Create GitHub Repository

Do this before the workshop! Create a new empty repository called "portfolio" on GitHub. We'll push our code here.

Create Repository →

5

Good Terminal

A modern terminal makes a difference. We recommend Ghostty for the best CLI experience.

Download Ghostty →

6

Export LinkedIn PDF

Go to your LinkedIn profile → More → Save to PDF. Keep it handy for the demo.

Open LinkedIn →

Pricing & How It Works

Understand the costs before you start.

Pricing

Claude Code is included with your Claude subscription.

Claude Pro: $20/month

Claude Max: $100/month (5x more usage)

This workshop: Pro plan is plenty

Subscribe →

Context & Limits

How Claude remembers your conversation.

Context window: What Claude can "see" at once

When it fills up: Claude auto-summarizes

Manual reset: Use /compact command

💡 Don't worry about limits for this workshop. If context fills up, just run /compact to continue.

What We're Building

You have a LinkedIn profile. It's professional, but it's... LinkedIn. What if you could transform it into a beautiful, personal portfolio website in minutes?

That's exactly what we're doing today. We'll use Claude Code to read your LinkedIn PDF, generate a modern portfolio site, customize it to your style, and deploy it live — all without writing a single line of code manually.

By the end, you'll have:

A live portfolio website at your-name.vercel.app
Hands-on experience with Claude Code
Confidence to build more projects with AI

Act 1

Claude Code Basics

Get comfortable with the tool before we build.

1.1

Start Claude Code

Open your terminal and navigate to an empty folder. This is where we'll build everything.

claude

What you learned: Claude Code runs in your terminal. Just type claude to start a conversation.

1.2

Understanding Slash Commands

Slash commands are special instructions that control Claude Code itself (not prompts for Claude).

/help

What you learned: Slash commands start with / and control the CLI. Regular text is your prompt to Claude.

1.3

Essential Status Commands

These commands help you understand your current session state.

/login # Authenticate with Anthropic /status # Check connection status /model # See/change current model /usage # View token usage this session /config # View/edit configuration /stats # Detailed usage statistics

💡 Run /status anytime to check if you're connected and which model you're using.

1.4

Interaction Modes

Press Shift+Tab to cycle through three modes that change how Claude behaves.

Default Mode

Claude asks permission before each file change. Safest for learning.

Auto-Accept Mode

Claude makes changes without asking. Faster, but review carefully!

Plan Mode

Claude creates a plan first, then executes after your approval.

What you learned: Shift+Tab switches modes. Start with Default, use Auto-Accept when confident.

1.5

Context & Memory

Understanding how Claude remembers your conversation.

/context # See what's in Claude's context window /compact # Summarize conversation to free up space /init # Create CLAUDE.md for project memory

📖 Context is everything Claude can "see" right now. If it fills up, run /compact to continue.

1.6

Session Management

Save your work and pick up where you left off.

/resume # Resume a previous session /exit # End the session (or Ctrl+C)

What you learned: Your sessions can be saved and resumed. Use /resume to continue from where you left off.

1.7

Initialize Project Memory

Let's set up CLAUDE.md so Claude remembers your project preferences. Use this when you are opening any existing project.

/init

What you learned: /init creates a CLAUDE.md file. Claude reads this every session to understand your project.

1.8

Your First Prompt

Now let's actually talk to Claude. Ask it something simple.

What files are in this directory?

📖 Claude Code can read files, write code, run commands, and help you build entire projects through conversation.

1.9

Create Your First File

Let's make something. Ask Claude to create a simple file.

Create a file called hello.txt with the text "Hello from Claude Code!"

What you learned: Claude doesn't just suggest code — it actually creates files for you. Check your folder!

1.10

File Mentions with @

Use @ to reference files directly in your prompts. Claude can read PDFs, images, and code files.

@linkedin.pdf summarize my professional profile @screenshot.png what's in this image? @src/app.js explain this code

📖 The @ symbol tells Claude exactly which file to look at. Works with PDFs, images (PNG, JPG), code files, and more!

What you learned: Use @filename to reference specific files. Claude can read and understand PDFs, images, and code.

Get Inspired First

Before we build, let's look at what makes a great developer portfolio.

Developer Portfolios

A curated list of developer portfolios for your inspiration. Browse through hundreds of real examples to find styles you like.

Browse Portfolios →

Awwwards

Award-winning website designs. Great for finding modern design trends, animations, and creative layouts.

Explore Awwwards →

💡 Spend 5 minutes browsing these sites. Note what catches your eye — colors, layouts, animations. You can describe these to Claude later!

Act 2

Build Your Portfolio

Transform your LinkedIn into a stunning website.

2.1

Feed Your LinkedIn

Copy your LinkedIn PDF into the project folder, then let Claude read it using the @ mention.

@linkedin.pdf summarize my professional profile

What you learned: Claude can read PDFs! Use @filename to reference files directly. It extracts your experience, skills, and achievements automatically.

2.2

Add Your Profile Picture

Copy your profile photo into the project folder. Use a professional headshot for best results.

@profile.jpg add this as my profile picture in the hero section

📖 Supported formats: JPG, PNG, WebP. Aim for a square image around 400x400px for best quality.

What you learned: Claude can see images too! Use @image.jpg to reference photos and let Claude integrate them into your design.

2.3

Generate the Portfolio

Now the magic. Ask Claude to create your portfolio.

Create a minimal, modern portfolio website using this LinkedIn data. Single page HTML with inline CSS. Include: hero section with my name and title, about section, experience timeline, skills grid, and contact section with my LinkedIn link.

What you learned: Be specific about what you want. The more detail you give, the better the output.

2.4

Preview Your Site

Open index.html in your browser and see what Claude built!

Open index.html in browser (or right-click → Open with browser)

📖 Your first version is rarely perfect. That's okay — we'll iterate.

2.5

Switch to Dark Mode

Let's personalize it. Dark mode looks great for developer portfolios.

Make it dark mode with a purple accent color (#A78BFA). Keep it minimal and elegant.

What you learned: You can iterate on design through conversation. Claude remembers what it built and modifies it.

2.6

Add Personal Touch

LinkedIn doesn't show what you're excited about. Let's add that.

Add a "What I'm Building" section after the hero that mentions I'm currently working on [YOUR PROJECT]. Make it feel personal, not corporate.

What you learned: Your portfolio should show personality. Add sections that LinkedIn doesn't have.

2.7

Make it Mobile-Friendly

Most people will view on their phones. Let's ensure it looks good.

Make sure the site is fully responsive and looks great on mobile devices

📖 Always check mobile. Resize your browser window to test, or use browser dev tools.

2.8

Final Polish

Small touches make a big difference.

Add smooth scrolling, subtle hover effects on links, and a nice fade-in animation when the page loads

What you learned: Polish matters. These small details make your site feel professional.

Act 3

Ship It Live

Deploy your portfolio to the world using GitHub Desktop.

3.1

Open in GitHub Desktop

GitHub Desktop makes version control visual and easy — no commands needed.

1. Open GitHub Desktop 2. File → Add Local Repository 3. Select your portfolio folder 4. It will ask to "Create a Repository" — click yes

What you learned: GitHub Desktop handles Git for you. No terminal commands required.

3.2

Commit Your Changes

Save a snapshot of your work.

1. You'll see all your files listed as "Changes" 2. Type a summary: "Initial portfolio site" 3. Click "Commit to main"

3.3

Publish to GitHub

Push your code to GitHub so Vercel can access it.

1. Click "Publish repository" (top right) 2. Name it "portfolio" 3. Uncheck "Keep this code private" (optional) 4. Click "Publish Repository"

📖 Your code is now on GitHub! You can view it at github.com/your-username/portfolio

3.4

Deploy on Vercel

Vercel makes deployment incredibly simple.

1. Go to vercel.com and sign in with GitHub 2. Click "Add New Project" 3. Import your "portfolio" repo 4. Click "Deploy" 5. Wait ~30 seconds

What you learned: Modern deployment is this easy. Vercel auto-deploys whenever you push changes.

3.5

You Shipped!

Your portfolio is now live at your-name.vercel.app

🎉 Congratulations! You just built and deployed a portfolio website using AI. Share it with the world!

Act 4

Go Beyond with MCPs & Skills

Add superpowers to Claude Code with plugins and reusable commands.

4.1

What are MCPs?

Think of MCPs as apps you install on your phone — but for Claude Code.

MCP stands for Model Context Protocol. Right now, Claude Code can only work with files on your computer. MCPs let it connect to the internet and other services.

For example, with MCPs installed, you can ask Claude to:

"Search the web for modern portfolio design trends"
"Find me free stock photos for my hero section"
"What does the latest documentation say about Vercel deployment?"

What you learned: MCPs are like apps for Claude Code. They let Claude search the web, fetch data, and connect to services.

4.2

Install Your First MCP

Installing an MCP is a single command in your terminal. Let's add web search.

claude mcp add --transport http exa https://mcp.exa.ai/mcp

That's it! Now restart Claude Code and try:

Search the web for beautiful portfolio color schemes

💡 Use /mcp inside Claude Code to see your installed MCPs and their status.

What you learned: One command to install, then Claude can search the web for you. No more switching to Google!

4.3

Useful MCPs for Beginners

Here are MCPs that are actually helpful when building your portfolio.

Exa (Web Search)

Let Claude search the internet. Great for finding design inspiration, code examples, and answers.

claude mcp add --transport http exa https://mcp.exa.ai/mcp

Context7 (Docs Lookup)

Fetches up-to-date documentation for any library. Claude always has the latest info.

claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

GitHub

Manage your repositories, create issues, and push code — all through conversation.

claude mcp add --transport http github https://api.githubcopilot.com/mcp/

Notion

If you use Notion for notes, Claude can read and update your pages directly.

claude mcp add --transport http notion https://mcp.notion.com/mcp

📖 Browse more MCPs at mcpmarket.com

4.4

What are Skills?

If MCPs are apps, Skills are shortcuts on your home screen.

Skills are reusable commands that teach Claude new tricks. Instead of typing a long prompt every time, you create a skill once and use it with a simple /command.

Claude Code comes with built-in skills you can try right now:

/simplify # Clean up your recent code changes

What you learned: Skills are reusable commands. Type / and see what's available.

4.5

Install Skills from skills.sh

The community has built 200+ skills you can install with one command.

Visit skills.sh to browse skills. Install any skill with:

npx skills add owner/skill-name

Popular skills perfect for building websites:

Web Design Guidelines

137K+ installs. Teaches Claude best practices for beautiful, accessible web design.

Frontend Design

110K+ installs. UI/UX patterns that make your portfolio look professional.

What you learned: skills.sh has ready-made skills. One command to install, then use them with /skill-name.

Bonus

Design with AI: Antigravity + Google Stitch

Use Google's free tools to design beautiful UIs and turn them into real code — no Figma needed.

B.1

What is Antigravity?

Google's free AI-powered code editor — like VS Code but with AI built in.

Antigravity is Google's agentic development platform. Think of it as a code editor where AI can plan, write code, and even browse the web for you. It's free during the public preview and works on Mac, Windows, and Linux.

The best part? Claude Code works inside Antigravity as an extension — so you get the best of both worlds.

Download Antigravity (Free) →

What you learned: Antigravity is Google's free AI code editor. Download it, sign in with your Gmail, and you're ready.

B.2

What is Google Stitch?

Describe a design in plain English, and Stitch creates beautiful UI for you.

Google Stitch is an AI design tool. You type something like "a modern portfolio hero section with dark background and purple accents" and Stitch generates a polished, production-ready design with real HTML/CSS.

No design skills needed. Just describe what you want.

Try Google Stitch (Free) →

What you learned: Google Stitch turns your words into beautiful designs. Just describe what you want and it generates the UI.

B.3

Connect Stitch to Claude Code

Install the official Stitch MCP so Claude Code can use your designs directly.

Step 1: Get your API Key

Go to your Stitch Settings page → scroll to API Keys → click "Create API Key" → copy it.

Step 2: Add Stitch MCP to Claude Code

Run this in your terminal (replace YOUR-API-KEY with the key you copied):

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Step 3: Try it in Claude Code!

Create a new Stitch project called "My Portfolio" Generate a hero section with dark background and purple accents

💡 Once connected, Claude can create projects, generate new screens from text prompts, list your designs, and fetch the HTML/CSS code — all through conversation.

What you learned: Two steps: get an API key from Stitch Settings, add it with one terminal command. Now Claude can create and manage your Stitch designs directly.

Full Stitch MCP Setup Docs →

B.4

Install Stitch Skills

Google has built ready-made skills that supercharge the Stitch + Claude Code workflow.

First, see what skills are available:

npx skills add google-labs-code/stitch-skills --list

The most useful ones for building your portfolio:

stitch-loop

Creates complete multi-page websites from your Stitch designs. Just describe what you want and it builds everything.

npx skills add google-labs-code/stitch-skills --skill stitch-loop --global

enhance-prompt

Turns your vague ideas into polished design prompts. Say "dark portfolio" and it creates a detailed Stitch-optimized prompt.

npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global

design-md

Documents your design system so Claude always stays consistent with your colors, fonts, and spacing.

npx skills add google-labs-code/stitch-skills --skill design-md --global

react-components

Converts your Stitch screens into reusable React components. Perfect if you want to level up later.

npx skills add google-labs-code/stitch-skills --skill react:components --global

📖 See all available skills at github.com/google-labs-code/stitch-skills

What you learned: Stitch Skills let Claude build entire websites from your designs. The stitch-loop skill is the magic one — it does everything end to end.

B.5

The Dream Workflow

Here's the complete flow: idea → design → website → live. All with AI.

1. Design in Stitch

Describe your portfolio design in Google Stitch. It generates beautiful UI screens.

2. Build with Claude

Claude Code pulls your Stitch designs and builds a real website from them.

3. Ship on Vercel

Push to GitHub, deploy on Vercel. Your AI-designed portfolio is live!

You just went from an idea in your head → AI-generated design → working website → live on the internet. No design skills. No coding. Just conversation.

Quick Reference

Bookmark these for your future Claude Code sessions.

Status Commands

`/login`	Authenticate with Anthropic
`/status`	Check connection status
`/model`	View/change model
`/usage`	Token usage this session
`/stats`	Detailed statistics
`/config`	View/edit settings

Context Commands

`/init`	Create CLAUDE.md (use on existing projects)
`/context`	View context window
`/compact`	Summarize to free space
`/resume`	Resume previous session
`/exit`	End session

Modes (Shift+Tab)

Default	Asks permission for changes
Auto-Accept	Makes changes automatically
Plan	Shows plan before executing

Keyboard

`Shift+Tab`	Switch modes
`Ctrl+C`	Cancel response

FAQ

Do I need coding experience?

No. Claude Code writes the code for you. You just need to describe what you want in plain English.

How much does Claude Code cost?

Claude Code is included with your Claude subscription. Claude Pro is $20/month and Claude Max is $100/month. For this workshop, Pro is more than enough.

What if I get stuck during the workshop?

That's what live workshops are for! Ask questions in the chat, and we'll help you troubleshoot in real-time.

Can I customize my portfolio after the workshop?

Absolutely. That's the beauty of Claude Code — just describe the changes you want, and it'll update your site.

Will there be a recording?

Yes, registered attendees will receive the recording afterward.

Ready to Build?

Join us live and ship your portfolio in 60 minutes.

Register Now

Mar 1, 2026 · 10:30 PM PKT