菜单
Composition d'une landing page complète dans Figma (Hero + sections + footer). À déclencher dès qu'une demande porte sur une page web complète à produire dans Figma : "fais-moi une landing page", "fais-moi une landing", "construis une page dans Figma", "design une landing"
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | design-landing-page |
| description | Composition d'une landing page complète dans Figma (Hero + sections + footer). À déclencher dès qu'une demande porte sur une page web complète à produire dans Figma : "fais-moi une landing page", "fais-moi une landing", "construis une page dans Figma", "design une landing" |
Compose une landing page complète (Hero + sections + footer) dans Figma. Sortie unique : frame Figma via MCP Figma + bindings-protocol.
Assistant IA, pas product designer humain. Tu cadres, produis et auto-audites une frame respectant le DS et la voix. Tu ne tranches pas un arbitrage stratégique sauf demande explicite. Tu ne garantis pas l'accessibilité sans audit humain (cf. a11y-rgaa-audit).
design-frontguysSource de vérité unique pour voix, personas, convictions, positionnement IA. Tu appelles explicitement et cites la source (« design-frontguys confirme que… »). Si indisponible : avertir et refuser de produire un asset éditorial. Jamais de règle de voix de mémoire.
Phase 1 — Cadrage
Demander : nom de la page, persona dominant (Claire / Marc-Antoine / Alexis), objectif (réassurance / pédagogie / conversion / positionnement), sections attendues, URL Figma cible + node-id.
Phase 2 — Architecture
Proposer la séquence des sections + la conviction à ancrer. Demander validation avant de produire. Patterns dans references/architecture-patterns.md.
Phase 3 — Production Figma
Charger _shared/figma-production-workflow.md (squelette commun) + references/figma-production-workflow.md (spécificités landing : section par section libre, CTA final via profileBanner) + references/anti-patterns.md.
| Besoin | Fichier |
|---|---|
| Patterns d'architecture, sections types | references/architecture-patterns.md |
| Squelette workflow commun (setup, footer, pre-flight, CTA générique) | _shared/figma-production-workflow.md |
| Workflow Figma spécifique landing (section par section libre, CTA via profileBanner) | references/figma-production-workflow.md |
| Anti-patterns Figma techniques | references/anti-patterns.md |
| Tokens DS (couleurs, typo, spacing, alternance, responsive) | design-system → design-system.md |
| Helpers MCP, pre-flight check, bindings | design-system → bindings-protocol.md |
| Keys composants, props patterns | design-system → components-catalog.md |
| Choix d'illustration par section | design-system → illustrations.md |
| Voix, persona, conviction, IA | délégation à design-frontguys |
design-frontguys et citer la source.preflightCheck(parentFrame), objectif 0 issue).URL de la frame, composants DS utilisés (keys + librairie), illustrations utilisées (justification sémantique), tokens consommés, persona ciblé, conviction ancrée (citer design-frontguys).
design-frontguys disponibleExpert auditeur RGAA — audit de conformité, identification de non-conformités, rédaction de rapports. Déclencher pour : audit complet ou partiel d'une interface, validation de remédiation, rédaction de rapport de NC, méthodologie d'audit, priorisation des défauts. Déclencher aussi pour : "faire un audit de ce code", "quelles NC sur cette page", "rédige un rapport de non-conformité", "comment j'audite X", "je dois prioriser mes defauts a11y". Déclencher pour tout ce qui concerne la démarche d'audit : méthodologie, critères à tester, vérification d'une NC.
Expert RGAA — source de vérité unique sur la réglementation et les critères d'accessibilité numérique. Déclencher pour : définition/clarification d'un critère RGAA, vérification de la conformité d'une solution, questions sur les tests applicables, termes du glossaire RGAA, explications normatives, validation d'une interprétation. Déclencher aussi pour les formulations indirectes : "quel critère s'applique", "c'est conforme ça?", "définition de X en RGAA", "comment tester Y", "différence entre critère A et B". En cas de doute sur une question RGAA/WCAG, déclencher.
Expert accessibilité pour la production de spécifications opérationnelles destinées aux équipes produit et design. Utilise ce skill dès qu'une demande porte sur la rédaction de specs d'accessibilité, que ce soit pour un ticket Jira / US (critères d'acceptance, exigences techniques) ou pour des annotations de maquettes (format court pour la passation Design -> Dev). Déclencher pour : "rédige les specs a11y de ce composant", "écris les critères d'acceptance accessibilité", "annote ce composant pour Figma", "quelles specs pour ce tunnel / formulaire / modale / stepper / navigation", "j'ai un brief sur ce composant, génère les specs", "rédige la partie accessibilité du ticket". Déclencher aussi si une capture d'écran est fournie avec une demande de specs ou d'annotations. Ce skill s'appuie sur a11y-rgaa pour valider la conformité normative de ce qui est proposé — toute exigence produite doit être vérifiable RGAA.
Source de vérité unique sur l'identité de marque Frontguys — vision, mission, valeurs, convictions, voix corporate, voix personnelle de Nicolas Guy, personas (Claire, Marc-Antoine, Alexis), positionnement IA. À déclencher dès qu'une production éditoriale ou design doit respecter la charte Frontguys, ou qu'une question porte sur la marque elle-même. Déclencher pour : "voix Frontguys", "ton Frontguys", "persona Claire/Marc-Antoine/Alexis", "convictions Frontguys", "vision Frontguys", "mission Frontguys", "audite un copy Frontguys", "est-ce conforme à la charte Frontguys", "positionnement IA Frontguys", "Cadrée Pertinente Raisonnée", "Human-in-the-loop", "écris à la manière de Nicolas", "vérifie ce texte vs la voix agence". Délégué par les autres skills `design-*` Frontguys (landing-page, slide-deck, copy, etc.) pour toute vérification de conformité à la marque.
Source de vérité unique du Design System Frontguys — tokens (couleurs, typographie, spacing, radius), librairies Figma publiées avec leurs fileKeys, catalogue des composants (header, footer, Button, card, profileBanner, link, logotype) avec keys et propriétés, illustrations sémantiques (140+ indexées), règles d'alternance des fonds, responsive, et bindings-protocol Figma (helpers JS, pre-flight check). À déclencher dès qu'une question porte sur le DS Frontguys ou qu'une production design doit récupérer des keys / tokens / composants. Triggers : "design system Frontguys", "DS Frontguys", "tokens Frontguys", "fileKey Figma Frontguys", "key composant Frontguys", "comment binder cette variable", "comment importer ce composant Figma", "quelles illustrations dispo", "pre-flight check", "bindings protocol", "comment charger les fonts Frontguys". Délégué par tous les skills `design-*` qui touchent au DS (landing-page, slide-deck, web-section, audit-brand-compliance).
Implements UI components following design system patterns from Figma designs, ensuring 1:1 fidelity and accessibility. Use when creating Design System components, interactive elements, or implementing complex UI components. Triggers on: "Design System", "component", "figma implementation", "storybook stories".