Communitygithub.com

Rylaispirit/rylai-codex-hermes-skills

Extraia um sistema de design prático a partir de capturas de tela ou mockups e produza especificações de UI prontas para implementação usando visão e contexto do repositório.

O que é rylai-codex-hermes-skills?

Esta skill permite que agentes de IA como Codex, Hermes e Claude Code extraiam um sistema de design completo e pronto para implementação a partir de imagens de referência (screenshots ou mockups). Ela analisa visualmente grids de layout, ritmo de espaçamento, tipografia, cores, cantos arredondados, bordas, sombras, estilo de ícones e estados de componentes, separando propriedades observadas de comportamentos inferidos. A skill então compara o sistema extraído com o framework e os tokens de design existentes no repositório alvo, gerando uma especificação de implementação concisa que cobre componentes, comportamento responsivo, assets e estados de interação. O usuário pode solicitar a implementação real, e a skill verificará o resultado comparando com a referência nos tamanhos desktop e mobile. Suporta múltiplas plataformas (Codex, Hermes, Claude Code, Claude.ai e Cowork) e inclui templates pré-definidos para extração de sistemas visuais, geração de resumos de produto e prompts de handoff de implementação.

Funciona com✓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→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Rylai Codex-Hermes-Claude Edition | Fluxo de trabalho portátil original por Rylai

Compatibilidade de Runtime

  • Codex: instale em ~/.agents/skills/ui-designer.
  • Hermes: instale em ~/.hermes/skills/ui-designer ou exponha o bundle através de skills.external_dirs.
  • Claude Code: instale em ~/.claude/skills/ui-designer ou <project>/.claude/skills/ui-designer.
  • Claude.ai e Cowork: faça upload e habilite o ZIP correspondente por skill.
  • Resolva os arquivos do bundle relativamente a este diretório de skill; não dependa de caminhos de outra máquina.
  • Verifique ferramentas, pacotes, credenciais, acesso à rede e capacidades de runtime antes da execução.

UI Designer Portátil

Extraia um sistema de design pronto para implementação a partir de capturas de tela ou mockups fornecidos.

Fluxo de Trabalho

  1. Inspecione a imagem original em resolução suficiente.
  2. Identifique grid de layout, ritmo de espaçamento, tipografia, papéis de cor, raios, bordas, sombras, estilo de ícones e estados de componentes.
  3. Separe propriedades observadas de comportamento inferido.
  4. Compare o sistema extraído com o framework existente e os tokens de design do repositório alvo.
  5. Produza uma especificação de implementação concisa cobrindo componentes, comportamento responsivo, assets e estados de interação.
  6. Implemente apenas quando solicitado, depois verifique o resultado comparando com a referência nos tamanhos desktop e mobile.

Templates Inclusos

  • assets/design-system.md: extração do sistema visual baseada em evidências.
  • assets/app-overview-generator.md: resumo conciso do produto e fluxo de trabalho.
  • assets/vibe-design-template.md: prompt de handoff de implementação.

Limites

  • Não invente telas, estados, fontes ou assets ocultos sem rotulá-los como suposições.
  • Prefira as bibliotecas de componentes e ícones instaladas no repositório.
  • Mantenha texto e controles dentro de limites responsivos estáveis.

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.

Habilidades Relacionadas

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