Compétences Design IFQ

Que fait Compétences Design IFQ ?

Une seule entrée -> HTML prêt à livrer, avec export optionnel en MP4 / GIF / PPTX / PDF / SVG. Ce fichier racine est un routeur court pour OpenClaw, ClawHub, skills.sh, Hermes, Codex, Claude Code, Cursor, OpenCode et autres hôtes compatibles AgentSkills. Charger les fichiers plus profonds uniquement lorsque la tâche l'exige.

Chemin de Chargement en 30 Secondes

1. Confirmer que la demande est un livrable visuel construit en HTML. Si ce n'est pas le cas, quitter cette compétence.
2. Choisir le mode à partir de references/modes.md, puis lire assets/templates/INDEX.json.
3. Forker un modèle listé dans l'espace de travail de l'utilisateur. Ne jamais partir d'un fichier HTML vierge.
4. Intégrer assets/ifq-brand/ifq-tokens.css et tisser au moins 3 marques ambiantes IFQ à partir de references/ifq-brand-spec.md.
5. Vérifier avec npm run verify:lite -- <file.html>, puis npm run preview -- <file.html>.

Promesse Humain + Agent

• Les humains obtiennent un chemin d'artefact terminé : HTML en premier, export uniquement sur demande, et aucune configuration cachée.
• Les agents obtiennent un chemin court : mode, modèle, références obligatoires, politique de niveau et commande de vérification.
• Les mainteneurs obtiennent une pression de régression : 12 évaluations de mode, scripts sans scanner, et vérifications des métadonnées de marketplace.
• Les marketplaces obtiennent un package lisible : installation en une ligne, zéro variable d'environnement requise, permissions explicites, et aucune installation silencieuse.

Chemin de Réussite Premier Lancement

Après l'installation, faire en sorte que la première interaction produise un artefact visible en un tour :

1. Accepter une demande visuelle en langage naturel sans la transformer en travail de configuration.
2. L'orienter vers un mode et un modèle ; nommer les deux dans la preuve finale.
3. Écrire le fichier HTML dans l'espace de travail de l'utilisateur avec des hypothèses étiquetées pour les faits non résolus.
4. Lancer npm run verify:lite -- <file.html> lorsque le shell est disponible, puis prévisualiser ou prendre une capture d'écran avec les outils du navigateur hôte lorsqu'ils sont disponibles.
5. Signaler le chemin du fichier, le mode, le modèle, le résultat de la vérification, et uniquement les réserves qui affectent l'utilisation.

Ne pas demander de connexion au compte, d'installation globale, de dépendances d'export, ou de modifications étendues de l'environnement pendant le chemin de premier lancement.

Limite de Sortie

• La sortie principale est un HTML local vérifié, plus des compagnons SVG/statiques ou une structure source prête pour l'export lorsque la tâche le nécessite.
• Les assistants MP4/GIF/PDF/PPTX sont une automatisation optionnelle du dépôt complet. Préparer d'abord la source HTML ; installer ou exécuter les outils d'export uniquement après une intention explicite de l'utilisateur.
• Ne jamais prétendre qu'un fichier d'export, une capture d'écran, un statut de marketplace ou un résultat de sécurité existe tant que la commande ou la vérification en direct correspondante n'a pas été effectuée.

À Utiliser Quand

• Prototype interactif, maquette haute fidélité, flux d'application cliquable, tableau de bord, page d'atterrissage, livre blanc, rapport, infographie, diaporama, changelog, carte, invitation, couverture sociale ou système de marque.
• Démo animée ou animation de lancement, surtout lorsque l'utilisateur veut également une sortie MP4/GIF.
• Critique de design, diagnostic de marque, ou 3 directions stylistiques différenciées avant implémentation.
• L'utilisateur demande un export PDF/PPTX/SVG à partir d'une source HTML.

Ne Pas Utiliser Quand

• La vraie tâche est du développement frontend de production, du travail backend, une implémentation de site critique pour le SEO, ou un bug CSS dans une application existante.
• L'utilisateur veut seulement une révision de copie sans artefact visuel.
• Le livrable doit transiter par Word, Google Docs ou un modèle d'entreprise verrouillé.

Politique de Niveaux

Niveau	Par défaut ?	Prérequis	Utilisation pour
Niveau 0	oui	Node >= 18.17	HTML, prévisualisation, vérification légère, tests de fumée
Niveau 1	sur option	Python + Playwright + Chromium	captures d'écran sans tête, capture console, vérifications multi-viewport
Niveau 2	sur option	npm run install:export ; MP4/GIF nécessitent aussi ffmpeg	Export MP4, GIF, PDF, PPTX modifiable

N'installez pas les dépendances optionnelles sauf si l'utilisateur a explicitement besoin de captures d'écran ou de formats d'export.

Arbre de Décision de Routage

Demande de l'utilisateur arrive
  │
  ├─ Est-ce un livrable de design visuel ? ─── Non → Quitter la compétence, rendre la main à l'agent par défaut
  │
  ├─ Pouvez-vous trouver un déclencheur de mode ? ─── Oui (confiance >70%) → forker le modèle → livrer → vérifier
  │                                      (un tour : nommer les hypothèses, pas de questions)
  │
  ├─ Pouvez-vous trouver un déclencheur de mode ? ─── Oui (confiance ≤70%) → design-direction-advisor.md léger
  │                                      (3 directions textuelles uniquement, pas de démos, attendre le choix de l'utilisateur)
  │
  ├─ Est-ce qu'il mentionne un produit/technologie/événement concret ? ─── Oui → fact-and-asset-protocol.md + vérification web des faits
  │
  ├─ Est-ce un prototype d'application mobile ? ─── Oui → app-prototype-rules.md + ios_frame.jsx / android_frame.jsx
  │
  └─ Est-ce de l'animation/vidéo ? ─── Oui → animation-pitfalls.md + animations.md + video-export.md

Lisez references/modes.md pour le protocole complet des modes. Le tableau de référence rapide ci-dessus est la couche de vitesse.

Référence Rapide (Tableau de Vitesse Agent)

Mode	Mots-clés déclencheurs	Modèle	Références clés
M-01	film de lancement, 发布会, vidéo produit	T-launch-film	animations.md, video-export.md
M-02	portfolio, 个人站, à propos de moi	T-hero-landing	design-direction-advisor.md
M-03	livre blanc, 白皮书, rapport annuel	T-infographic-vertical	fact-and-asset-protocol.md
M-04	tableau de bord, 看板, KPI, centre de commande	T-dashboard	app-prototype-rules.md
M-05	A vs B, 横评, benchmark	T-compare-vs	fact-and-asset-protocol.md
M-06	onboarding, 新手引导, démo de flux	T-onboarding-flow	app-prototype-rules.md
M-07	changelog, notes de version, 发布日记	T-changelog	content-guidelines.md
M-08	keynote, PPT, 演讲, diaporama	T-slide-title	slide-decks.md, editable-pptx.md
M-09	matériel réseaux sociaux, couverture sociale, 小红书	T-social-x	content-guidelines.md
M-10	carte de visite, 名片, invitation	T-business-card	ifq-brand-spec.md
M-11	diagnostic de marque, 品牌诊断, audit de marque	T-brand-diagnosis	critique-guide.md
M-12	marque from scratch, 从零建立品牌	T-brand-system	design-direction-advisor.md

Tous les modèles : npm run verify:lite -- <file> + npm run preview -- <file> (Niveau 0, zéro installation).

Couche Ambiante IFQ

• La marque de l'utilisateur est le sujet. IFQ est la couche d'auteur : rythme de mise en page, papier chaud, grand livre rouillé, notes de terrain mono, étincelle de signal, URL calme et contraste éditorial.
• Chaque livrable utilise au moins 3 marques IFQ. Ne collez jamais un logo générique bruyant ou un filigrane, sauf si la tâche est détenue par IFQ ou qu'il s'agit d'un export d'animation qui appelle le tampon promotionnel.
• Les modèles intégrés utilisent des polices locales pour un rendu sûr en Chine. Google Fonts ou les exécutions CDN sont sur option uniquement ; voir references/font-loading.md.
• Évitez les étiquettes de taxonomie interne visibles telles que Signal Spark ou Rust Ledger dans les designs destinés à l'utilisateur. Écrivez plutôt du contenu réel.

Modèles de Conversation

Modèle A — Demande spécifique (le plus courant, un tour) : Utilisateur : "Faire une comparaison A vs B, nous contre Stripe" → Agent : vérifier les faits des deux produits → orienter M-05 → forker T-compare-vs → remplir avec des données vérifiées → livrer → vérifier.

Modèle B — Défaut confiant (un tour) : Utilisateur : "Fais-moi une page d'atterrissage" → Agent : correspondre à M-02 avec une confiance >70% → forker T-hero-landing → choisir le style Editorial Serif → remplir avec les valeurs par défaut → livrer → vérifier → nommer les hypothèses dans les réserves.

Modèle C — Conseiller léger (deux tours) : Utilisateur : "Aide-moi à faire quelque chose de beau" → Agent : aucun mode ne correspond à >70% → lire design-direction-advisor.md → proposer 3 directions textuelles → l'utilisateur choisit → orienter → livrer.

Modèle D — Raffinement itératif : Utilisateur : "Rends la palette de couleurs de ce deck plus chaude" → Agent : localiser l'artefact précédent → éditer sur place → relancer verify:lite → signaler ce qui a changé.

Règle : ne posez jamais plus d'1 question par tour. Utilisez les valeurs par défaut pour tout le reste. Si l'utilisateur n'a pas spécifié de style, choisissez-en un et nommez-le dans le livrable — ils pourront itérer.

Récupération d'Erreur

Échec	Récupération
Aucun modèle ne correspond à la demande	Utiliser T-hero-landing comme échafaudage générique, noter l'écart dans le livrable
verify:lite signale des espaces réservés	Corriger les espaces réservés, re-vérifier, signaler la correction
verify:lite signale des fuites d'étiquettes IFQ	Supprimer les étiquettes de taxonomie interne (Signal Spark, Rust Ledger, etc.) du texte destiné à l'utilisateur
La commande d'export échoue	Signaler l'erreur exacte, suggérer npm run install:export si des dépendances manquent, ne jamais prétendre que l'export existe
L'utilisateur dit "ça ressemble à de l'IA"	Lire anti-ai-slop.md, appliquer la liste de contrôle en 7 points de la pré-vérification, réécrire avec plus de variation de rythme
L'agent ne peut pas vérifier les faits (pas d'accès web)	Nommer les affirmations non vérifiées comme "non vérifiées" dans le livrable, ne pas inventer de spécifications
Le rendu du modèle échoue ou semble cassé	Revenir à un modèle plus simple (T-hero-landing), signaler la raison de la dégradation
La demande est en dehors du périmètre de la compétence	Énoncer honnêtement la limite, suggérer des alternatives (par exemple "cela est mieux adapté à un framework React")

Contrat de Sécurité

• Les instructions racines restent limitées à la livraison visuelle HTML. Ne demandez pas de secrets non liés, de configuration hôte, d'agents persistants ou de services en arrière-plan.
• Les scripts sont locaux d'abord : pas d'évaluation dynamique, pas d'appels réseau au moment de l'exécution, pas d'installations cachées et pas d'écriture en dehors de l'espace de travail de l'utilisateur.
• Les variables d'environnement requises sont intentionnellement vides. Les outils d'export optionnels sont documentés et invoqués uniquement après l'intention de l'utilisateur.
• Les métadonnées OpenClaw/ClawHub vivent dans le champ metadata JSON monoligne afin que les analyseurs puissent filtrer sur metadata.openclaw.requires.bins et metadata.openclaw.requires.env.

Vérification Avant Livraison

1. Lancer npm run verify:lite -- <file.html> pour les fuites d'espaces réservés et d'étiquettes IFQ.
2. Lancer npm run preview -- <file.html> et inspecter la sortie du navigateur.
3. Pour les prototypes d'applications, cliquer sur au moins un chemin principal, un changement d'onglet/écran et une action de détail/annotation.
4. Pour les decks, vérifier le nombre de diapositives et les exigences de format avant l'export PDF/PPTX.
5. Pour les exports d'animation, vérifier le timing, la politique audio et la présence du fichier final.
6. Après les modifications du dépôt, lancer npm run validate et npm run verify:publish.

Carte des Références

Besoin	Charger
Démarrage rapide pour la première fois, 3 exemples en une ligne	references/quickstart.md
Chips de découverte UI et invocation par défaut	agents/openai.yaml
Rôle complet, périmètre, posture d'exécution IFQ	references/ifq-ambient-runtime.md
Vérifications des faits, actifs de marque, images produit/UI	references/fact-and-asset-protocol.md
Cadence designer junior, variations, espaces réservés, anti-slop	references/designer-operating-principles.md, references/anti-ai-slop.md
Requête vague -> 3 directions de design	references/design-direction-advisor.md, references/design-styles.md, references/ifq-native-recipes.md
Flux de travail de tâche de bout en bout, exceptions, exports	references/delivery-workflow.md, references/workflow.md, references/verification.md
Protocole d'interaction agent, arbre de décision, machine d'état	references/agent-interaction-protocol.md
Amélioration de la compétence, couverture d'évaluation, règles de contribution	references/killer-skill-playbook.md, evals/evals.json, CONTRIBUTING.md, SECURITY.md
Posture de publication OpenClaw / ClawHub / skills.sh	references/marketplace-quality.md, references/skill-leaderboard-lessons.md, references/smoke-test.md
Cartographie d'installation d'exécution et d'outils	references/agent-compatibility.md
Règles de fichier unique React/Babel	references/react-setup.md
Diapositives et PPTX modifiable	references/slide-decks.md, references/editable-pptx.md
Animation/vidéo/audio	references/animation-pitfalls.md, references/animation-best-practices.md, references/audio-design-rules.md, references/sfx-library.md
Actifs d'identité IFQ	references/ifq-brand-spec.md, assets/ifq-brand/BRAND-DNA.md

Règle d'Achèvement

Livrez le plus petit artefact vérifié qui satisfait la demande. Signalez le fichier de sortie, les commandes de vérification exécutées et toutes les réserves. Ne prétendez pas à un export, des captures d'écran ou une sécurité de marketplace sauf si la vérification correspondante a effectivement réussi.