Une boîte à outils de qualité professionnelle pour implémenter des systèmes de design, des mises en page réactives et des standards UI/UX spécifiques aux jeux.
Installer & Télécharger
1. ClawHub CLI
Le moyen le plus rapide d'installer une compétence directement depuis le registre.
npx clawhub@latest install web-design-pro
2. Installation manuelle
Copiez le dossier de la compétence dans l'un de ces emplacements
~/.openclaw/skills/ <project>/skills/ Priorité : Espace de travail > Local > Intégré
3. Installation du prompt
Copiez ce prompt dans OpenClaw pour l'installer automatiquement.
Aide-moi à installer web-design-pro via Clawhub. Si Clawhub n'est pas installé, installe-le d'abord (npm i -g clawhub).
Vous préférez télécharger ?
Obtenez les fichiers bruts de la compétence dans une archive ZIP.
Qu'est-ce que Web Design Pro ?
Web Design Pro est une compétence complète en ingénierie du design conçue pour combler le fossé entre le design esthétique et l'implémentation technique. Elle se concentre sur la création de systèmes de design évolutifs à l'aide d'une structure de tokens hiérarchique, garantissant que les décisions de design sont gérées comme des données. Cette compétence intègre des techniques CSS modernes telles que la typographie fluide et les requêtes de conteneur pour offrir des expériences fluides sur tous les types d'appareils.
Au-delà des mises en page de base, elle donne la priorité à l'accessibilité (WCAG 2.1) et à l'optimisation des performances, en ciblant les Core Web Vitals critiques tels que le LCP et l'INP. En incorporant des modèles d'interface utilisateur de jeu spécialisés et des méthodologies UX immersives, cet ajout à vos Openclaw Skills permet la création d'interfaces web de qualité commerciale à la fois performantes et profondément engageantes pour les utilisateurs.
Cas d'utilisation de Web Design Pro
- Développement de systèmes de design évolutifs avec des design tokens multi-niveaux.
- Implémentation de typographies et de mises en page fluides et réactives à l'aide de fonctions CSS modernes.
- Audit et amélioration de l'accessibilité web pour répondre aux normes WCAG 2.1 AA.
- Optimisation des performances web pour des scores Core Web Vitals supérieurs.
- Création d'UI/UX immersifs pour les portfolios de jeux et les applications web interactives.
Comment fonctionne Web Design Pro
- Établir une hiérarchie de tokens commençant par les valeurs Primitives jusqu'aux tokens Sémantiques et spécifiques aux Composants.
- Appliquer des méthodologies UX telles que Jobs to be Done (JTBD) pour aligner les éléments d'interface avec l'intention de l'utilisateur.
- Utiliser CSS clamp() et les Container Queries pour construire une structure réactive fluide et mobile-first.
- Intégrer des points de contrôle d'accessibilité incluant le HTML sémantique, les audits de contraste de couleurs et le support de la navigation au clavier.
- Optimiser les ressources en utilisant les formats WebP/AVIF et mettre en œuvre des stratégies de performance comme le lazy loading et le report de script.
- Déployer des modèles d'UI spécifiques aux jeux pour fournir un retour visuel immédiat et des hiérarchies visuelles immersives.
Configuration de Web Design Pro
Pour commencer à utiliser ces capacités d'ingénierie du design dans vos Openclaw Skills, assurez-vous que votre environnement est configuré pour le CSS moderne et la gestion des tokens :
# Installer Style Dictionary pour la gestion des tokens
npx style-dictionary build
# Auditer la performance et l'accessibilité de votre site actuel
npx lighthouse https://your-site-url.com
Configurez vos variables CSS pour utiliser la structure de tokens définie dans votre système de design afin d'assurer la cohérence entre les composants.
Schéma de données et taxonomie de Web Design Pro
| Type de données | Format | Description |
|---|---|---|
| Design Tokens | JSON | Définit les couleurs, l'espacement et les échelles de typographie. |
| Styles fluides | CSS | Implémentations de clamp() pour une mise à l'échelle réactive. |
| Ressources image | WebP / AVIF | Médias optimisés pour améliorer le LCP et la performance. |
| Accessibilité | ARIA / HTML sémantique | Métadonnées et structure pour la compatibilité avec les lecteurs d'écran. |
| Flux UX | Cadre JTBD | Cartographie logique des objectifs utilisateur vers les composants UI. |
Fonctionnalités avancées de Web Design Pro
- Support de Tokens Studio (Figma) pour automatiser le pipeline du design au code.
- Implémentation avancée des Container Queries pour une réactivité basée sur les composants.
- Support de
prefers-reduced-motionpour gérer les interactions utilisateur sensibles. - Conversion par lots automatisée des ressources image vers des formats haute efficacité.
- Boucles de rétroaction en temps réel pour l'optimisation de l'Interaction to Next Paint (INP).
SKILL.md
Chargement
Compétences Openclaw associées
Bundling Web (HTML unique)
Un flux de travail spécialisé pour regrouper les applications React et Vite modernes dans des artefacts HTML portables à fichier unique pour une distribution fluide.
Video Pro
Une compétence de montage vidéo haute performance utilisant Remotion et FFmpeg pour la production et le traitement de vidéos programmatiques sur des nœuds distants.
Vérifier Avant de Terminer
Un protocole de vérification rigoureux qui exige des preuves fraîches et objectives avant qu'un agent d'IA ne puisse prétendre à l'achèvement d'une tâche ou effectuer un commit.
Discipline TDD
Un cadre rigoureux de Développement Piloté par les Tests pour les agents IA afin de garantir la fiabilité du code et d'éliminer les régressions.
YouTube Pro (Édition Miss Kim)
Un moteur d'analyse avancé pour extraire des transcriptions, des métadonnées et des informations intelligentes à partir du contenu YouTube.
Reef: Protocole de Communication Agent-à-Agent
Reef est un protocole A2A sécurisé qui permet aux agents d'IA de communiquer, de se découvrir et de collaborer via une messagerie cryptée et des applications décentralisées.
En vedette*
