skills.rest
ssmleo
ssmleoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide UI design decisions for palette, typography, and layout structure.

Updated Jul 4, 2026
Search Tags:#typography#layout#visual design#ui design#aesthetic direction
One-click install
npx skills add https://github.com/ssmleo/govfolio --skill frontend-design-ssmleo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ssmleo/govfolio/tree/main/agents/skills/imported/frontend-design%409d2f1ae18723
Command: npx skills add https://github.com/ssmleo/govfolio --skill frontend-design-ssmleo

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of achieving distinctive visual design in UIs, providing guidance for aesthetic direction, typography, and avoiding templated defaults.

Core Features & Use Cases

  • Visual Direction: Offers best practices for palette and typography choices.
  • Typography: Suggests pairing typefaces and setting scales.
  • Structure: Encourages meaningful and intentional use of space and elements.
  • Motion: Guides the deliberate use of animation for enhancement.
  • Content: Emphasizes the importance of clear, intentional writing.
  • Use Case: For a project requiring a unique aesthetic, use this Skill to inform design decisions around a specific subject, creating a memorable and tailored UI.

Quick Start

Use the frontend-design skill to define the visual direction for your UI, focusing on an engaging palette 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 avoid generic UI design and create a distinctive visual aesthetic?▼

To avoid generic UI design, establish an intentional visual aesthetic by making deliberate choices for color palettes, typography pairings, and layout structure rather than relying on templated component defaults.

What are the best practices for choosing typography and typeface pairings in UI design?▼

Typography best practices involve intentionally pairing typefaces and setting a structured type scale to create a clear visual hierarchy, ensuring text content remains readable and supports the overall aesthetic direction.

How do I set up a visual direction for a UI project requiring a unique aesthetic?▼

Setting up a visual direction requires defining an engaging color palette and typography framework tailored to your project's specific subject, ensuring all layout space, motion, and content choices align intentionally.

Why does my UI layout look templated and lack meaningful structure?▼

A UI layout looks templated when space and elements are placed without intention; creating meaningful structure requires deliberate design choices that use negative space and element placement to guide user focus.

Can I use this UI aesthetic framework for both web and mobile interface design?▼

Yes, the UI aesthetic framework provides general guidelines for visual direction, typography, and layout structure that can be applied to inform design decisions across both web and mobile interface projects.

When should I use deliberate animation and motion in visual design?▼

Deliberate animation should be used in visual design strictly for enhancement, guiding user attention and providing contextual feedback only when it intentionally supports the UI's aesthetic direction rather than acting as decoration.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
firstsun-devfirstsun-dev

frontend-design

Translate design direction into responsive frontend interfaces with HTML/CSS/JS or framework components.

Official
Intermediate
Owl-ListenerOwl-Listener
234

ui-composition

Generate layout, typography, and color plans aligned with WCAG accessibility criteria.

Community
Intermediate
Maccio-huangMaccio-huang

html-ppt-zhangzara-coral

Create HTML presentations with coral-themed templates and customizable content.

Community
Intermediate