Communitygithub.com

Rylaispirit/rylai-codex-hermes-skills

Extraire un système de design fonctionnel à partir de captures d'écran ou de maquettes et produire des spécifications UI prêtes à l'implémentation en utilisant la vision et le contexte du dépôt.

Qu'est-ce que rylai-codex-hermes-skills ?

Cette compétence permet à un agent IA de designer UI d'analyser des captures d'écran ou maquettes pour en extraire un système de design cohérent et prêt à l'implémentation. Elle est compatible avec plusieurs plateformes d'agents (Codex, Hermes, Claude Code, Claude.ai et Cowork) et inclut des templates pour la documentation, la génération d'aperçu et le transfert d'implémentation. L'agent inspecte l'image originale, identifie la grille de mise en page, la rythmique d'espacement, la typographie, les rôles de couleur, les rayons, les bordures, les ombres, le style des icônes et les états des composants. Il sépare les propriétés observées des comportements inférés, compare le système extrait avec le framework et les tokens existants du dépôt cible, et produit une spécification concise couvrant les composants, le comportement responsive, les assets et les états d'interaction. L'implémentation n'est effectuée que sur demande, avec une vérification ultérieure sur desktop et mobile.

Compatible avec✓Claude Code✓Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Rylaispirit/rylai-codex-hermes-skills/tree/HEAD/skills/ui-designer
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

Rylai Codex-Hermes-Claude Édition | Workflow portable original par Rylai

Compatibilité d'exécution

  • Codex : installer sous ~/.agents/skills/ui-designer.
  • Hermes : installer sous ~/.hermes/skills/ui-designer ou exposer le bundle via skills.external_dirs.
  • Claude Code : installer sous ~/.claude/skills/ui-designer ou <projet>/.claude/skills/ui-designer.
  • Claude.ai et Cowork : téléverser et activer le ZIP correspondant à chaque compétence.
  • Résoudre les fichiers groupés relativement à ce répertoire de compétence ; ne pas dépendre de chemins d'une autre machine.
  • Vérifier les outils, les paquets, les identifiants, l'accès réseau et les capacités d'exécution avant l'exécution.

Designer UI Portable

Extraire un système de design prêt à l'implémentation à partir de captures d'écran ou maquettes fournies.

Workflow

  1. Inspecter l'image originale à une résolution suffisante.
  2. Identifier la grille de mise en page, la rythmique d'espacement, la typographie, les rôles de couleur, les rayons, les bordures, les ombres, le style des icônes et les états des composants.
  3. Séparer les propriétés observées des comportements inférés.
  4. Comparer le système extrait avec le framework existant du dépôt cible et ses tokens de design.
  5. Produire une spécification d'implémentation concise couvrant les composants, le comportement responsive, les assets et les états d'interaction.
  6. N'implémenter que sur demande, puis vérifier le résultat par rapport à la référence aux tailles desktop et mobile.

Templates inclus

  • assets/design-system.md : extraction du système visuel basée sur des preuves.
  • assets/app-overview-generator.md : aperçu concis du produit et du workflow.
  • assets/vibe-design-template.md : prompt de transfert d'implémentation.

Limites

  • Ne pas inventer d'écrans, d'états, de polices ou d'actifs cachés sans les étiqueter comme des hypothèses.
  • Privilégier les bibliothèques de composants et d'icônes installées dans le dépôt.
  • Conserver le texte et les contrôles dans des limites responsives stables.

Individual skills in this repo

This repo contains 12 individual skills — each has its own dedicated page.

Rylaispirit/rylai-codex-hermes-skills

Plan, build, render, and verify academic presentation decks with citations, accessible visuals, clear argument flow, speaker-ready pacing, and visual QA.

Rylaispirit/rylai-codex-hermes-skills

Create publication-quality chart images from supplied data using an available plotting library, with explicit scales, labels, and visual QA.

Rylaispirit/rylai-codex-hermes-skills

Plan, draft, and review persuasive copy for landing pages, product pages, ads, email, headlines, offers, calls to action, positioning, and message variants.

Rylaispirit/rylai-codex-hermes-skills

Plan, draft, revise, and audit creative or long-form writing with a portable core workflow that does not depend on missing legacy templates.

Rylaispirit/rylai-codex-hermes-skills

Create, inspect, edit, and verify Word DOCX files with python-docx, including Markdown conversion, text replacement, metadata inspection, and optional PDF render.

Rylaispirit/rylai-codex-hermes-skills

Create or optimize marketing images, social graphics, product mockups, banners, cover art, listing visuals, brand assets, image prompts, WebP files, and OG images.

Rylaispirit/rylai-codex-hermes-skills

Create, inspect, extract, merge, split, rotate, and render PDF files with local open-source tools, including structural and visual verification.

Rylaispirit/rylai-codex-hermes-skills

Create, inspect, extract, edit, render, and verify PowerPoint presentations with python-pptx and optional LibreOffice.

Rylaispirit/rylai-codex-hermes-skills

Create editable PowerPoint decks from a local JSON specification using Rylai's visual system, python-pptx, deterministic slide types, and optional rendering.

Rylaispirit/rylai-codex-hermes-skills

Perform an evidence-led SEO audit using accessible pages, source code, crawl data, and current search documentation without assuming missing plugins.

Rylaispirit/rylai-codex-hermes-skills

Plan and produce video with available AI tools or programmatic frameworks. Use for video prompts, avatars, explainers, demos, templates, pipelines, and generation.

Rylaispirit/rylai-codex-hermes-skills

Create, inspect, edit, and verify Excel XLSX workbooks with openpyxl, including CSV import, formulas, styling, error checks, and optional LibreOffice rendering.

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