102.3K+Télécharger
Aller au guide d’utilisation
Web Design Engineerpar ConardLi

Web Design Engineer Skill.

Définissez le contrat visuel avant d'étendre l'interface.

  • Design frontend
  • Prototypage
  • Systèmes de design
Télécharger OpenDesignVoir le guide d'utilisation
Analyse de la source · Web Design EngineerSKILL.md
Tâche Design frontend Produit • Un artefact visuel HTML/CSS/JavaScript ou React • Une évaluation documentée de la direction visuelle et des choix de design tokens • Une première version consultable, suivie des états et interactions complets Avant de commencer Nécessite un agent capable de coder et un environnement frontend exécutable dans un navigateur. Certains modèles peuvent utiliser React, Babel, des bibliothèques de graphiques ou d'autres bibliothèques ; la recette dans le navigateur requiert un outil de navigation adapté.
Synthèse éditoriale · source examinée le 2026-10-07 · ce n'est pas un exemple généré

01 Fonctionnement

Web Design Engineer

Une méthode de design-ingénierie axée sur le contexte, avec exigences d'assets, calibrage du design, premières versions, modes de préservation, et parcours distincts de critique et de QA dans le navigateur.

Workflow fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Web Design Engineer est un workflow d'artefacts de navigateur pour pages, tableaux de bord, prototypes, présentations et visualisations. Au lieu de traiter chaque demande comme une nouvelle landing page, il identifie d'abord l'artefact, le public et le mode de travail sur l'existant. Étendre un produit, préserver les contrats d'une refonte et reconstruire une direction visuelle sont des tâches différentes, avec des permissions différentes.

Son évaluation du design repose sur cinq dimensions ajustables : variation, mouvement, densité d'information, dépendance aux assets et fidélité à la marque. Elles alimentent un système déclaré et une première version consultable avant l'implémentation détaillée. Pour un travail de marque, de vrais logos, des photos de produit et des captures d'interface comptent plus qu'une simple palette. Le skill distingue aussi une autovérification légère d'une recette exécutable dans le navigateur, que sa source réserve à une demande explicite de QA.

Livrables attendus

  • Un artefact visuel HTML/CSS/JavaScript ou React
  • Une évaluation documentée de la direction visuelle et des choix de design tokens
  • Une première version consultable, suivie des états et interactions complets
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Lire le contexte existant

    Examinez le code source fourni, les captures d'écran, les assets de marque et les contraintes. Déterminez s'il s'agit d'une extension, d'une refonte avec préservation ou d'une refonte plus large.

  2. 02
    Déclarer le contrat de design

    Expliquez la direction visuelle, le public, la densité, le mouvement et les assets, puis précisez la typographie, l'espacement, la palette, les surfaces et le traitement des interactions. Attendez que l'utilisateur approuve ce système de design avant d'écrire le premier code.

  3. 03
    Montrer une version consultable

    Utilisez les mises en page clés et des espaces réservés honnêtes pour tester la direction. Attendez une approbation distincte de cette première version avant de remplir chaque composant ou état d'interaction.

  4. 04
    Construire et relire

    Complétez les interactions et états approuvés. Effectuez l'autovérification de la source ; si une recette dans le navigateur est demandée, recueillez séparément des preuves réelles sur les viewports et les interactions.

02 Cas d’usage

Quand l'utiliser

Nécessite un agent capable de coder et un environnement frontend exécutable dans un navigateur. Certains modèles peuvent utiliser React, Babel, des bibliothèques de graphiques ou d'autres bibliothèques ; la recette dans le navigateur requiert un outil de navigation adapté.

Bon cas d'usage

  • Extensions d'un produit existantUtile lorsqu'un nouvel écran doit s'intégrer au produit et préserver les routes, formulaires et attentes d'interaction environnants.
  • Exploration de directions de designConvient à un brief visuel vague qui nécessite des directions vraiment différentes ou des variantes ajustables avant que l'équipe ne choisisse une composition.

Limites à vérifier

  • Périmètre frontend visuelLes API backend, les outils en ligne de commande et le traitement de données sortent du périmètre prévu du skill. Les workflows dédiés aux articles et aux présentations guidées par un récit sont également distincts.
  • La qualité n'est pas un résultat de testUne critique de design ou une inspection de la source ne prouve pas le comportement responsive dans un navigateur en exécution. Demandez une recette exécutable lorsque cette preuve est nécessaire.

Fournissez ces éléments

  • Artefact et publicNommez l'écran ou l'expérience à produire, ses utilisateurs, ainsi que les tailles d'affichage ou conditions de présentation importantes.
  • Contrats existantsFournissez le code, les références du système de design et les comportements à protéger. Indiquez ce qui peut changer et ce qui doit rester reconnaissable.
  • Contenu et assets réelsFournissez les textes approuvés, de vraies images de produit, des logos et des données. Signalez ce qui manque encore au lieu d'inventer des témoignages ou des indicateurs.

03 Décisions importantes

Décisions importantes

  1. La préservation comme choix de design

    Le mode de travail explicite aide à éviter qu'une refonte séduisante ne modifie discrètement des conventions utiles du produit ou ne remplace des décisions de marque existantes et valables.

  2. Des variantes qui ne se limitent pas à une recoloration

    Son cadre de calibrage permet de faire varier indépendamment la densité, l'organisation et l'interaction, plutôt que de présenter plusieurs versions simplement cosmétiques d'une même mise en page.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez le dossier complet du skill Garden afin que ses recettes de design, son protocole de préservation et ses références facultatives de recette soient disponibles.

Fichier source amont
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-design-engineer/SKILL.md

Nécessite un agent capable de coder et un environnement frontend exécutable dans un navigateur. Certains modèles peuvent utiliser React, Babel, des bibliothèques de graphiques ou d'autres bibliothèques ; la recette dans le navigateur requiert un outil de navigation adapté.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief
Utilise Web Design Engineer pour étendre notre interface d'analytique existante avec un écran de rapports enregistrés. Préserve sa navigation, ses tokens d'espacement et ses conventions de tableaux. Lis les composants et captures d'écran fournis, propose le système de design et attends mon approbation avant de coder. Montre ensuite une version consultable avec des plans pour les états de chargement et vide. Une fois cette version approuvée, termine l'implémentation et effectue la recette dans le navigateur aux tailles desktop et mobile fournies. N'invente pas de statistiques d'utilisation des rapports.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Le mode de travail documenté correspond aux modifications réellement apportées à l'interface existante.
  • La vue terminée inclut les états d'interaction pertinents pour le brief.
  • Toute affirmation de recette dans le navigateur s'accompagne des viewports réellement testés et des résultats.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, identifiants et dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage

05 Source et licence

Source et licence

Cette page décrit la révision de source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
ConardLi
Dépôt
ConardLi/garden-skills
Fichier du skill
skills/web-design-engineer/SKILL.md
Licence
MIT
Version examinée
2026-10-07 · aaf9a82f5efd
Synthèse éditoriale de la source
Une méthode de design-ingénierie axée sur le contexte, avec exigences d'assets, calibrage du design, premières versions, modes de préservation, et parcours distincts de critique et de QA dans le navigateur.

Synthèse originale de OpenDesign, fondée sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Produit-il toujours un projet React ?

Non. HTML est le support de sortie, mais la source couvre aussi le HTML/CSS/JavaScript simple, ainsi que des prototypes et artefacts visuels orientés React.

Remplacera-t-il un système de design existant ?

Pas automatiquement. Le workflow distingue extension, refonte avec préservation et refonte complète ; ce choix doit être arrêté avant toute modification.

Chaque build inclut-il des tests automatisés dans le navigateur ?

La source exige une autovérification légère pour tout travail, mais son dispositif de recette exécutable se déclenche uniquement sur une demande explicite concernant le navigateur, le responsive ou la QA.

OpenDesign

Faites de la place à la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre workflow.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-design-engineer/SKILL.md