skills.rest
silentbalanceyh
silentbalanceyhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill frontend-design-silentbalanceyh
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
nuitsjpnuitsjp
1

frontend-design

Generate distinctive frontend interfaces with creative code and UI design.

Community
Advanced
quranquran
1.9k

frontend-design

Translate bold aesthetics into production-grade HTML/CSS/JS or React UI components.

Official
Advanced
pkoka888pkoka888
1

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or modern frameworks.

Community
Advanced
dasheck0dasheck0
8

frontend-design

Design frontend interfaces with cohesive aesthetics across HTML/CSS/JS, React, or Vue.

Community
Advanced