frontend-design

Convert vague UI ideas into a distinctive frontend design language.

Updated Aug 23, 2026

Search Tags:#typography #accessibility #ui-ux #aesthetics #design-systems #frontend-design

Ready to run

npx skills add https://github.com/MeoBaka/MeoPanel-Client --skill frontend-design-meobaka

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/MeoBaka/MeoPanel-Client/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/MeoBaka/MeoPanel-Client --skill frontend-design-meobaka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solves the problem of converting vague UI ideas into a distinctive, production-grade frontend design language.

Core Features & Use Cases

Design direction manifesto and DFII scoring framework to guide implementation
Toolkit for creating cohesive design systems, typography, color, motion, and accessibility standards
Use Case: When building a brand-aligned admin dashboard, apply the design system to ensure a unique visual identity and consistent interactions.

Quick Start

Propose a production-ready frontend design concept that demonstrates an intentional aesthetic, cohesive system, and distinctive UI.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I convert vague UI ideas into a distinctive frontend design system?▼

To convert vague UI ideas into a distinctive frontend design system, establish a defined aesthetic direction and apply DFII scoring to guide implementation. This generates formal typography, color rules, and accessibility standards suitable for code.

What is DFII scoring in frontend design and how does it work?▼

DFII scoring is a framework used in frontend design to guide implementation and evaluate design direction. It works by scoring aesthetic and functional choices, ensuring a cohesive design system yields a unique visual identity rather than generic templates.

How do I create a brand-aligned admin dashboard with a unique visual identity?▼

Create a brand-aligned admin dashboard by applying a cohesive design system that includes typography, color, and motion standards. This ensures consistent interactions and a distinctive UI aesthetic across web apps rather than generic templates.

Does this approach support accessibility considerations for component libraries?▼

Yes, this approach supports accessibility considerations for component libraries by formalizing typography and color rules. It integrates these standards into the formal output structure, ensuring production-grade frontend design meets accessibility requirements.

When do I need a formal design direction manifesto for UI/UX projects?▼

You need a formal design direction manifesto for UI/UX projects when aiming for a unique aesthetic across web apps, dashboards, and marketing sites. It provides the foundational rules and DFII scoring required to build production-grade frontend design.

What is the best way to structure frontend design output for documentation?▼

The best way to structure frontend design output for documentation is using a formal output structure suitable for code. This ensures typography, color, and accessibility rules are systematically translated from the design system into development.