30 Claude Prompts That Build Portfolio Sites
Fill the brackets. Claude returns one HTML portfolio as an Artifact: work grid, one case, about, contact. Real projects only. Not a Dribbble clone and not a full agency site.
In short: This page contains 30 copy-paste ready prompts, organized into 6 categories with a description and pro tip for each. The first 5 prompts are free instantly, no signup needed. Hand-curated and tested by the AI Academy team.
Grid
5 promptsWork Grid
1/30✨ What it does
Claude builds a work-grid portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a portfolio designer <context> I need one self-contained HTML work-grid portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Projects: [PROJECTS] - Role on each: [ROLES] </inputs> <task> Build a responsive work-grid portfolio with these sections: 1. Name 2. Grid from [PROJECTS] only 3. Role labels 4. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a project.
Filter Grid
2/30✨ What it does
Claude builds a filterable portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a filter-grid designer <context> I need one self-contained HTML filterable portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Projects: [PROJECTS] - Tags: [TAGS] </inputs> <task> Build a responsive filterable portfolio with these sections: 1. Tag filters from [TAGS] 2. Working filter in JS 3. Cards from [PROJECTS] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Filters must hide cards.
Chronological Work
3/30✨ What it does
Claude builds a chrono portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a timeline portfolio designer <context> I need one self-contained HTML chrono portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Dated work: [WORK] </inputs> <task> Build a responsive chrono portfolio with these sections: 1. Timeline from [WORK] 2. Gaps labeled 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a year.
Selected Only
4/30✨ What it does
Claude builds a selected-work portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are an editor of restraint <context> I need one self-contained HTML selected-work portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - The few: [FEW] </inputs> <task> Build a responsive selected-work portfolio with these sections: 1. Three to six from [FEW] 2. Why these, one line 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: A short grid beats a padded one.
Password Stub Case
5/30✨ What it does
Claude builds a gated-case portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a private-work designer <context> I need one self-contained HTML gated-case portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Public: [PUBLIC] - Private labels: [PRIVATE] </inputs> <task> Build a responsive gated-case portfolio with these sections: 1. Public work 2. Private cards that say ask 3. No fake lock JS unless I asked Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a password.
Case
5 promptsCase Study Page
6/30✨ What it does
Claude builds a case study page for [PROJECT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a case-study writer <context> I need one self-contained HTML case study page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PROJECT] - Problem: [PROBLEM] - What you did: [DID] - Result you can stand behind: [RESULT OR VERIFY] </inputs> <task> Build a responsive case study page with these sections: 1. Problem 2. What you did 3. Result or [VERIFY] 4. Next case Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a 40% lift.
Process Case
7/30✨ What it does
Claude builds a process case page for [PROJECT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a process writer <context> I need one self-contained HTML process case page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PROJECT] - Steps: [STEPS] </inputs> <task> Build a responsive process case page with these sections: 1. Steps from [STEPS] 2. Artifacts placeholders 3. What you would redo Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: No invented workshop.
Failed Project Case
8/30✨ What it does
Claude builds a failed-project case for [PROJECT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are an honest case writer <context> I need one self-contained HTML failed-project case I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PROJECT] - What broke: [BROKE] - What you learned: [LEARNED] </inputs> <task> Build a responsive failed-project case with these sections: 1. What broke 2. What you learned 3. No hero save Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: A clean fail is allowed.
Before After Case
9/30✨ What it does
Claude builds a before-after case for [PROJECT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a before-after designer <context> I need one self-contained HTML before-after case I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PROJECT] - Before: [BEFORE] - After: [AFTER] </inputs> <task> Build a responsive before-after case with these sections: 1. Split 2. Only images you described 3. Caption Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent the after metric.
Role-Clear Case
10/30✨ What it does
Claude builds a credits case page for [PROJECT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a credits editor <context> I need one self-contained HTML credits case page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PROJECT] - You did: [YOU] - Others: [OTHERS] </inputs> <task> Build a responsive credits case page with these sections: 1. Credits 2. Story 3. No stolen shots Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Name others if they exist.
About & Contact
5 promptsPortfolio About
11/30✨ What it does
Claude builds a portfolio about page for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a short-about writer <context> I need one self-contained HTML portfolio about page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Line: [LINE] - Proof: [PROOF] </inputs> <task> Build a responsive portfolio about page with these sections: 1. Line 2. Proof 3. Work jump 4. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: One screen if you can.
Contact Only
12/30✨ What it does
Claude builds a portfolio contact page for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a contact designer <context> I need one self-contained HTML portfolio contact page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Email: [EMAIL] - Other: [OTHER OR NONE] </inputs> <task> Build a responsive portfolio contact page with these sections: 1. Email mailto 2. Other only if named 3. Dummy form or none Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: A mailto is enough.
Services Plus Work
13/30✨ What it does
Claude builds a services portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a freelance designer <context> I need one self-contained HTML services portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Services: [SERVICES] - Projects: [PROJECTS] </inputs> <task> Build a responsive services portfolio with these sections: 1. Services from [SERVICES] 2. Work grid 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a service.
Now Page
14/30✨ What it does
Claude builds a now page plus work for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a now-page writer <context> I need one self-contained HTML now page plus work I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Now: [NOW] - Projects: [PROJECTS] </inputs> <task> Build a responsive now page plus work with these sections: 1. What I am doing now 2. A few projects 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Now should be dated in a placeholder.
Colophon
15/30✨ What it does
Claude builds a colophon portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a colophon writer <context> I need one self-contained HTML colophon portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Stack: [STACK] - Type: [TYPE OR VERIFY] </inputs> <task> Build a responsive colophon portfolio with these sections: 1. How the site is made 2. Stack from [STACK] 3. Work jump Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a typeface license.
These prompts give you the what. Tutorials give you the why.
Learn when to use extended thinking, how to build Claude Projects, and workflows that compound. 300+ tutorials and growing.
Craft Variants
5 promptsDesigner Portfolio
16/30✨ What it does
Claude builds a designer portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a designer-portfolio art director <context> I need one self-contained HTML designer portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Projects: [PROJECTS] </inputs> <task> Build a responsive designer portfolio with these sections: 1. Large images placeholders 2. Little type 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Let the work breathe.
Developer Portfolio
17/30✨ What it does
Claude builds a developer portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a dev-portfolio designer <context> I need one self-contained HTML developer portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Repos I can name: [REPOS] - Live: [LIVE OR NONE] </inputs> <task> Build a responsive developer portfolio with these sections: 1. Repos from [REPOS] 2. Live links only if given 3. Stack 4. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: No star counts you did not give.
Writer Portfolio
18/30✨ What it does
Claude builds a writer portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a writer-portfolio editor <context> I need one self-contained HTML writer portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Pieces: [PIECES] </inputs> <task> Build a responsive writer portfolio with these sections: 1. List from [PIECES] 2. Excerpts only if I pasted them 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a byline.
Photographer Portfolio
19/30✨ What it does
Claude builds a photographer portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a photo-portfolio designer <context> I need one self-contained HTML photographer portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Sets: [SETS] </inputs> <task> Build a responsive photographer portfolio with these sections: 1. Sets from [SETS] 2. Placeholders 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: No stock photos labeled as yours.
Studio Portfolio
20/30✨ What it does
Claude builds a studio portfolio for [STUDIO] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a studio-site designer <context> I need one self-contained HTML studio portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STUDIO] - People: [PEOPLE] - Projects: [PROJECTS] </inputs> <task> Build a responsive studio portfolio with these sections: 1. People 2. Projects 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a partner.
Motion & Layout
5 promptsQuiet Portfolio
21/30✨ What it does
Claude builds a quiet portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a quiet designer <context> I need one self-contained HTML quiet portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Projects: [PROJECTS] </inputs> <task> Build a responsive quiet portfolio with these sections: 1. Space 2. Grid 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: No hover circus.
One Project First
22/30✨ What it does
Claude builds a one-project portfolio for [PROJECT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a feature designer <context> I need one self-contained HTML one-project portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PROJECT] - Name: [YOUR NAME] - Others: [OTHERS] </inputs> <task> Build a responsive one-project portfolio with these sections: 1. Feature [PROJECT] 2. Others small 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: The first project does the selling.
Mobile Portfolio
23/30✨ What it does
Claude builds a mobile portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a mobile designer <context> I need one self-contained HTML mobile portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Projects: [PROJECTS] </inputs> <task> Build a responsive mobile portfolio with these sections: 1. Stacked work 2. Sticky name 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Thumb to email.
Rebuild Portfolio
24/30✨ What it does
Claude builds a rebuilt portfolio for [CURRENT PASTE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a ruthless editor <context> I need one self-contained HTML rebuilt portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [CURRENT PASTE] - Keep: [KEEP] - Cut: [CUT] </inputs> <task> Build a responsive rebuilt portfolio with these sections: 1. Diagnose 2. Rebuild 3. Keep [KEEP] 4. Cut [CUT] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Paste the current site.
PDF-Ready Portfolio
25/30✨ What it does
Claude builds a print-ready portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a print-and-web designer <context> I need one self-contained HTML print-ready portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Projects: [PROJECTS] </inputs> <task> Build a responsive print-ready portfolio with these sections: 1. Web grid 2. Print CSS 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Print should drop nav chrome.
Most people use 10% of Claude. Tutorials unlock the rest.
AI Academy: 300+ hands-on tutorials on Claude, ChatGPT, Midjourney, and 50+ AI tools. New tutorials added every week.
Fixes
5 promptsCut The Lorem Case
26/30✨ What it does
Claude builds a lorem-free portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a lorem-hunter <context> I need one self-contained HTML lorem-free portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Real projects: [PROJECTS] </inputs> <task> Build a responsive lorem-free portfolio with these sections: 1. Rebuild 2. Only [PROJECTS] 3. Holes labeled Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: No Coming soon cards unless you want them.
A11y Portfolio
27/30✨ What it does
Claude builds a accessible portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are an a11y designer <context> I need one self-contained HTML accessible portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Projects: [PROJECTS] </inputs> <task> Build a responsive accessible portfolio with these sections: 1. Alt on placeholders 2. Focus 3. Grid Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Every figure needs alt.
No Fake Metrics
28/30✨ What it does
Claude builds a no-fake-metrics portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a metrics skeptic <context> I need one self-contained HTML no-fake-metrics portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Results I can stand behind: [RESULTS OR NONE] </inputs> <task> Build a responsive no-fake-metrics portfolio with these sections: 1. Cases 2. Results or none 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: No +300% unless you typed it.
Hire Me Band
29/30✨ What it does
Claude builds a hire-me portfolio for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a freelance CTA designer <context> I need one self-contained HTML hire-me portfolio I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Availability: [AVAIL OR VERIFY] - Projects: [PROJECTS] </inputs> <task> Build a responsive hire-me portfolio with these sections: 1. Work 2. Availability or [VERIFY] 3. Email Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent Open for work if you are not.
Portfolio Plus Resume
30/30✨ What it does
Claude builds a portfolio-plus-resume for [YOUR NAME] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.
You are a combo designer <context> I need one self-contained HTML portfolio-plus-resume I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [YOUR NAME] - Roles: [ROLES] - Projects: [PROJECTS] </inputs> <task> Build a responsive portfolio-plus-resume with these sections: 1. Work 2. Roles from [ROLES] 3. Contact Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Resume stays short.
Free tool
Prompt Optimizer
Turn a rough idea into a structured, professional AI prompt.
Frequently Asked Questions
Prompts are the starting line. Tutorials are the finish.
A growing library of 300+ hands-on tutorials on ChatGPT, Claude, Midjourney, and 50+ AI tools. New tutorials added every week.
7-day free trial. Cancel anytime.