skills.rest
leolionart
leolionartCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-ui

Select design families and exemplars to govern frontend UI work.

1|Updated Mar 7, 2026
Search Tags:#consistency#frontend#guidance#ui-design#design-systems#exemplar#design-ui
One-click install
npx skills add https://github.com/leolionart/claude-skills --skill design-ui-leolionart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-ui
Source: https://github.com/leolionart/claude-skills/tree/main/plugins/design-ui/skills/design-ui
Command: npx skills add https://github.com/leolionart/claude-skills --skill design-ui-leolionart

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Canonical guidance for frontend UI design across multiple families and exemplars to reduce decision fatigue and ensure consistent visual grammar.

Core Features & Use Cases

  • Provides path-to-implementation by mapping briefs to a design family and exemplar pack.
  • Supports tasks such as creating new UI, reviewing style fidelity, and restyling directions with a unified design language.
  • Enables rapid prototyping decisions by routing through design references and taxonomy.

Quick Start

Ask Claude to generate a canonical frontend UI strategy for a brief by selecting a design family and an exemplar pack.

Frequently Asked Questions about design-ui

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

FAQPage Schema
How do I ensure consistency across frontend UI design tasks?▼

Frontend UI design consistency is achieved by applying a canonical strategy that selects design families and exemplars to govern visual grammar across all interface creation and restyling tasks.

What is a design family and exemplar pack for frontend UI?▼

A design family and exemplar pack is a structured taxonomy of twenty design references across six categories that maps project briefs to a unified visual language for rapid prototyping.

How do I review style fidelity in an existing frontend interface?▼

Reviewing style fidelity involves routing the existing interface through canonical design references and exemplars to evaluate its adherence to a selected design family's visual grammar.

Can I use this canonical UI strategy for restyling existing frontend directions?▼

Yes, the canonical UI strategy supports restyling directions by remapping existing interfaces to a newly selected design family and exemplar pack to enforce a unified design language.

Does the design-ui approach require specific frontend framework dependencies?▼

No, the design-ui approach operates framework-agnostic with zero dependencies, using frontmatter-driven metadata and exemplar routing to produce structured UI design strategy outputs.

What's the best way to reduce decision fatigue when creating new frontend interfaces?▼

Reducing decision fatigue requires mapping new interface briefs to a canonical design family and exemplar pack, which constrains visual grammar choices and provides a direct path to implementation.

Related Skills

Explore More Design & Creative Skills→
krzemienskikrzemienski
2

forced-reading-protocol

Enforce sequential line-by-line reading and line-count verification for large documents.

Community
Advanced
rahul-s-bhattrahul-s-bhatt

ui-ux-pro-max

Apply structured UX and visual design principles to web and mobile interfaces.

Community
Advanced
cedric-champeixcedric-champeix
1

spoonfeeder-brand-design

Enforce Spoonfeeder's visual design system across Compose Multiplatform UI code.

Community
Advanced
MeechYourGoalsMeechYourGoals
2

chravel-ui-consistency

Audit Chravel's user interface for visual consistency and design system adherence.

Community
Intermediate