Créer des pages web

Écrit par Stanislas

Dernière mise à jour Il y a 16 jours

Vue d'ensemble

Les pages web dans les artéfacts vous permettent de concevoir des applications web réactives, des pages de destination et des tableaux de bord interactifs sans écrire de code manuellement. Vous décrivez les fonctionnalités, la structure et l'apparence visuelle, et Swiftask génère le code et affiche un aperçu en direct.

Utilisez cette fonctionnalité pour prototyper des applications, publier des pages de destination pour vos clients ou concevoir des tableaux de bord internes. Vous pouvez ajuster le code et le style par de simples consignes conversationnelles ou par édition manuelle directe.

Prérequis

Avant de concevoir des pages web, assurez-vous de disposer de :

Un compte Swiftask actif.
Un accès à un espace de travail.
La fonctionnalité Artéfacts activée (disponible sur tous les forfaits).

Guide étape par étape

1. Ouvrir la section Artéfacts

Cliquez sur Artéfacts dans la barre latérale gauche.

2. Cliquer sur Créer une nouvelle page web

Cliquez sur le bouton Créer une nouvelle page web situé en haut du tableau de bord des artéfacts.

3. Sélectionner un agent IA

Dans la modale de configuration :

Choisissez votre assistant IA dans le menu déroulant Artifact assistant.
(Facultatif) Cochez Set this assistant as default pour sélectionner automatiquement cet assistant pour vos prochains artéfacts.
Cliquez sur Create artifact.

4. Inspecter l'aperçu en direct

Swiftask génère le code de l'application et affiche la page dans le panneau de droite. Vous pouvez tester les boutons, formulaires et comportements réactifs directement dans la fenêtre d'aperçu.

5. Modifier et affiner

Itération par consigne : Envoyez des instructions dans le chat pour ajouter de nouvelles sections, ajuster l'affichage réactif ou changer la palette de couleurs.
Ajustements manuels : Cliquez sur l'icône d'édition (crayon) pour modifier du texte, retoucher les styles ou déplacer des blocs sans régénérer via l'IA.

6. Partager, publier et gérer votre page web

Utilisez la barre d'outils supérieure dans la fenêtre d'aperçu pour contrôler, inspecter et partager votre page web en direct :

Share (Partager) : Ouvre la modale de partage pour inviter des membres de l'espace de travail, attribuer des rôles (Utilisateur, Admin, Propriétaire) ou générer un lien public.
Expand (Agrandir) : Bascule entre la vue partagée avec le chat et un aperçu en pleine largeur de la page web.
Refresh (Actualiser) : Recharge l'aperçu en direct pour réinitialiser les composants interactifs ou vérifier les modifications récentes.
Open in new tab (Ouvrir dans un nouvel onglet) : Lance la page web dans un nouvel onglet distinct du navigateur pour tester l'affichage réactif et les interactions en conditions réelles.
Copy link (Copier le lien) : Copie l'URL directe de la page web dans votre presse-papiers pour la transmettre rapidement à vos collaborateurs.
Copy code (Copier le code) : Copie l'intégralité du code source HTML, CSS et JavaScript généré dans votre presse-papiers.
Edit (Modifier) : Active le mode d'édition manuelle directe pour ajuster les textes, styles ou composants sans relancer l'IA.

Depuis votre bibliothèque d'artéfacts, cliquez sur l'icône à trois points (⋮) sur la carte d'une page web pour accéder aux actions de gestion :

Duplicate (Dupliquer) : Crée une copie conforme instantanée de la page web pour tester des variantes ou archiver une version de sauvegarde avant une refonte.
Rename (Renommer) : Modifie le titre d'affichage de la page web au sein de l'espace de travail.
Update (Mettre à jour) : Rouvre la discussion avec l'assistant IA pour poursuivre les modifications et itérations par consignes.
Assigned to a collection (Assigner à une collection) : Classe et organise la page web dans une collection thématique de l'espace de travail.
Share (Partager) : Ouvre la modale de partage pour configurer les accès et autorisations des collaborateurs.
Delete (Supprimer) : Supprime définitivement l'artéfact de page web de l'espace de travail.

Cas d'usage pratiques

Pages de lancement produit : Créez une page de présentation élégante avec message d'accroche, cartes de fonctionnalités, témoignages clients et boutons d'appel à l'action.
Tableaux de bord internes : Déployez un tableau de suivi visuel intégrant des tableaux de données, des fiches de synthèse et des filtres de sélection.
Formulaires de collecte de prospects : Mettez en ligne une page autonome pour recueillir les inscriptions à un webinaire ou les retours d'utilisateurs.

Conseils et bonnes pratiques

Listez les sections attendues (En-tête, Bannière héro, Cartes de fonctionnalités, Pied de page) dans votre prompt pour obtenir une structure équilibrée.
Testez les composants interactifs (menus accordéons, formulaires et navigation) directement dans l'aperçu avant de partager le lien.
Dupliquez votre page web existante avant d'effectuer une refonte visuelle majeure.

Dépannage

L'aperçu de la page ne se charge pas : Vérifiez que votre navigateur ne bloque pas l'exécution des scripts en cadre intégré, ou demandez à l'IA de régénérer la structure de base.
Incohérences d'affichage sur mobile : Demandez à l'agent d'optimiser les points de rupture réactifs pour les écrans mobiles et tablettes.

Ressources complémentaires