skills.rest
sbsbhong
sbsbhongCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide UI design with intentional aesthetics, typography pairing, and structured process.

Updated Jun 20, 2026
Search Tags:#typography#visual design#user experience#ui design#aesthetic direction#design process
One-click install
npx skills add https://github.com/sbsbhong/diving-app --skill frontend-design-sbsbhong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/sbsbhong/diving-app/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/sbsbhong/diving-app --skill frontend-design-sbsbhong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating distinctive and intentional visual design for UIs, offering guidance on aesthetic direction, typography, and avoiding templated defaults.

Core Features & Use Cases

  • Aesthetic Direction: Provides a framework for making deliberate design choices that align with the subject and audience.
  • Typography: Offers advice on pairing typefaces and creating a memorable type treatment.
  • Structure: Encourages thoughtful use of structure and information encoding in design.
  • Motion: Guides on leveraging motion to enhance user experience without overcomplicating the design.
  • Content: Emphasizes the importance of written content and its role in design.
  • Process: Outlines a structured approach to design, including brainstorming, planning, and critique.
  • Restraint: Advocates for restraint and self-critique to ensure the design is memorable and effective.
  • Use Case: For a new e-commerce platform, use this Skill to create a unique and engaging user interface that stands out in the market.

Quick Start

Apply the frontend-design skill to create a distinctive UI for your project by focusing on intentional aesthetic choices and typography.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create distinctive UI design and avoid generic templates?▼

Distinctive UI design requires deliberate aesthetic direction and typography pairing to avoid generic templates, focusing on intentional choices across structure, motion, and content to enhance user experience.

What is the best way to pair typefaces for a memorable user interface?▼

Pairing typefaces for a memorable user interface involves creating intentional type treatments that align with your aesthetic direction, ensuring the visual design deliberately matches the subject and audience.

Can I use a structured design process to improve visual design for an e-commerce platform?▼

Yes, you can use a structured design process to improve visual design for an e-commerce platform by applying brainstorming, planning, and critique phases to create a unique and engaging user interface.

Does adding motion to UI design enhance user experience?▼

Adding motion to UI design enhances user experience when leveraged intentionally, guiding users through the interface without overcomplicating the visual design or distracting from the written content.

Why does my UI design look generic and lack aesthetic direction?▼

Your UI design looks generic and lacks aesthetic direction because it relies on templated defaults rather than making deliberate design choices, requiring a structured process of restraint and self-critique.

Related Skills

Explore More Design & Creative Skills→
ydnikolaevydnikolaev
8

idea-interview

Extract project information through structured stakeholder interviews into a discovery brief.

Community
Advanced
vh2224vh2224
1

frontend-design

Create production-grade frontend interfaces with cohesive typography, color, spacing, and motion.

Community
Advanced
qqrusqqrus

ux-designer

Provide UX design guidelines for user research, wireframing, prototyping, and information architecture.

Community
Advanced
ProtagonistssProtagonistss

ui-design-core

Generate production-grade frontend UI designs with specified style directions and anti-pattern guardrails.

Community
Advanced