human-ui-design

Translate vague UI requests into concrete interface design guidance and assets.

16|Updated Apr 30, 2026
One-click install
npx skills add https://github.com/JCE-Joshhh77/JCE-Opencode-Tools --skill human-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: human-ui-design
Source: https://github.com/JCE-Joshhh77/JCE-Opencode-Tools/tree/main/config/skills/human-ui-design
Command: npx skills add https://github.com/JCE-Joshhh77/JCE-Opencode-Tools --skill human-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps product teams translate vague UI goals into consistent, production-ready interfaces, ensuring design-system coherence and user-centric outcomes.

Core Features & Use Cases

  • Inventory and assess existing UI components, tokens, and patterns in the target project, including accessibility and responsive behavior.
  • Direction and visual thesis: produce a clear design direction with density, navigation, hierarchy, tone, and a signature motif.
  • Human UI Review and risk assessment: compute Generic AI Risk, provide a decision-ready checklist, and validate against real user needs and constraints.

Quick Start

Generate a product-aligned UI concept brief for a landing page and dashboard.

Frequently Asked Questions about human-ui-design

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

FAQPage Schema
How do I translate vague UI requests into production-ready interface designs?▼

To translate vague UI requests into production-ready interface designs, this Skill generates concrete guidance, assets, and a formal Human UI Review by mapping design directions, density, and hierarchy to satisfy real user needs and backend states.

What is a Human UI Review and how does it assess design risk?▼

A Human UI Review is a validation process that computes a Generic AI Risk assessment, provides a decision-ready checklist, and validates interface designs against real user constraints to ensure user-centric outcomes and brand alignment.

How do I ensure design-system coherence across landing pages and dashboards?▼

To ensure design-system coherence across landing pages and dashboards, you can inventory existing UI components, tokens, and patterns, then apply a visual thesis covering density, navigation, hierarchy, tone, and a signature motif.

Can I assess accessibility and responsive behavior for existing UI components?▼

Yes, you can assess accessibility and responsive behavior by running an inventory pass on your target project's existing UI components, tokens, and patterns to evaluate usability and design-system coherence in varied contexts.

Does UI design guidance work for both web app forms and full dashboards?▼

UI design guidance works for web app forms, dashboards, and landing pages by producing a clear design direction and product-aligned concept brief that ensures brand alignment and usability across varied application contexts.

What's the best way to establish a visual direction for a frontend design system?▼

The best way to establish a visual direction for a frontend design system is to define a visual thesis that dictates density, navigation, hierarchy, tone, and a signature motif, ensuring consistent, production-ready interfaces.