skills.rest
simonheimlicher
simonheimlicherCOMMUNITY
Explore all skills by this author →
Website𝕏@simonheimlicherGitHub

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
One-click install
npx skills add https://github.com/simonheimlicher/spx-claude --skill designing-frontend-simonheimlicher
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
paopp2paopp2

frontend-design

Build production-grade frontend interfaces with bold aesthetics from user context.

Community
Basic
zebbernzebbern
5

frontend-design

Generate production-grade frontend interfaces with HTML/CSS/JS or modern frameworks.

Community
Advanced
vcnttttvcntttt
1

frontend-design

Generate frontend interfaces from design requirements across frameworks.

Community
Advanced
OpenDCAIOpenDCAI
114

frontend-design

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

Official
Advanced