designing-frontend

Design responsive web components with cohesive typography, color, and motion systems.

1|Updated Jan 6, 2026

Search Tags:#typography #design #accessibility #frontend #UI/UX #color theory #motion-design

Ready to run

npx skills add https://github.com/simonheimlicher/spx-claude --skill designing-frontend-simonheimlicher

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: designing-frontend
Source: https://github.com/simonheimlicher/spx-claude/tree/main/plugins/frontend/skills/designing-frontend
Command: npx skills add https://github.com/simonheimlicher/spx-claude --skill designing-frontend-simonheimlicher

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the challenge of delivering memorable frontend interfaces that avoid generic AI slop, by guiding designers toward a unique aesthetic direction and cohesive implementation guidance.

Core Features & Use Cases

Distinctive aesthetics: Define a bold visual direction (e.g., brutalist, editorial, luxury) and implement typography, color, motion, and spatial composition that feels singular.
Production-grade implementation: Provide actionable guidelines for building web components, pages, or dashboards that are responsive, accessible, and refined.
Use Case: Design a dashboard for a fintech product with a strong typographic system, a cohesive color palette, and motion cues that enhance readability and hierarchy.

Quick Start

Start by clarifying the project's purpose and audience, choose a bold aesthetic direction, define typography and color systems, and prototype responsive components with accessible HTML/CSS.

Frequently Asked Questions about designing-frontend

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

FAQPage Schema

How do I design a distinctive frontend UI that avoids generic AI styling?▼

To design a distinctive frontend UI, start by defining a bold aesthetic direction like brutalist or editorial, then implement singular typography, color, and motion systems. This ensures cohesive, production-grade interfaces that avoid generic AI styling.

How do I build accessible dashboards with a cohesive typography and color system?▼

Build accessible dashboards by defining a strong typographic system and cohesive color palette, then prototype responsive components using accessible HTML and CSS. This creates refined interfaces with motion cues that enhance readability and visual hierarchy.

What's the best way to establish a cohesive color palette and motion design for web components?▼

The best way to establish color and motion design is to choose a bold aesthetic direction first, then define spatial composition and motion guidelines that enhance readability. This yields singular, production-grade web components with a cohesive aesthetic.

Can I prototype responsive frontend layouts with accessible HTML and CSS using this approach?▼

Yes, you can prototype responsive frontend layouts by applying accessible HTML and CSS guidelines. This approach ensures web components and pages meet functional requirements while maintaining a clearly defined aesthetic concept and accessibility considerations.

Does this frontend design approach work for fintech dashboards requiring strong typographic hierarchy?▼

Yes, this frontend design approach works for fintech dashboards by applying a strong typographic system and cohesive color palette. It provides motion cues that enhance readability and establishes a clear visual hierarchy across responsive layouts.