Créer son portfolio avec Claude : prompt, Claude Design et Vercel

Pour créer un portfolio avec Claude, deux chemins mènent à un site en ligne dans la journée. Claude Design, intégré aux conversations depuis septembre 2026, construit la page sur un canevas, puis l'exporte en HTML ou l'envoie vers un hébergeur comme Vercel ou Netlify. Un prompt complet, lui, te livre un fichier index.html que tu déploies toi-même sur Vercel. Un point à régler avant la mise en ligne : l'offre gratuite de Vercel est réservée à un usage personnel non commercial, et un portfolio qui présente tes services payants entre dans l'usage commercial selon les règles de Vercel.

Cet article s'adresse à un freelance qui a deux ou trois études de cas à montrer, pas à quelqu'un qui monte un média. Tu y trouveras le prompt exact, les cinq sections qui comptent, la procédure Claude Design et le déploiement pas à pas. Pour les réflexes de prompt utilisés ici sans être redémontrés, la méthode apprendre Claude côté opérationnel fait le tour de la question.

Quelle méthode choisir pour créer un portfolio avec Claude ?

Les deux méthodes Claude se comparent bien aux éditeurs visuels habituels. Les prix ci-dessous sont ceux affichés en dollars sur les pages tarifs officielles de chaque outil, la TVA pouvant s'ajouter selon ton pays.

Le point qui tranche, c'est la propriété. Avec un fichier index.html, tu possèdes le code : tu le dupliques, tu le versionnes, tu changes d'hébergeur en quelques minutes. Framer et Webflow vendent surtout du confort d'édition. Si tu hésites avec un site plus complet, le guide site web avec Claude détaille les cas où une structure plus riche se justifie, et notre article sur le site vitrine avec l'IA couvre les sites de plusieurs pages.

Quelles sections mettre dans un portfolio freelance ?

Un portfolio freelance efficace tient en cinq blocs. Chacun répond à une question que ton prospect se pose, dans l'ordre où il se la pose.

1. Une accroche avec une promesse claire. Pas « freelance passionné basé à Lyon ». Une accroche utile dit pour qui tu travailles, quel problème tu règles et quel résultat tu vises. Exemple : « J'aide les éditeurs de logiciels B2B en lancement à signer leurs 50 premiers clients grâce à des tunnels de vente mesurables. » Le visiteur sait tout de suite s'il continue à lire.

2. Deux ou trois études de cas. Format : contexte client, problème, ce que tu as fait, résultat chiffré. Trois paragraphes courts et un chiffre suffisent. Sans chiffre, tu as une description de mission, pas une étude de cas.

3. Ta méthode en 3 ou 4 étapes. Appel de découverte, cadrage, réalisation, livraison. Cette section rassure sur ton organisation, pas sur ta créativité.

4. Des preuves sociales. Deux ou trois témoignages courts avec nom, fonction et entreprise. Des logos clients en noir et blanc si tu en as.

5. Un seul appel à l'action. Réserver un appel ou envoyer un email, pas trois choix. Un formulaire minimal ou un lien vers ton agenda de réservation suffit.

Le contre-exemple classique : une section « À propos » qui raconte ton parcours scolaire. Si tu tiens à l'inclure, place-la en bas de page.

Comment créer un portfolio avec Claude Design ?

Claude Design est l'outil de conception visuelle d'Anthropic, lancé en avril 2026 et intégré aux conversations depuis la refonte de l'application en septembre 2026. La page d'aide officielle de Claude Design le présente pour les maquettes, prototypes, pages d'une feuille et landing pages, sur toutes les offres, gratuite comprise. Un portfolio d'une page entre exactement dans ce cadre.

1. Lance le design. Dans une conversation, choisis Output puis Design dans le champ de message, ou demande simplement « crée le design de mon portfolio ».
2. Donne le contexte. Colle le bloc « contexte métier » du prompt de la section suivante, avec tes études de cas et tes témoignages. Claude peut te poser des questions avant de construire la première version.
3. Retouche. Pour un changement global (couleurs, mise en page, nouvelle section), écris-le dans la conversation. Pour un détail, clique sur l'élément dans le canevas et laisse un commentaire. Tu peux aussi déplacer et redimensionner les éléments directement.
4. Exporte. Le bouton Export, en haut à droite, propose notamment une page HTML autonome, un dossier .zip, l'envoi vers d'autres outils, dont Vercel et Netlify, et le transfert vers Claude Code pour continuer dans un projet de code.

Deux précisions de la même page d'aide : le travail dans Claude Design consomme les mêmes limites d'usage que le reste de Claude, sans quota séparé, et l'ancienne version autonome sur claude.ai/design fermera le 14 décembre 2026. Si ton identité visuelle n'existe pas encore, commence par créer ton logo avec Claude : tu pourras l'importer dans le design.

Quel prompt donner à Claude pour générer le site du portfolio ?

Si tu préfères le fichier à l'éditeur, voici le prompt. Il est structuré en trois blocs : contexte métier, contraintes techniques, rendu attendu. L'ordre compte : Claude doit savoir pour qui tu travailles avant de choisir une typographie. Il livre le résultat sous forme de fichier à télécharger depuis la conversation.

Tu es développeur front-end senior et designer web. Crée mon portfolio
freelance dans un seul fichier index.html que je peux télécharger.

--- CONTEXTE MÉTIER ---
Qui je suis : [prénom, nom, 1 ligne de positionnement]
Mon offre : [service principal en 1 phrase]
Mes clients types : [cible en 1 phrase]
Mes 3 études de cas (titre + contexte + résultat chiffré) :
1. [...]
2. [...]
3. [...]
Mes 2 témoignages (nom, fonction, entreprise, 1 phrase) :
1. [...]
2. [...]

--- TECHNIQUE ---
- HTML et CSS dans le même fichier, JavaScript seulement si nécessaire
- Aucun framework, aucune dépendance à installer, aucune compilation
- Une seule page, pensée d'abord pour le mobile
- Images en chargement différé (loading="lazy") avec texte alternatif
- Balises title, meta description et Open Graph remplies

--- RENDU ---
- Palette : [2 couleurs maximum, ex. noir #0A0A0A et accent #FF6B35]
- Typographie : une police distinctive de Google Fonts, cohérente
  avec mon métier
- Ton : professionnel et direct, chaque affirmation appuyée par un fait
- Sections dans cet ordre : accroche, études de cas, méthode,
  témoignages, contact
- Contact : un bouton mailto:[email] et un lien vers mon agenda [URL]

Avant de coder, pose-moi les questions nécessaires si une information
manque. Ensuite, livre le fichier complet.

Trois choix de ce prompt méritent une explication. Le CSS est écrit dans le fichier plutôt que chargé via Tailwind en CDN : la documentation officielle de Tailwind précise que son CDN est conçu pour le développement et non pour la production. La police est laissée au choix de Claude parmi les polices distinctives : le guide de prompt d'Anthropic cite Inter, Roboto et Arial parmi les choix trop fréquents qui donnent aux sites générés par IA un air de déjà-vu. Enfin, sans framework ni compilation, tu déposes le fichier chez l'hébergeur et le site est en ligne. Pour la palette et la typographie, définir sa charte graphique avec Claude donne un process rapide.

Comment modifier le portfolio sans tout casser ?

Première erreur quand on reçoit le fichier : demander « peux-tu tout refaire en bleu ? ». Claude réécrit tout, change des choses que tu n'avais pas demandées, et tu perds vingt minutes à comparer deux versions. La bonne approche : lui donner uniquement la section à modifier.

Exemple pour changer la palette : « Voici la section d'accroche actuelle (colle le bloc HTML). Remplace l'accent orange par du vert émeraude #10B981 et garde tout le reste identique. Renvoie uniquement la section modifiée. »

Trois retouches fréquentes et leur formulation :

• Ajouter une étude de cas : « Voici une étude de cas existante (colle le bloc). Crée l'équivalent pour ce nouveau projet : [brief en 3 lignes]. Même structure HTML, mêmes classes CSS. »
• Retravailler l'appel à l'action : « Voici mon bloc de contact actuel. Propose trois variantes avec des accroches différentes, même structure HTML. »
• Corriger l'affichage mobile : « Sur mobile (largeur inférieure à 640 px), les titres h2 sont trop grands. Donne-moi uniquement les règles CSS à ajuster. »

Quand les allers-retours se multiplient, Claude Code travaille directement sur le fichier de ton ordinateur, sans copier-coller. Il demande un abonnement payant. Les bonnes pratiques officielles de Claude Code recommandent deux réflexes utiles ici : la touche Échap pour arrêter Claude en cours d'action, et la commande /rewind pour revenir à une version précédente du code. Notre guide Claude Code pour débutants détaille l'installation.

Comment mettre son portfolio en ligne sur Vercel ?

Deux options, selon que tu veux passer par GitHub ou non.

Option 1 : GitHub et le tableau de bord Vercel. Crée un dossier, place le index.html dedans, puis dans ton terminal :

cd mon-portfolio
git init
git add .
git commit -m "Premier commit"

Crée un dépôt sur GitHub (public ou privé), puis envoie le code :

git remote add origin git@github.com:ton-compte/mon-portfolio.git
git branch -M main
git push -u origin main

Sur Vercel, ouvre la page New Project, connecte ton compte GitHub (GitLab et Bitbucket fonctionnent aussi), sélectionne le dépôt et clique sur Deploy. Tu obtiens une adresse en .vercel.app, et chaque nouvel envoi sur la branche connectée redéploie le site automatiquement, comme l'indique le guide de démarrage de Vercel.

Option 2 : la ligne de commande Vercel, sans GitHub. Avec Node.js 18 ou plus installé :

npm i -g vercel
vercel login
cd mon-portfolio
vercel          # version de prévisualisation
vercel --prod   # mise en production

Le nom de domaine. Dans ton projet Vercel, ouvre Settings, puis Domains, et clique sur Add Domain. Pour un domaine principal (tonnom.fr), Vercel te demande un enregistrement A chez ton registrar (OVH, Gandi ou autre). Pour un sous-domaine (portfolio.tonnom.fr), un enregistrement CNAME. Les valeurs exactes s'affichent dans le tableau de bord. Une fois les DNS propagés, Vercel génère automatiquement le certificat HTTPS via Let's Encrypt, d'après sa documentation sur les certificats. Pour les réglages suivants, comme les redirections, lis notre article déployer un site sur Vercel avec Claude, et la fiche outil Vercel pour un avis sur la plateforme.

L'offre gratuite de Vercel suffit-elle pour un portfolio freelance ?

Pas d'après les règles de Vercel. Ses conditions d'usage équitable réservent l'offre Hobby, gratuite, à un usage personnel non commercial. Vercel définit l'usage commercial comme tout déploiement utilisé pour un gain financier, et cite parmi les exemples le fait de faire la promotion de la vente d'un produit ou d'un service. Un portfolio qui présente tes prestations et invite à réserver un appel entre dans ce cas.

Pour rester en règle, il faut l'offre Pro, affichée à 20 $ par mois et par siège développeur hors taxes sur la page tarifs de Vercel. Si tu as un doute sur ta situation, Vercel invite à contacter son support. D'autres hébergeurs proposent une offre gratuite, Netlify par exemple, qui figure aussi parmi les destinations d'export de Claude Design : lis leurs conditions d'utilisation avant d'y publier un site professionnel.

Comment faire évoluer le portfolio dans le temps ?

Le piège, c'est l'itération infinie qui empêche de publier une nouvelle étude de cas. Un bon rythme : une mise à jour à la fin de chaque mission réussie.

1. Écris le contenu dans un document : contexte, problème, action, résultat. 150 mots maximum.
2. Donne à Claude ce texte et une étude de cas existante du site, et demande-lui un bloc HTML cohérent avec le reste.
3. Colle le bloc dans index.html et envoie la modification sur GitHub.
4. Vercel redéploie le site automatiquement.

Pas de tableau d'administration, pas de mot de passe à retrouver, pas d'extension à mettre à jour. La limite arrive avec le volume : au-delà d'une dizaine d'études de cas, un fichier unique devient pénible à maintenir. C'est le moment de passer à une vraie structure avec un outil de gestion de contenu, par exemple Ghost associé à Next.js.

Questions fréquentes

Passer à la pratique

Tu as la méthode complète : cinq sections, un prompt structuré ou Claude Design, un déploiement sur Vercel et une façon d'itérer qui ne casse rien. Reste à bloquer une demi-journée et à le faire. Pour d'autres prompts orientés site web, pioche dans nos 50 exemples de prompts Claude. Si tu veux systématiser ce type de projet (portfolio aujourd'hui, articles de blog et automatisations ensuite), la formation IA Mastery y consacre un module entier, « Créer votre site web », sur 5 semaines de séances en direct, dès 1 200 €. Et si ton portfolio doit devenir une application avec comptes utilisateurs ou paiement, IA Builder t'accompagne jusqu'à la mise en ligne, dès 1 500 €.