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.
Je veux que les instructions de conception soient sophistiquées dans un style é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
PDF
Descriptions de projets (3 à 5 exemples détaillés de vos meilleures réalisations)
PDF
CV
PDF
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.
Transformez un projet en étude de cas détaillée
Approfondissez votre travail le plus important en présentant l’ensemble du processus de conception.
Prenez le projet Tableau de bord de suivi de l'infrastructure et développez-le en étude de cas complète d’une page. 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 le design 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 »), désignez Claude comme 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 génériques institutionnelles », « ne pas utiliser la typographie par défaut »). Vous pouvez itérer votre résultat final : après la première version, évaluez ce qui manquait et demandez des améliorations.
Utilisez les Skills pour la cohérence du design
Créez une Skill 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 standards sans que vous ayez à re-expliquer vos préférences à chaque fois. Demandez à Claude de vous aider à créer une Skill de conception de contenu qui regroupe vos préférences de mise en forme, votre esthétique et vos standards de qualité en un flux de travail réutilisable. En savoir plus sur la création de Skills.
Prêt·e à tester par vous-même ?
Travaillez avec Claude pour créer une page de portfolio représentative de votre travail et apprenez à la déployer en direct, le tout sans écrire de code.
