skills.rest
dirnbauer
dirnbauerCOMMUNITY
Explore all skills by this author →
Website𝕏@KDirnbauerGitHub

frontend-design

Design frontend interfaces with typography, color palettes, motion, and CSS/HTML examples.

33|6|Updated Jan 2, 2026
Search Tags:#typography#design#ui#frontend#aesthetics#motion#color-palette
One-click install
npx skills add https://github.com/dirnbauer/webconsulting-skills --skill frontend-design-dirnbauer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/dirnbauer/webconsulting-skills/tree/main/skills/frontend-design
Command: npx skills add https://github.com/dirnbauer/webconsulting-skills --skill frontend-design-dirnbauer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured approach and practical patterns to replace generic AI-generated UI with distinctive, production-grade frontend interfaces. It guides design thinking, typography, color systems, motion, and layout to create memorable interfaces that align with brand identity.

Core Features & Use Cases

  • Typography & type scale: Distinctive display/body pairings and scalable typographic system for consistent UI.
  • Color & theme systems: Cohesive palettes with dominant accents and accessible contrast.
  • Motion & spatial design: Orchestrated transitions, micro-interactions, and asymmetric layouts for visual impact.
  • Component recipes: Reusable patterns like Hero, Feature Card, Pricing Card, and Testimonials to accelerate development.
  • Use Case: When building dashboards or marketing sites that require a strong visual identity.

Quick Start

Choose a branding direction and implement a small UI module following the guidelines. Start by establishing a CSS root with the color tokens and typography, then build a Hero section and a Feature/Card set as shown in the examples. Adapt the design to your brand.

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 AI-generated UI when building frontend interfaces?▼

To avoid generic AI-generated UI, use a structured design-system workflow enforcing distinctive typography pairings, cohesive color palettes, and orchestrated motion rules. This approach replaces standard layouts with production-grade frontend interfaces that feature bold visuals and strong brand identity.

What is the best way to establish a cohesive color palette and typography scale for a web dashboard?▼

The best way to establish a cohesive color palette and typography scale is defining CSS root tokens for dominant accents with accessible contrast, paired with distinctive display and body fonts. This scalable typographic system ensures consistent UI across dashboard components.

How do I build a production-grade Hero section and Feature Cards using CSS and HTML?▼

Build a production-grade Hero section and Feature Cards by establishing a CSS root with color tokens and typography, then applying reusable component recipes. Adapt these ready-to-use CSS and HTML patterns to match your specific brand identity and spatial composition rules.

Can I use these frontend design guidelines for marketing sites that require strong visual identity?▼

Yes, you can use these frontend design guidelines for marketing sites requiring strong visual identity. The workflow applies to UI components, pages, dashboards, and marketing sites where bold visuals, asymmetric layouts, and memorable interfaces align with brand identity.

Do I need a specific framework to implement these motion rules and spatial composition patterns?▼

No specific framework is required to implement motion rules and spatial composition patterns. The guidelines provide ready-to-use CSS and HTML examples for orchestrated transitions and micro-interactions, allowing adaptation to your existing frontend environment without dependencies.

Related Skills

Explore More Design & Creative Skills→
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
AtlasRoXAtlasRoX

Landing Page Skill

Generate a marketing landing page structure with Next.js and Tailwind CSS components.

Community
Intermediate
BenjaminGBenjaminG
3

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or framework-specific code.

Community
Advanced
tuantiensiutuantiensiu
1

frontend-aesthetics

Guide UI design teams in applying predefined aesthetic directions, typography, and color to landing pages, dashboards, and forms.

Community
Intermediate