skills.rest
mattwyskiel
mattwyskielCOMMUNITY
Explore all skills by this author →
Website𝕏@MattWyskielGitHub

frontend-design

Guide UI design with principles for typography, structure, and motion.

1|Updated Apr 14, 2025
Search Tags:#typography#visual design#UI design#aesthetic direction#intentional design
One-click install
npx skills add https://github.com/mattwyskiel/dotfiles --skill frontend-design-mattwyskiel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mattwyskiel/dotfiles/tree/main/agents/.agents/skills/frontend-design
Command: npx skills add https://github.com/mattwyskiel/dotfiles --skill frontend-design-mattwyskiel

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides guidance for creating unique and intentional visual designs for new UIs or redesigns, focusing on aesthetic direction, typography, and avoiding templated defaults.

Core Features & Use Cases

  • Intentional Design: Offers principles for making deliberate choices in palette, typography, and layout.
  • Subject grounding: Encourages design based on the subject matter and its context.
  • Design Principles: Outlines guidelines for hero elements, typography, structure, motion, and complexity.
  • Process: Suggests a brainstorming, exploring, planning, critiquing, building, and critiquing again process.
  • Restraint and Self-Critique: Emphasizes the importance of a single memorable element and minimal decoration.

Quick Start

Run the skill to start designing a new UI, focusing on intentional design choices.

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 instead of using templated defaults?▼

Intentional UI design requires making deliberate choices in aesthetic direction, typography, and layout to avoid templated defaults. You can achieve this by grounding the design in subject matter and focusing on a single memorable hero element.

What is the recommended process for aesthetic direction and visual design?▼

The recommended process for aesthetic direction involves brainstorming, exploring, planning, critiquing, building, and critiquing again. This iterative cycle ensures visual design choices remain purposeful and grounded.

How do I choose typography and structure for a new UI?▼

Choosing typography and structure requires applying intentional design principles that prioritize restraint and minimal decoration. You should select a single memorable hero element and apply self-critique to avoid default templated structures.

Can I use these UI design principles for redesigning existing interfaces?▼

Yes, these UI design principles apply to both new UIs and redesigns. They guide you in making deliberate visual choices for typography and motion to ensure the updated interface features unique aesthetic direction.

When should I avoid intentional design choices in visual design?▼

You should avoid excessive intentional design choices when they lead to unnecessary complexity, as this approach emphasizes restraint and minimal decoration. Limiting motion and structural elements ensures the UI remains purposeful rather than overdecorated.

Related Skills

Explore More Design & Creative Skills→
luanzebaluanzeba

teach-impeccable

Gather project design context and generate a CLAUDE.md Design Context document.

Community
Intermediate
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
raghavpillairaghavpillai
1

frontend-design

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

Community
Advanced