Concevoir avec
Claude Code dans
OpenDesign.

workspace-settings.html · 1440px

4Vérification avant transmission

1. 1

   Téléchargez l’application de bureau OpenDesign

   Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.

   Télécharger OpenDesign

   POINT DE CONTRÔLE

   L'application de bureau s'ouvre. Déjà installée ? Passez à l'étape suivante ; il n'est pas nécessaire de la télécharger à nouveau.
2. 2

   Préparez votre connexion Claude Code

   Suivez les instructions de Claude Code dans votre version installée. Authentifiez-vous avec votre clé API Anthropic (BYOK) ou votre abonnement Claude — rien n'est relayé par nos serveurs.

   anthropics/skills — skill frontend-design

   # 1. Install Claude Code (native install, recommended)
   curl -fsSL https://claude.ai/install.sh | bash
   # or: brew install --cask claude-code
   # Windows PowerShell: irm https://claude.ai/install.ps1 | iex
   
   # 2. Start it in your project and sign in on first run
   cd your-project
   claude            # sign in with your Claude subscription or API key

   D'après les notes de configuration de Claude Code dans le guide publié ; consultez la documentation du fournisseur pour la commande actuelle.

   POINT DE CONTRÔLE

   Confirmez l'agent et le compte prévus. S'il n'est pas disponible, vérifiez la compatibilité avant de tenter une tâche plus importante.
3. 3

   Exécuter une petite tâche Claude Code

   Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.

   Brief de démarrage Copier

   Créez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.

   POINT DE CONTRÔLE

   Ouvrez le résultat, testez l'état de sauvegarde et demandez une modification précise. Un fichier généré est le début de la revue, pas la fin.

Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.

1. 1

   Brief de design

   Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.

   • VousRédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
   • Claude CodeLit le brief et le fichier d'instructions du projet ; interroge en cas d'ambiguïté.
   • OpenDesignFournit le projet, la surface de prompt et le skill correspondant au type d'artefact.
   • VérificationConfirmez que le brief énonce les critères d'acceptation. Les ajouter maintenant coûte moins cher qu'après la génération.

   New project · PromptClaude Code

   You

   Design the workspace settings: general, members, notifications, billing. Use the CLAUDE.md tokens. Desktop and phone.

   Claude Code

   Understood. Should billing be a separate page with its own permissions, or a section on the same page for owners only?
2. 2

   Contraintes de design

   Un design system et quelques règles strictes. C'est ce qui distingue un résultat conforme à votre marque d'un rendu générique.

   • VousChoisissez un design system ; indiquez les points de rupture et les composants à utiliser obligatoirement.
   • Claude CodeCharge les tokens et les règles de posture de DESIGN.md dans le contexte avant d'écrire la moindre ligne.
   • OpenDesignFournit la bibliothèque de design systems et associe celui choisi au modèle du skill.
   • VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Générer l'interface

   Claude Code écrit un fichier HTML autonome : mise en page, styles, interactions et hooks stables.

   • VousAttendez, ou répondez à une question de clarification. Rien à configurer.
   • Claude CodePlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige ce qui échoue.
   • OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
   • VérificationRien pour l'instant. Jugez le fichier une fois rendu, pas depuis la source.

   Project files3 files

   • workspace-settings.htmlnew
   • CLAUDE.mdbound
   • DESIGN.mdread
4. 4

   Aperçu

   Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.

   • VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
   • Claude CodeLit vos commentaires sur l'aperçu et prépare la révision suivante.
   • OpenDesignAffiche l'aperçu, expose des cibles data-od-id pour les commentaires et les modifications.
   • VérificationHiérarchie, contraste, débordement à 390px, états de focus, et si l'accent est utilisé avec parcimonie.

   Preview · 390pxComment mode

   Comment on · form

   Labels should sit above inputs on the phone; the side-by-side layout wraps badly at 390px.

   Comment on · toggles

   Only enabled toggles carry the accent; disabled ones stay neutral.
5. 5

   Réviser et vérifier

   Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.

   • VousTransformez les commentaires en demandes ; décidez quand la tâche est terminée.
   • Claude CodeApplique les modifications sur place et réexécute le fichier.
   • OpenDesignConserve les versions côte à côte ; exporte une image ou le HTML une fois terminé.
   • VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.

   Verification · v23 of 4

   • ✓Labels stack above inputs at 390px
   • ✓Accent only on enabled toggles
   • ✓No horizontal scroll at 390px
   • Unsaved-changes prompt — checked by you