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. Drafted with AI writing assistance and checked against our editorial policy.
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. The library keeps 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: hands-on tutorials on Claude, ChatGPT, Midjourney, and many other AI tools. New tutorials are added regularly.
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 hands-on tutorials on ChatGPT, Claude, Midjourney, and many other AI tools. New tutorials are added regularly.
7-day free trial. Cancel anytime.