Communitygithub.com

Rylaispirit/rylai-codex-hermes-skills

Extrae un sistema de diseño práctico a partir de capturas de pantalla o maquetas y genera especificaciones de interfaz listas para implementar, utilizando visión y contexto del repositorio.

¿Qué es rylai-codex-hermes-skills?

Esta habilidad permite a un agente de IA (como Claude Code, Codex, Hermes o Claude.ai) analizar imágenes de interfaces de usuario (capturas, maquetas) utilizando visión por computadora y el contexto del repositorio de código del proyecto. Su propósito es extraer un sistema de diseño completo y coherente: define la cuadrícula de diseño, ritmo espacial, tipografía, colores, radios, bordes, sombras, estilo de iconos y estados de componentes. A continuación, la habilidad compara lo extraído con los tokens de diseño y el framework existentes en el repositorio, identificando qué es nuevo o diferente. El resultado es una especificación de implementación concisa que cubre componentes, comportamiento responsivo, assets e interacciones, lista para que el desarrollador o el agente la implemente. La habilidad incluye plantillas en formato Markdown para guiar la extracción y generación de documentos, y respeta límites claros: no inventa recursos sin etiquetarlos como suposiciones y prefiere las bibliotecas de componentes e iconos ya instaladas en el repositorio.

Compatible con✓Claude Code✓Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Rylaispirit/rylai-codex-hermes-skills/tree/HEAD/skills/ui-designer
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Rylai Codex-Hermes-Claude Edition | Flujo de trabajo portátil original por Rylai

Compatibilidad en Tiempo de Ejecución

  • Codex: instalar bajo ~/.agents/skills/ui-designer.
  • Hermes: instalar bajo ~/.hermes/skills/ui-designer o exponer el bundle a través de skills.external_dirs.
  • Claude Code: instalar bajo ~/.claude/skills/ui-designer o <project>/.claude/skills/ui-designer.
  • Claude.ai y Cowork: subir y habilitar el ZIP correspondiente por habilidad.
  • Resolver los archivos empaquetados relativos a este directorio de habilidades; no depender de rutas de otra máquina.
  • Verificar herramientas, paquetes, credenciales, acceso a la red y capacidades del runtime antes de la ejecución.

Diseñador de Interfaz Portátil

Extrae un sistema de diseño listo para implementar a partir de capturas de pantalla o maquetas proporcionadas.

Flujo de Trabajo

  1. Inspeccionar la imagen original a una resolución suficiente.
  2. Identificar la cuadrícula de diseño, ritmo espacial, tipografía, roles de color, radios, bordes, sombras, estilo de iconos y estados de componentes.
  3. Separar las propiedades observadas del comportamiento inferido.
  4. Comparar el sistema extraído con el framework y los tokens de diseño existentes del repositorio de destino.
  5. Producir una especificación de implementación concisa que cubra componentes, comportamiento responsivo, assets y estados de interacción.
  6. Implementar solo cuando se solicite; luego verificar el resultado contra la referencia en tamaños de escritorio y móvil.

Plantillas Incluidas

  • assets/design-system.md: extracción del sistema visual basada en evidencia.
  • assets/app-overview-generator.md: resumen conciso del producto y flujo de trabajo.
  • assets/vibe-design-template.md: indicaciones para la entrega de implementación.

Límites

  • No inventar pantallas ocultas, estados, fuentes o assets sin etiquetarlos como suposiciones.
  • Preferir las bibliotecas de componentes e iconos instaladas en el repositorio.
  • Mantener el texto y los controles dentro de límites responsivos estables.

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 relacionados

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