How do I install the UI Designer skill?

Run npx skillmds@latest add rylaispirit/ui-designer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI Designer safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Designer?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Designer free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Designer?

Rylaispirit (@rylaispirit) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Designer by rylaispirit — Agent Skill

Name: UI Designer
Author: Rylaispirit

File contents

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

Inspect the original image at sufficient resolution.
Identify layout grid, spacing rhythm, typography, color roles, radii, borders, shadows, icon style, and component states.
Separate observed properties from inferred behavior.
Compare the extracted system with the target repository's existing framework and design tokens.
Produce a concise implementation specification covering components, responsive behavior, assets, and interaction states.
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.

---name: ui-designerdescription: Extract a practical design system from screenshots or mockups and produce implementation-ready UI specifications using vision and repository context.---> 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 DesignerExtract an implementation-ready design system from supplied screenshots or mockups.## Workflow1. 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.

Frequently asked questions

UI Designer