Communitygithub.com

Rylaispirit/rylai-codex-hermes-skills

Extrahiere aus Screenshots oder Mockups ein praktisches Designsystem und erstelle implementierungsfertige UI-Spezifikationen unter Verwendung von Bildanalyse und Repository-Kontext.

Was ist rylai-codex-hermes-skills?

Dieses Skill ermöglicht es KI-Agenten (Codex, Hermes, Claude Code, Claude.ai), aus Screenshots oder Mockups ein vollständiges, implementierungsfertiges Designsystem zu extrahieren. Es analysiert Layout, Abstände, Typografie, Farben, Radien, Schatten, Ikonenstile und Komponentenzustände. Das Skill vergleicht die Ergebnisse mit vorhandenen Frameworks und Designtokens im Ziel-Repository und erstellt eine präzise Spezifikation für Komponenten, responsives Verhalten, Assets und Interaktionszustände. Die Implementierung erfolgt nur auf Anfrage, gefolgt von einer Überprüfung auf Desktop- und Mobilgrößen. Es enthält drei gebündelte Vorlagen (design-system.md, app-overview-generator.md, vibe-design-template.md) und folgt strengen Grenzen: Es erfindet keine versteckten Screens, Zustände oder Assets und bevorzugt die installierten Bibliotheken des Repositories.

Funktioniert mit✓Claude Code✓Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Rylaispirit/rylai-codex-hermes-skills/tree/HEAD/skills/ui-designer
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Rylai Codex-Hermes-Claude Edition | Original portabler Workflow von Rylai

Laufzeitkompatibilität

  • Codex: Installation unter ~/.agents/skills/ui-designer.
  • Hermes: Installation unter ~/.hermes/skills/ui-designer oder Einbindung des Bundles über skills.external_dirs.
  • Claude Code: Installation unter ~/.claude/skills/ui-designer oder <projekt>/.claude/skills/ui-designer.
  • Claude.ai und Cowork: Hochladen und Aktivieren des entsprechenden ZIP-Pakets pro Skill.
  • Bundledateien relativ zu diesem Skill-Verzeichnis auflösen; nicht von Pfaden anderer Rechner abhängig machen.
  • Tools, Pakete, Anmeldedaten, Netzwerkzugriff und Laufzeitfähigkeiten vor der Ausführung prüfen.

Portabler UI-Designer

Extrahiere aus gelieferten Screenshots oder Mockups ein implementierungsfertiges Designsystem.

Workflow

  1. Das Originalbild in ausreichender Auflösung untersuchen.
  2. Layout-Raster, Rhythmus der Abstände, Typografie, Farbrollen, Radien, Rahmen, Schatten, Ikonenstil und Komponentenzustände identifizieren.
  3. Beobachtete Eigenschaften von abgeleitetem Verhalten trennen.
  4. Das extrahierte System mit dem vorhandenen Framework und den Designtokens des Ziel-Repositorys vergleichen.
  5. Eine präzise Implementierungsspezifikation für Komponenten, responsives Verhalten, Assets und Interaktionszustände erstellen.
  6. Nur auf Anforderung implementieren und das Ergebnis anhand der Referenz bei Desktop- und Mobilgrößen überprüfen.

Gebündelte Vorlagen

  • assets/design-system.md: evidenzbasierte Extraktion des visuellen Systems.
  • assets/app-overview-generator.md: präzise Produkt- und Workflow-Zusammenfassung.
  • assets/vibe-design-template.md: Prompt zur Übergabe an die Implementierung.

Grenzen

  • Keine versteckten Screens, Zustände, Schriftarten oder Assets erfinden, ohne sie als Annahmen zu kennzeichnen.
  • Die installierten Komponenten- und Iconbibliotheken des Repositorys bevorzugen.
  • Text und Bedienelemente innerhalb stabiler, responsiver Grenzen halten.

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.

Verwandte Skills

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