skills.rest
jhparktime
jhparktimeCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Convert abstract UI concepts into implementable design specifications.

1|2|Updated Jan 25, 2026
Search Tags:#design#ui#components#design-system#information-architecture#visual-hierarchy#screen-design
One-click install
npx skills add https://github.com/jhparktime/OnGuard --skill ui-designer-jhparktime
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/jhparktime/OnGuard/tree/main/.claude/skills/ui-designer.md
Command: npx skills add https://github.com/jhparktime/OnGuard --skill ui-designer-jhparktime

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to translate high-level UI concepts into concrete, implementation-ready specs that engineers can act on. This skill provides a structured approach to capture information architecture, interaction patterns, and visual tone, enabling crisp handoffs.

Core Features & Use Cases

  • Screen design guidance: define screen goals, layout, and interaction flows for consistent user experiences across platforms.
  • Component design & design system alignment: specify reusable components, states, tokens, and accessibility considerations.
  • Information architecture and handoff: translate user goals into IA structures and provide artifact-ready deliverables for engineers.

Quick Start

Provide a screen design concept and component specs for the requested UI task.

Frequently Asked Questions about ui-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn abstract UI concepts into implementable design specifications?▼

To turn UI concepts into implementable design specifications, provide a screen design concept and component specs. The process delivers structured artifacts including screen purpose, information architecture, component proposals, and tokens for engineering handoff.

What is the best way to structure information architecture for a design handoff?▼

Structuring information architecture for a design handoff involves translating user goals into clear IA structures. This approach captures interaction patterns and visual tone, providing artifact-ready deliverables that engineers can directly act on.

Can I use this to define states and tokens for a reusable component design system?▼

Yes, you can define reusable components, states, and tokens for a component design system. It aligns visual hierarchy and specifies accessibility considerations to ensure consistent user experiences across different platforms.

Does this approach work for screen design across different product teams?▼

Yes, this approach works for screen design across product teams. It defines screen goals, layout, and interaction flows, enabling crisp handoffs and consistent user experiences regardless of the target platform.

What do I need to provide to get handoff-ready deliverables for my UI?▼

To get handoff-ready deliverables for your UI, you need to provide a screen design concept and component specs for the requested task. It then outputs edge-state specifications and structured design tokens.

Related Skills

Explore More Design & Creative Skills→
u1pnsu1pns
8

product-designer

Translate product requirements into UX design specifications with component libraries.

Community
Advanced
muzhicaomingwangmuzhicaomingwang
3

ui

Translate UX concepts into wireframe-level UI specifications with design tokens and accessibility checklists.

Community
Intermediate
SL-A-SHSL-A-SH

distill

Analyze frontend designs and recommend simplification across layout, interaction, and code.

Community
Intermediate
soo-kate-yeonsoo-kate-yeon

moai-design-tools

Fetch Figma design specs and export Pencil designs as React and Tailwind CSS code.

Community
Advanced