Concevoir avec
Kimi dans
OpenDesign.

notification-preferences.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 Kimi

   Suivez les instructions Kimi de votre version installée. Authentifiez-vous avec votre clé API Moonshot (BYOK) — les identifiants restent sur votre machine.

   Documentation Kimi CLI — Prise en main

   # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
   curl -LsSf https://code.kimi.com/install.sh | bash
   # or, if you already have uv:
   uv tool install --python 3.13 kimi-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

   D'après les notes de configuration Kimi du 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écutez une petite tâche Kimi

   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.
   • KimiLit le brief et le fichier d'instructions du projet ; pose une question quand quelque chose est ambigu.
   • 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 · PromptKimi

   You

   Design notification preferences: channels, quiet hours, per-project overrides. Match the reference for tone. Desktop and phone.

   Kimi

   Understood. Should per-project overrides live on this page as expandable rows, or on each project’s own settings page?
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.
   • KimiCharge les tokens et les règles de posture de DESIGN.md dans le contexte avant d'écrire une seule 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

   Kimi écrit un fichier HTML autonome : mise en page, styles, interactions et points d'ancrage stables.

   • VousAttendez, ou répondez à une question de clarification. Rien à configurer.
   • KimiPlanifie 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

   • notification-preferences.htmlnew
   • AGENTS.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.
   • KimiLit 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 · rows

   One toggle per row on the phone; the helper text goes under the label.

   Comment on · quiet

   Quiet hours need an explicit “off” state, not two empty pickers.
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.
   • KimiApplique 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

   • ✓Single toggle per row at 390px
   • ✓Quiet hours has an off state
   • ✓No horizontal scroll at 390px
   • Per-project expand — checked by you