frontend-design

Design frontend interfaces with typography, color, motion, and layout guidelines.

2|1|Updated Nov 20, 2025

Search Tags:#design #ui #frontend #components #guidelines #aesthetics

Ready to run

npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill frontend-design-silentbalanceyh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/.trae/skills/frontend-design
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill frontend-design-silentbalanceyh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to design consistently; this skill provides a structured approach to craft polished UI with a strong aesthetic direction.

Core Features & Use Cases

Design Thinking: Establish purpose, tone, constraints, and differentiation to guide every UI decision.
Guided Aesthetics: Provide typography, color, motion, and composition guidelines to achieve a cohesive, memorable UI.
Use Case: When tasked with building a web app's UI, apply these guidelines to deliver components, pages, and dashboards with a unique visual language.

Quick Start

Design a bold, cohesive frontend direction by outlining purpose, tone, and asset needs in the initial design brief.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I design frontend interfaces with a cohesive visual language?▼

Design cohesive frontend interfaces by establishing purpose, tone, and constraints first, then applying structured guidelines for typography, color, motion, and layout to deliver polished UI assets.

What's the best way to build web components that look distinctive and production-grade?▼

Build distinctive, production-grade web components by defining a strong aesthetic direction in the initial design brief, then following guided composition and motion guidelines for a memorable UI.

How do I create a consistent design process for web app dashboards?▼

Create a consistent design process for web app dashboards by outlining design thinking steps that cover differentiation and tone, ensuring every UI decision follows a cohesive visual system.

Do I need typography and color guidelines to build a polished UI?▼

Typography and color guidelines are needed to build a polished UI because they provide the guided aesthetics required to achieve a cohesive, memorable visual language across pages and components.

Can I apply this frontend design approach to both web pages and full apps?▼

You can apply this frontend design approach to web pages, apps, and dashboards because it establishes a structured design process that scales a strong aesthetic direction across all UI assets.

Why does my frontend UI look inconsistent across different components?▼

Frontend UI looks inconsistent across components when there is no structured design thinking process to guide typography, color, motion, and composition decisions toward a single aesthetic direction.