Créez une page Web personnalisée
Créez un site de portfolio pour présenter votre travail et apprendre comment le déployer en direct sans écrire une seule ligne de code.
- AuteurAnthropic
- CatégoriePersonnel
- ModèleSonnet 4.5
- Fonctionnalités
- PartagerCopier le lien
1
Décrivez la tâche
La vision et les capacités de codage de Claude s’associent pour transformer vos descriptions et images en interfaces Web fonctionnelles. Claude peut combiner votre CV et vos projets passés pour créer un portfolio qui reflète votre parcours professionnel et votre style de conception préféré.
Demandez à Claude de créer votre site de portfolio à partir des fichiers de CV et de projet que vous avez téléchargés. Indiquez vos préférences de conception et que vous avez besoin de conseils pour le déployer.
Aidez-moi à créer une page HTML de portfolio professionnel pour présenter ma carrière et mes réalisations professionnelles. J'ai téléchargé mon CV, les descriptions de projets et des fichiers d'idée de conception. Utilisez-les pour comprendre mes antécédents et mes préférences esthétiques.
Pour les instructions de conception, je veux quelque chose de sophistiqué et éditorial : à l'image d'une agence de création haut de gamme, et non pas d'un modèle d’entreprise. Évitez les mises en page génériques, les dégradés ressemblant à ceux d’une IA ou une symétrie trop importante. Les sites qui me plaisent (dans les téléchargements) sont de qualité organique, artisanale et contiennent des détails inattendus.
Une fois le projet créé, je peux le publier en direct sur Internet. Je n'ai jamais déployé de site Web : j'ai besoin d'étapes précises ne nécessitant aucune connaissance en codage.
2
Offrez un contexte à Claude
Communiquez à Claude les informations sur votre parcours professionnel et vos préférences en matière de conception pour créer un site qui représente votre travail de manière authentique.
Contexte obligatoire
Téléchargez des fichiers qui reflètent votre parcours professionnel, comme votre CV, vos projets passés et les autres réalisations que vous souhaitez mettre en valeur.
Incluez également tous les fichiers qui expriment vos préférences esthétiques. Les captures d'écran de portfolios que vous recherchez ou même des extraits de code d'interface utilisateur issus de conceptions que vous aimez aident Claude à comprendre votre orientation esthétique.
No items found.
CV
Descriptions de projets (3 à 5 exemples détaillés de vos meilleures réalisations)
CV
Contexte facultatif
Activez la Réflexion étendue pour que Claude puisse consacrer plus de temps à la création de résultats de haute qualité.
Réflexion étendue
3
Le résultat produit par Claude
Claude crée une page de portfolio complète sous forme d'artéfact HTML. L'artefact inclut vos informations professionnelles, les présentations de vos projets et les choix de conception adaptés à vos préférences esthétiques.
Généré par Claude
J'ai créé votre site portfolio. La conception s'inspire de l’esthétique éditoriale, artisanale dans vos fichiers d’inspiration. J’ai évité les mises en page symétriques et les modèles d’entreprise pour obtenir quelque chose de plus organique. Les effets de bande que vous avez mentionnés apparaissent sur les cartes de projet, et j'ai ajouté de subtiles animations de défilement qui s'activent au fur et à mesure que vous faites défiler la page.
Votre CV structure la section À propos, tandis que les descriptions de vos projets ont chacune leur propre zone de présentation, avec de l’espace pour les images et les détails. La typographie utilise une police sans-sérif qui correspond au ton sophistiqué que vous recherchez. La palette de couleurs est issue de l'analyse de vos références de conception.
Consultez la page Web de votre portfolio
Vous pouvez l'ouvrir dans n'importe quel navigateur pour voir à quoi il ressemble. Si vous souhaitez ajuster les couleurs, changer l'ordre des projets ou modifier une partie du texte, indiquez-le moi.
4
Requêtes de suivi
Continuez à converser avec Claude pour affiner, développer ou explorer plus en détail.
Déployez votre site en ligne
Claude peut se connecter à Netlify pour prendre le code de votre artefact et le déployer comme site Web en direct, sans que vous ayez à coder. À partir du code HTML de votre artefact, Claude peut vous apprendre comment gérer le processus de déploiement technique.
Je veux créer un vrai site à partir du code de mon artefact de portfolio. Utilisez mon connecteur Netlify, créez un nouveau projet de site directement dans Netlify et guidez-moi pour le déployer en direct. Je partage le code de mon artefact de portfolio. Utilisez mon connecteur Netlify pour créer un nouveau projet de site et le déployer comme site web en direct. Donnez-moi l'URL une fois qu'il sera en ligne et expliquez-moi comment mettre à jour le site ultérieurement si je veux y apporter des modifications.
Créez des effets interactifs
Ajoutez des animations et des interactions codées. Claude peut écrire des fichiers HTML, CSS et JavaScript pour ajouter un comportement fonctionnel à votre site : effets de curseur, animations de défilement ou éléments interactifs qui répondent aux actions des utilisateurs.
Ajoutez des effets de curseur sur les cartes de projet, peut-être un changement subtil ou une modification de limites. Lorsque je fais défiler une section, le titre doit s'estomper légèrement. Rien d’extraordinaire, juste des interactions affinées qui montrent le souci du détail.
Transformer un projet en une étude de cas détaillée
Plongez dans vos projets les plus importants avec le processus de conception complet.
Prenez le projet Tableau de bord de suivi de l'infrastructure et développez-le en une page d'étude de cas complète. Indiquez le problème, la phase de recherche, le processus de conception, les itérations, les défis rencontrés, la manière dont ils ont été résolus et l’impact mesurable. Ajoutez des sections pour les graphique de type « fil de fer », les commentaires des utilisateurs et les leçons apprises.
5
Astuces, conseils et résolution des erreurs
Améliorez la conception de vos résultats
Claude peut parfois opter pour des options de conception plus fonctionnelles : polices standard, couleurs par défaut, espacements adéquats. Pour obtenir des résultats plus variés, essayez différentes techniques de requêtes. Faites référence à des bancs d'essai de qualité ( « rapport de conseil de premier plan », « produit SaaS premium » ), concevez Claude comme un expert dans le domaine ( « adoptez une approche de concepteur senior » ) ou demandez à Claude de classer et d'affiner ses propres résultats selon des normes de qualité élevées. Vous pouvez également indiquer à Claude ce qu'il ne faut pas faire ( « éviter les couleurs bleues d'entreprise génériques », « ne pas utiliser la typographie par défaut » ). Vous pouvez itérer votre résultat final : après la première version, évaluer ce qui manquait et solliciter des améliorations.
Utilisez les Compétences pour obtenir des normes de conception cohérentes
Créez une Compétence qui combine vos références visuelles, des exemples de réussite et des préférences de conception spécifiques. Claude peut appliquer vos normes établies sans avoir à re-expliquer vos préférences à chaque fois. Demandez à Claude de vous aider à créer une Compétence de conception de contenu qui regroupe vos préférences de mise en forme, votre esthétique et vos normes de qualité en un flux de travail réutilisable. En savoir plus sur la création de Compétences.
Prêt·e à tester par vous-même ?
Travaillez avec Claude pour créer une page de portfolio qui représente votre travail et apprenez à la déployer en direct, le tout sans écrire de code.
