frontend-design

Designs distinctive frontend interfaces with typography, color systems, and accessibility for React, Vue, or HTML/CSS workflows.

Updated Jan 2, 2026
One-click install
npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill frontend-design-higashi-kota
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Higashi-Kota/llm-mermaid-chat/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill frontend-design-higashi-kota

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams deliver visually distinctive, production-grade frontend interfaces without resorting to generic AI aesthetics.

Core Features & Use Cases

  • Distinctive UI systems: Typography, color systems, motion, and layout.
  • Component and page design: Build reusable, cohesive UI blocks for dashboards, landing pages, and apps.
  • Use Case: Imagine designing a marketing site with a bold hero and accessible components that scale from mobile to desktop.

Quick Start

Use this skill to design a production-grade frontend Card component with distinctive typography and accessible colors.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build React components with distinctive UI typography instead of generic AI aesthetics?

Build distinctive React components by applying custom typography scales, color systems, and motion patterns to define a cohesive aesthetic direction. This approach ensures production-grade interfaces avoid generic AI aesthetics while maintaining accessible, reusable component architecture across mobile and desktop.

What is the best way to create a responsive and accessible color system for frontend design?

Creating a responsive and accessible color system involves defining cohesive palette rules that scale across mobile and desktop layouts while meeting accessibility standards. This establishes a reusable design system for visually distinctive frontend interfaces without resorting to generic outputs.

Can I use this frontend design approach with Vue or vanilla HTML/CSS workflows?

Yes, this frontend design approach works across React, Vue, and vanilla HTML/CSS workflows. It applies cohesive aesthetic directions, typography, and motion patterns to build reusable UI blocks for dashboards, landing pages, or full applications in any of these environments.

How do I design production-grade frontend interfaces that scale from mobile to desktop?

Design production-grade frontend interfaces by establishing responsive behavior and reusable design systems early. Build cohesive UI blocks with distinctive typography and accessible colors to ensure components scale seamlessly from mobile to desktop layouts across your application.

Does this approach support building reusable design systems for dashboards and landing pages?

Yes, this approach supports building reusable design systems for dashboards and landing pages by defining cohesive typography, color systems, and motion. It delivers production-grade UI blocks that maintain aesthetic direction and accessibility standards across various page types.