Vibecoder son portfolio - Partir d'une feuille blanche (partie 1)

Un portfolio template difficle à modifier

Mon premier portfolio était sur Framer, monté à partir d'un template pour pouvoir me concentrer sur le contenu des études de cas. Le temps gagné au départ, je l'ai repayé à chaque modification : chaque bloc portait des réglages propres au template, et modifier une section revenait à défaire les décisions de quelqu'un d'autre.

Je n'avais pas non plus l'envie de devenir expert Framer juste pour la création de mon portfolio. Restait une autre option : repartir d'une page blanche. Sur un portfolio, c'est précisément ce qu'il y a de plus difficile, en ce qui me concerne.

Une vision mais un manque de savoir-faire

Pourtant j'avais une idée très précise du résultat. Je voulais un site qui ressemble à ce que j'aime et consomme au quotidien : des jeux vidéo futuristes (Cyberpunk 2077 par exemple), des romans de science-fiction, des films dystopiques...

Ca n'empêchait pas la paralysie d'être devant une page blanche sur Framer. Savoir ce qu'on veut et savoir par quoi commencer sont deux compétences différentes.

« Futuriste » ne veut rien dire

Comment donner du contexte visuel à mon IA ?

J'avais entendu parler des capacités de Claude en webdesign, sans jamais arriver aux écrans que j'avais en tête. Les premiers essais après quelques prompts étaient franchement génériques : des pages correctes mais interchangeables, qui auraient pu appartenir à n'importe qui.

Le problème n'était pas le modèle, c'étaient mes prompts : « Futuriste » « Minimaliste », « Clean », « Moderne », : ces mots ne décrivent pas grand chose pour un LLM. Ils recouvrent mille directions visuelles, et une IA générative choisit alors la moyenne de toutes. Comme avec un humain, un visuel dit en une seconde ce qu'un adjectif ne dira jamais.

Donner du contexte visuel à l'IA

Je suis donc allé chercher de la matière là où elle se trouve : Behance, Dribbble, et les captures que j'accumulais déjà sans but précis. De quoi monter un moodboard conséquent sur Figma :

Ca a été décisif pour Claude : on commençait à tomber sur quelque chose d'assez unique. De mon côté, j'avais mis tellement d'infos sur ce moodboard, que j'arrivais à mieux cerner quels styles me paraissaient intéressant à approfondir. Je suis donc parti sur une D.A plus proche d'un HUD futuriste, avec des bordures fines, des layout en quadrillage...

Définir l'arborescence d'abord, générer des variations de layout

Une fois le style arrêté, je suis passé à la structure : lui donner exactement l'arborescence dont j'avais besoin, page par page, avant de parler mise en page. Après avoir statué sur l'architecture globale de mon portfolio, je suis repassé sur chaque page en demandant à chaque fois 3 versions de layout différents :

Là où l'outil s'arrête

La direction artistique était trouvée, le layout global aussi. C'est au moment de régler les détails que l'outil a commencé à travailler contre moi : décaler un bloc de quelques pixels, modifier une valeur de padding, changer un contenu texte... Figma commençait à me manquer.

Chaque ajustement minuscule repassait par une génération entière — beaucoup de tokens pour un résultat qui, une fois sur deux, ne provoquait pas le changement souhaité. Un outil excellent pour partir d'une page blanche n'est pas forcément idéal pour l'achever.

C'est ce qui m'a fait changer de méthode et d'outils par la suite, et c'est le sujet de la partie 2.