Communitygithub.com

Rylaispirit/rylai-codex-hermes-skills

Extract a practical design system from screenshots or mockups and produce implementation-ready UI specifications using vision and repository context.

Was ist rylai-codex-hermes-skills?

rylai-codex-hermes-skills is a Claude Code agent skill that extract a practical design system from screenshots or mockups and produce implementation-ready UI specifications using vision and repository context.

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 portable workflow by Rylai

Runtime Compatibility

  • Codex: install under ~/.agents/skills/ui-designer.
  • Hermes: install under ~/.hermes/skills/ui-designer or expose the bundle through skills.external_dirs.
  • Claude Code: install under ~/.claude/skills/ui-designer or <project>/.claude/skills/ui-designer.
  • Claude.ai and Cowork: upload and enable the matching per-skill ZIP.
  • Resolve bundled files relative to this skill directory; do not depend on paths from another machine.
  • Check tools, packages, credentials, network access, and runtime capabilities before execution.

Portable UI Designer

Extract an implementation-ready design system from supplied screenshots or mockups.

Workflow

  1. Inspect the original image at sufficient resolution.
  2. Identify layout grid, spacing rhythm, typography, color roles, radii, borders, shadows, icon style, and component states.
  3. Separate observed properties from inferred behavior.
  4. Compare the extracted system with the target repository's existing framework and design tokens.
  5. Produce a concise implementation specification covering components, responsive behavior, assets, and interaction states.
  6. Implement only when requested, then verify the result against the reference at desktop and mobile sizes.

Bundled Templates

  • assets/design-system.md: evidence-based visual-system extraction.
  • assets/app-overview-generator.md: concise product and workflow brief.
  • assets/vibe-design-template.md: implementation handoff prompt.

Boundaries

  • Do not invent hidden screens, states, fonts, or assets without labeling them as assumptions.
  • Prefer the repository's installed component and icon libraries.
  • Keep text and controls within stable responsive bounds.

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