A voice skill so Claude writes like you. A design skill so it builds things that look like you. Your site is the test, because it needs both at once.
Skill a text file you upload to Claude once, so it remembers how you write or how you like things to look. Live link a web address anyone can open, instead of a file only you can see.
voiceSKILL.md
designSKILL.md
your site
live link
voiceTonight: your headline and bioAfter: cover letters, cold emails, LinkedIn.
designTonight: your colors, fonts, photoAfter: decks, one-pagers, event pages.
What a site that feels like a person looks like
Open two now. Notice what you feel in the first three seconds. You'll steal one move from each in step 2.
bruno-simon.comThe famous one. You drive a car around his portfolio.
henryheffernan.comA 3D desk with a retro computer you can actually use. His portfolio lives on the screen.
brittanychiang.comOne calm page. Proof that restraint reads as confidence.
joshwcomeau.comPlayful everywhere. Tiny interactions that feel like him.
lynnandtonic.comRedesigned every year. The site is the portfolio.
Win 1: two skills you'd keep Voice, then design. Steps 1 and 2. This is the part that pays off after tonight.
Win 2: a site that's live Brief, build, host. Steps 3 to 5. A link you can send.
Win 3: build off either Done early? Go further has six challenges that get harder.
Stuck? In this order
Ask Claude, in the chat you're building in It already knows what you did. The Stuck? button has the prompt.
Hit Stuck? up top Searchable fixes for every step.
Post on PollEv We're watching it the whole time.
Raise your hand. We'll come running
This tutorial uses Claude. The same two skills work in ChatGPT and Gemini, step 0 shows how.
0Set upQuick
Get set up
The pre-work email covered these. Did it? Tick the circles and go. If not, do it now, the tutorial waits.
Sign in at claude.ai or in the desktop app. Stanford workspace (request it here) or personal, whichever you'll still be using next month. Your skills live in the account you build them in.
Model: the default (Sonnet) is fine for all of tonight. If a build in step 4 comes back broken or half-finished, switch the picker to Opus and send the same message again.
Where skills get uploaded comes in step 1, when you have one to upload.
Done looks like
A fresh, empty chat in the account you'll keep.
The facts, the face and the taste. Your writing samples come in step 1, nothing to paste yet.
Your LinkedIn as a PDF. Every fact on your site comes from here, so nothing gets invented. On your own profile page (Me › View profile), the round button after Add section. It's three dots on most accounts, Resources or More on some. Then Save to PDF. It lands in Downloads. No LinkedIn? Type three lines about you and your last two roles into a note, that's your PDF tonight.
A photo of you. A real one you like, saved on this laptop. It goes on the site and sets your colors.
Two sites you love the look of. Showing beats describing. Nothing comes to mind? Ask Claude: new chat, click the + at the bottom left of the message box, Upload a file, pick your LinkedIn PDF, then paste this. Keep the two links it gives you.
1 the round button after Add section, 2 Save to PDF
Attach, don't paste. Files like the PDF and the photo get attached with the + in the chat. The only things you'll ever paste into a chat are the prompts in these cards.
Done looks like
The PDF and the photo in Downloads, two links in a note.
Not on Claude?
Build tonight in the account you'll keep using. A skill is just a text file, so it moves anywhere.
Where skills goStanford accountWatch out
Claude This tutorial
Where skills go
Customize › + Add › Upload skill. Stays on in every chat
Stanford account
Free by request, link in 0.1
Watch out
Free personal plan can hit its limit mid-build
ChatGPT
Where skills go
Paste SKILL.md into a Project's instructions, or a custom GPT
Stanford account
ChatGPT Edu, request it
Watch out
Unzip the file first. Paste the text, not the zip
Gemini
Where skills go
Paste SKILL.md into a Gem's instructions
Stanford account
Already on with your Stanford Google login
Watch out
Same: unzip, paste the text
1VoiceHow do I get AI to sound like me?Most of your time
Examples + vibe + icks = your voice
Claude can't sound like you until it has read you. Three ingredients, in the order from the slides, then one form packs them into a skill.
1Examples: find 3 things you wrote
You on a normal day, never the cover letter. Open your sent mail, Slack or texts and grab the three most recent ones with more than two lines. Paste each into its own box below, as sent, typos and all. More is better, three is enough.
Talk instead of type. Dictating a sample works too, and it sounds more like you than anything you'd write for a job.
2Vibe: pick one
Pick for whoever reads your site first. It's written into the skill as one line, and changing it later is changing that line. Your pick shows in the header so you can see it from any step.
Polished
Short, structured, confident. For recruiters and investors
Warm
Direct, a clear point of view, sounds like you talk. For most people.
Playful
Candid, loose, fragments allowed. For friends and side projects.
Your own
No preset. You describe it in 3 words and the samples do the rest.
Icks are words you'd never say. The form has your three samples at the top, your vibe in the middle, icks at the bottom. Leave a field blank and the skill keeps a [bracket] there, which Claude writes around until you fill it in.
Rather talk it through? Build the skill with Claude instead
New chat. Paste this, answer with real writing, then click Save skill. It's in Claude already, so jump to 5.
4Upload it to Claude
Two spots you'll use all night. First time here? Follow the numbers.
5Test it on your intro line
The first draft is never it. From the slides, this is the loop that makes a skill good:
Ask for 3
Pick one
Name what's off
Fix the skill
Run it again
Run it on the one line that matters most, the first thing people read. Every test starts in a new chat, so the skill is doing the work, not the conversation.
New chat. The + at the top left of Claude.
Attach your LinkedIn PDF from 0.2: the + at the bottom left of the message box, Upload a file. This is where the facts come from, so Claude can't invent any.
Paste the first card. Then go around the loop.
Ask for 3
Pick oneTell Claude which one and why, in plain words. The why is what it learns from.
Name what's offRead it out loud. A word you'd never say or a line that's too stiff jumps out.
Fix the skill
Run it againNew chat, PDF attached again, same ask. Better? Done. Same? Add a sample, not another rule. Not sure the fix landed? Open Customize › Yours › my-voice and look for your new line.
Example, one round
Draft
I'm passionate about getting more people to the starting line — in sport, health care and AI.
Fix the skill
+ Never: "passionate about" + Never: em dashes. Use -- instead
Run it again
I'm focused on getting more people to the starting line, in sport, in health care, and in AI.
What's inside your skill
The file in your zip. Edit the top part any time, leave the locked part alone.
Loading my-voice…
Only the name and description at the top are required. The rest is how we wrote it tonight.
Done looks like
my-voice is in Customize › Yours and on. Claude wrote an intro line you'd actually say, and the skill has one line you added after testing it.
2DesignHow do I get it to look like me?Faster than step 1
Examples + vibe + icks = your look
Same recipe. Your photo and two sites are the examples, one color and a font pair are the vibe, and the icks are whatever makes you wince.
1Examples: steal from the two sites you love
From the slidesShow, don't tell. Everyone's "warm" is different. Two links show Claude the fonts, spacing and tone your words can't. Do this first, it writes half your form for you.
2Vibe: pick a look
A look is a starting point, not a template. Words for how a page feels, not how you write, so these are different from step 1. It's preset to match your vibe, change it if the match is wrong.
Minimal
Lots of air, one serif headline, almost no color. Reads as quiet confidence
Warm
Off-white paper, a big photo of you, one rounded button. Friendly and quick
Bold
One loud color, chunky type, a little motion. For side projects and people who like fun
Your own
No preset. Your two sites and 3 words do the work.
3Icks: fill in the form, download my-design.zip
Put what Claude just found into the form: one accent color (click a swatch, or paste the hex code, the # and six characters that name a color exactly), a font pair, shown in the real fonts, and 3 words. Icks are whatever makes you wince.
Rather have Claude write the whole skill from those rules?
Same chat. Paste this, then click Save skill and jump to 5.
4Upload it
Same clicks as step 1. The file is my-design.zip, and in Yours it shows as my-design. Not design: that name belongs to a built-in Claude feature, and typing /design would open that instead of your skill.
5Test it on one section
Just the top of your site, so you can judge the look without a whole page in the way. New chat, attach your photo with the + under the message box, paste.
Ask for 3Add "give me 3 different layouts" if the first one is fine but not you.
Pick oneSay why. Plain words
Name what's offToo corporate? Too busy? Three cards in a row? Say it.
Fix the skillSay add that to my-design as an ick.
Run it againNew chat, same test. Still off? Show it a site you love instead of writing another rule.
Example, one round
Draft
106 chapters, 3 countries in a big-number row. Photos with tape corners.
Fix the skill
+ Never: big-number stats. Plain bullets + Never: tape or borders on photos
Run it again
Plain bullets. A hand-drawn outline around every photo.
Done looks like
my-design is in Yours and on. One section in your color and font, with your photo, and one new ick in the skill.
3BuildWhat do I get with both?Quick
Write the brief. Ask for three
"Make me a personal website" gets you the average one. A good brief says who it's for, what they should do after, and where the facts come from. Your skills handle the rest.
1Fill in the brief
Six blanks. They're the things only you know. Everything about how it sounds and looks is already in your skills.
Who reads it firsta recruiter, a founder, a professor, your family.
Three seconds in, they should think"this person ships" or "I'd grab coffee with them".
The one thing you want to be known fornot three. One.
What they should do afteremail you, book a call, just get what you do.
One human thingthe detail a résumé never shows: a sport, a side project, a ritual.
Closest reference siteone of the two you love, or one from Start here.
Example, filled in
Who reads it first
recruiters at consumer health startups
Three seconds in
"she's already building, not waiting"
Known for
getting products into clinics
After reading
email me about a product role
Human thing
I run every morning before class
Reference
brittanychiang.com
Make it ask + plan before it builds. The brief ends by asking Claude for 3 questions, telling it to push back on résumé answers, then 3 directions. You catch the wrong direction in ten seconds, not after a whole page.
2Answer its questions, pick a direction
Claude asks 3 questions and may push back on an answer. Then A, B and C: the top of the page only, different structures. Pick one and say why. Plain words are enough.
Example
A
Big photo, headline under it
B, picked
Reads like a letter. Small photo.
Why: "it's a letter, not a résumé, and I like that the photo is small"
C
Timeline down the page
Done looks like
A, B and C in the chat with your name and real facts. You told Claude which one and why. Nothing built yet.
4BuildWhat do I get with both?Take your time
Build it. Name what's off
Look. Wince. Write it down. Every fix lands in a skill, so it's fixed for every deck and email after tonight too.
1Build the whole page
Same chat. One message, then wait a minute or two without sending another.
Example: what a finished one looks likeBuilt from the same recipe
2Name what's off
From the slidesMark it up, then say the fix. Screenshot the preview (Shift+Cmd+4 on a Mac), draw a circle on what's off (open the screenshot, Markup is the pen icon), and attach it with this. No time to draw? Just type the two things.
3Put the fix in the skill
From the slidesUpdate the skill every time you correct it. Looks go in the design skill, words go in the voice skill.
4Run it again
Until you'd send the link to the person you wrote the brief for. Twice is plenty. To prove a fix stuck: open Customize › Yours › my-design and find your new line, then new chat, same brief, see if the thing comes back.
Done looks like
A page with your color, your words, your photo and no fact you didn't give it. At least one new line in a skill that wasn't there 10 minutes ago.
5BuildWhat do I get with both?Quick
Drag one file. Get a live link
Right now your site is a file only you can open. A host keeps it on a computer that's always on, so anyone with the link can see it.
Get the file
In the chat where you built it.
Claude shows the file as a card with a Download button. Click it. The file lands in your Downloads folder as index.html. Keep that name, it's what websites call their front door.
The file card in Claude. Download is on the right
Open Vercel Drop
vercel.com/drop. Sign in, or sign up free with your email and pick Hobby. You land on a page with a big dotted box.
Vercel Drop. The whole dotted area takes the file
Drag and deploy
Open your Downloads folder next to the browser and drag index.html into the dotted box. Or click the word file on that page and pick it. Name the project yourname-site, hit Deploy, wait about 30 seconds.
Copy your link
Vercel shows your new address, ending in .vercel.app. Open it on your phone. Then paste it below so it lands in the class gallery.
Your project page on Vercel. The link is under Domains
Lost on Vercel? Screenshot the page and ask Claude what to click next.
Want one link that keeps updating? Put it on GitHub
Each drop on Vercel makes a new link. GitHub keeps every version and one address, like version history in Google Docs.
+ › New repository. Name it yourname-site, Public. Create.
Add file › Upload files. Drag in index.html. Commit changes.
In Vercel, Add New › Project › import that repo › Deploy. Every upload after that goes live on its own.
Own domain? Buy yourname.com anywhere, then in Vercel: your project › Settings › Domains, add it, and copy the records it shows into your seller. Minutes, sometimes an hour.
Paste your live link
Not tonight? I'll host it on at
Keep your three files
They're the whole thing. The two skills work on anything you make next.
Done looks like
A vercel.app link pasted above, open on your phone with your name on it, and your three files saved.
+Go furtherAhead of the room? Start here
Six challenges, each one harder
Your two skills are a first draft of you. These push them further: a site people remember, skills that work on things that aren't websites, and skills that keep improving without you.
1
Make it 3D
The big one. Pass mark: it runs on your phone
A 3D scene of a place that says something about you, with one clickable object per section of your site. A track, a bookshelf, a kitchen, a trail, a city block. Ask for three scene ideas first, then pick. Simple shapes look intentional, realistic looks uncanny. Open it on your phone before you host it
Example a running track with one numbered stop per section. See it live
Done looks like an Explore in 3D button on your site, and clicking an object shows that section
.
2
A signature move
Pass mark: a friend says "that's so you"
Every memorable site has one small thing you'd recognize anywhere. Pick yours, something you'd repeat on every page, deck and email, and make it a non-negotiable in the design skill
Examplesa hand-drawn outline around every photo. A highlighter stroke under each heading. A tiny mark with your initials in the corner. One odd color nobody else uses
Done looks like the move on your site and written into the skill
.
3
Feed it the real corpus
Pass mark: 5 new rules you didn't write
Five samples is a sketch. Connect Gmail under Settings › Connectors and let Claude read 50 sent emails. It will find patterns you don't know you have: how you open, how long you run, the word you overuse
Example~140 sent emails, ~120 Slacks, 17,736 texts went into one voice skill. It found "thank you so big" and kept it ungrammatical on purpose
Done looks like a Non-negotiables section in your skill with phrases only you say, spelled your way
.
4
Your design skill on a deck
Pass mark: you'd present it
A design skill that only knows websites is half a skill. Teach it slides: what a title slide looks like, how many words per slide, what never goes on one. Then rebuild the title slide and one content slide of a deck you've actually presented
Done looks like a Slides section in your design skill and two slides that look like your site's cousin
.
5
Build a second thing: a site for your club or company
Pass mark: you'd show the team
Your two skills are yours. A club or company needs one brand skill where voice and design travel together, because every flyer, post and email needs both. Build it from the organization's real examples, then its homepage
Exampleone brand skill rebuilt a 106-chapter nonprofit's site, a volunteer flyer, an Instagram post and a donor email. Same file every time
Done looks like a brand skill with Voice and Design sections in one file, and a homepage built from it
.
6
Skills that fix themselves overnight
Runs forever once it's set up. The real takeaway
Every time you correct Claude, that correction should land in a skill. Nobody remembers to do it. So a scheduled task reads the day's chats, finds where you corrected it, and proposes skill edits. You approve in the morning, one tap each
Done looks like a task on the Scheduled tab that runs tonight. Tomorrow, read what it proposes
.
Smaller moves
A mode for every room
Friends get the fun version, interviews get the buttoned-up one, same skill.
Rules per channel
An email, a Slack and a text shouldn't run the same length.
Ask + plan, built in
Three questions and a plan before Claude makes anything long, every time.
Link your two skills
When a page has words, the design skill calls the voice skill.
An interview-me skill
For applications and essays. Claude asks five questions first, then drafts from your answers. No blank page.
What you made tonight
You made it!
Keep fixing the skills every time you correct Claude. That's how they get good.
1
A voice skill
Use it on your next cover letter, cold email or LinkedIn post
