frontend-design

Design frontend interfaces with cohesive typography, color, spacing, and responsive patterns.

1|Updated Mar 12, 2026
One-click install
npx skills add https://github.com/mahou-labs/shiru --skill frontend-design-mahou-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mahou-labs/shiru/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/mahou-labs/shiru --skill frontend-design-mahou-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create visually distinctive, production-grade frontend interfaces with polished, developer-friendly code that avoids generic AI aesthetics and bland UI.

Core Features & Use Cases

  • Design-direction and systematized UI language for web components, pages, posters, and applications.
  • Generates cohesive typography, color, spacing, motion, and responsive patterns that align with brand goals.
  • Use cases include building marketing dashboards, product landing pages, or editorial UI with a strong visual identity.

Quick Start

Provide a brief design brief (target audience, use cases, and brand personality) and ask the AI to generate a complete frontend design language and ready-to-implement components.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate a frontend design system that avoids generic AI aesthetics?

Generate a distinctive frontend design system by providing a brief with target audience and brand personality. This produces cohesive typography, color, spacing, and motion tokens that avoid generic AI aesthetics and yield production-ready components.

Can I build accessible marketing dashboards and editorial UI with a generated design language?

Yes, you can build accessible marketing dashboards and editorial UI. The generated design language prioritizes accessibility and performance, applying cohesive typography and responsive behavior across product, marketing, and editorial contexts.

What is the best way to create production-grade web components with polished code?

The best way to create production-grade web components is to define a systematized UI language first. Applying design direction ensures components have polished, developer-friendly code with cohesive spacing, motion, and responsive patterns.

Do I need a design brief to generate cohesive typography and color tokens?

Yes, you need a design brief. Providing target audience, use cases, and brand personality allows the system to generate a complete frontend design language, including cohesive typography, color, and spacing tokens.

Why does my generated frontend UI lack a strong visual identity?

Generated frontend UI lacks a strong visual identity when design direction is missing. Establishing a systematized UI language with specific brand goals ensures cohesive typography, color, and motion patterns instead of bland UI.

Are there limitations when applying generated motion and spacing patterns to full pages?

Limitations when applying generated motion and spacing patterns to full pages are minimal if the design system tokens are followed. Maintaining cohesive responsive behavior across full pages requires strict adherence to the generated design language.