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.