Communitygithub.com

webiscorp/designskill-open

Injectez ce fichier dans un IA pour générer une page d’atterrissage unique dans le cadre d’un contrat de structure.

Qu'est-ce que designskill-open ?

Cette compétence AI génère une page d’atterrissage unique à partir d’un contrat de structure prédéfini. Elle utilise exclusivement les classes Tailwind CDN, sans CSS ou JS personnalisé, et respecte strictement tout contrat de projet existant (noms de classes, disposition des fichiers). Les entrées incluent le nom de la marque, le secteur d’activité, la palette de couleurs, l’ordre des sections et les contraintes. Le processus comprend la vérification du contrat structurel, la génération de l’échafaudage des sections avec annotations, le remplissage du contenu réel (pas de lorem ipsum) adapté au secteur, et une vérification de contraste WCAG AA avec un espacement de section de 80–120 pixels. La sortie est validée sur les breakpoints 360/768/1440 et doit afficher zéro erreur console.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/webiscorp/designskill-open/tree/HEAD/skills/landing-generate
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence de génération de page d'atterrissage

Injectez ce fichier dans un IA pour générer une page d’atterrissage unique dans le cadre d’un contrat de structure.

Rôle et champ d'application

  • Génération de page d'atterrissage unique (pas de pages multiples)
  • Utilisation exclusive des classes Tailwind CDN — aucun CSS·JS personnalisé
  • Si un contrat de structure de projet (noms de classes, disposition des fichiers) existe, il prime toujours

Contrat d'entrée

  • brand: nom de la marque · description en une ligne
  • industry: secteur d'activité (détermine le ton)
  • palette: couleur principale + secondaire (hex)
  • sections: tableau de l'ordre des sections
  • constraints: éléments interdits (par défaut : custom-css, js)

Procédure d'exécution

  1. Vérifier le contrat de structure — s'il existe, suivre sa nomenclature et sa disposition
  2. Générer l'échafaudage des sections — avec commentaires d'ordre et de rôle
  3. Remplir le contenu — phrases réelles adaptées au ton du secteur (lorem interdit)
  4. Vérifier le contraste et l'espacement — WCAG AA, rythme des sections 80–120 px

Éléments interdits

  • Injection simultanée avec une compétence de redesign (conflit de rôle)
  • Génération de faux contenu (prix, statistiques sans fondement)

Critères de validation

  • Rendu correct aux points de rupture 360/768/1440, contraste AA, zéro erreur console

Généré et servi par DesignSkill

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community