frontend-philosophy

Guide intentional typography, color, motion, spatial composition, and atmosphere in UI design.

Updated Nov 3, 2019
One-click install
npx skills add https://github.com/gil0mendes/dotfiles --skill frontend-philosophy-gil0mendes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-philosophy
Source: https://github.com/gil0mendes/dotfiles/tree/main/configs/opencode/skill/frontend-philosophy
Command: npx skills add https://github.com/gil0mendes/dotfiles --skill frontend-philosophy-gil0mendes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating visually unique and impactful user interfaces, moving beyond generic or algorithmically-generated aesthetics to achieve distinctive, memorable designs.

Core Features & Use Cases

  • Design Direction: Provides a framework for making intentional Visual & Aesthetic decisions across styling, layout, colors, typography, and animations.
  • Pillar-Based Approach: Guides design through five core principles: Typography with Character, Committed Color & Theme, Purposeful Motion, Brave Spatial Composition, and Atmosphere & Depth.
  • Use Case: A frontend developer can use this Skill to ensure their UI designs are bold, characterful, and emotionally resonant, avoiding common "AI slop" by adhering to specific, intentional design choices.

Quick Start

Apply the frontend-philosophy skill to ensure the design choices for the new dashboard adhere to the five pillars of intentional UI.

Frequently Asked Questions about frontend-philosophy

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

FAQPage Schema
How do I make my UI design stand out from generic AI-generated interfaces?

To make your UI design stand out from generic AI-generated interfaces, apply a design philosophy focusing on intentional choices in typography, color, motion, spatial composition, and atmosphere. This approach ensures distinctive and memorable user interfaces.

What are the core principles for creating memorable user interfaces?

The core principles for creating memorable user interfaces involve five pillars: characterful typography, committed color and theme, purposeful motion, brave spatial composition, and layered atmosphere with depth. These guide visual and aesthetic decisions.

How do I apply intentional design choices to a new frontend dashboard?

To apply intentional design choices to a new frontend dashboard, use a pillar-based approach that guides your styling, layout, colors, typography, and animations. This ensures the dashboard is bold, characterful, and emotionally resonant.

Can I use this design philosophy to improve my existing typography and color theory?

Yes, you can use this design philosophy to improve existing typography and color theory by enforcing intentional choices. It specifically guides characterful typography and bold color palettes to achieve emotional impact and avoid generic aesthetics.

Why does my frontend visual design lack emotional impact and feel generic?

Your frontend visual design may lack emotional impact and feel generic if it lacks intentional aesthetic decisions. Without a committed design philosophy for color, motion, and spatial layout, interfaces often default to algorithmically-generated aesthetics.

What is the best way to avoid common 'AI slop' in visual design?

The best way to avoid common 'AI slop' in visual design is to adopt a framework of intentional choices. Adhering to specific principles for typography, color, motion, and spatial composition prevents generic, algorithmically-generated aesthetics.