Communitygithub.com

Rylaispirit/rylai-codex-hermes-skills

从截图或模型中提取实用的设计系统，并利用视觉和仓库上下文生成可直接实施的 UI 规范。

rylai-codex-hermes-skills 是什么？

该技能（Portable UI Designer）旨在帮助开发者从截图或设计模型中提取完整的设计系统，并生成可直接用于实现的 UI 规范。它会通过高分辨率图像分析布局网格、间距节奏、排版、颜色角色、圆角、边框、阴影、图标样式及组件状态，并将观察到的属性与推断行为分开。技能支持 Codex、Hermes、Claude Code 等多种 AI 编程平台，安装路径可按提示配置。其核心工作流包括：检查图像、解析设计系统、对比目标仓库的现有框架与 Design Tokens、生成简洁的实现规范，并按需求实施后验证桌面与移动端适配效果。捆绑的模板（如 design-system.md、app-overview-generator.md）加速了视觉系统提取与交接过程，同时要求不虚构隐藏元素，并优先使用仓库已有的组件与图标库。

兼容平台✓Claude Code✓Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Rylaispirit/rylai-codex-hermes-skills/tree/HEAD/skills/ui-designer
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

Rylai Codex-Hermes-Claude 版本 | 原始便携工作流由 Rylai 创建

运行时兼容性

  • Codex：安装在 ~/.agents/skills/ui-designer 目录下。
  • Hermes：安装在 ~/.hermes/skills/ui-designer 目录下，或通过 skills.external_dirs 暴露该捆绑包。
  • Claude Code：安装在 ~/.claude/skills/ui-designer 或 <project>/.claude/skills/ui-designer 目录下。
  • Claude.ai 和 Cowork：上传并启用对应的按技能 ZIP 压缩包。
  • 相对于此技能目录解析捆绑文件；不要依赖于来自另一台机器的路径。
  • 在执行前检查工具、包、凭据、网络访问和运行时能力。

便携式 UI 设计师

从提供的截图或模型中提取可直接实现的设计系统。

工作流

  1. 以足够的分辨率检查原始图像。
  2. 识别布局网格、间距节奏、排版、颜色角色、圆角、边框、阴影、图标样式和组件状态。
  3. 将观察到的属性与推断的行为分开。
  4. 将提取的系统与目标仓库的现有框架和设计令牌进行比较。
  5. 生成简洁的实现规范，涵盖组件、响应式行为、资源和交互状态。
  6. 仅在请求时实施，然后针对桌面和移动尺寸的参考验证结果。

捆绑的模板

  • assets/design-system.md：基于证据的视觉系统提取。
  • assets/app-overview-generator.md：简洁的产品和工作流简介。
  • assets/vibe-design-template.md：实施交接提示。

边界

  • 不要虚构隐藏的屏幕、状态、字体或资源，除非将其标记为假设。
  • 优先使用仓库已安装的组件和图标库。
  • 保持文本和控件在稳定的响应式边界内。

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.

相关技能

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