frontend-design

Design and implement frontend interfaces with typography, color, spacing, and motion.

Updated Apr 30, 2026

Search Tags:#accessibility #frontend #responsive design #visual identity #ui design #web components

Ready to run

npx skills add https://github.com/Guibibi/budgetpulse --skill frontend-design-guibibi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Guibibi/budgetpulse/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Guibibi/budgetpulse --skill frontend-design-guibibi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create polished, distinctive frontend interfaces that look intentional instead of generic. It is designed for situations where visual quality, product feel, and production readiness matter just as much as functionality.

Core Features & Use Cases

Distinctive UI Direction: Choose a bold aesthetic and carry it through typography, color, spacing, and motion.
Production-Grade Frontend Buildout: Create working web pages, components, and app surfaces with accessibility and responsiveness in mind.
Design Quality Guardrails: Avoid common AI-looking patterns by using strong hierarchy, cohesive palettes, intentional motion, and refined interaction states.
Use Case: A product team wants a landing page, dashboard, or marketing surface that feels premium and memorable rather than templated.

Quick Start

Create a production-grade frontend interface with a bold visual direction for my web app.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build a frontend UI that doesn't look like a generic AI template?▼

Creating a production-grade frontend interface requires careful handling of typography, color palettes, spacing, motion, accessibility, and interaction states to achieve a memorable, intentional visual identity.

How do I design responsive web components with strong accessibility?▼

You can create working web pages and app surfaces by applying production-grade visual direction, ensuring careful handling of responsiveness and accessibility alongside aesthetic typography and spacing.

Can I use this to create a visual identity for a marketing surface or dashboard?▼

This approach applies to web pages, components, marketing surfaces, dashboards, and application UIs that need strong aesthetic direction and functional execution for a premium feel.

What's the best way to establish typography and color systems for frontend design?▼

Establish typography and color systems by applying design quality guardrails that use strong hierarchy and cohesive palettes, avoiding generic patterns to achieve an intentional, memorable interface.

Does this frontend design approach work for both web pages and application UIs?▼

It applies to web pages, components, marketing surfaces, dashboards, and application UIs that need strong aesthetic direction and functional execution, ensuring situations requiring visual quality are met.

Why does my generated frontend interface feel templated and lack visual quality?▼

Generic interfaces lack distinctive UI direction; applying careful handling of typography, spacing, and motion ensures a production-grade visual identity that feels premium rather than templated.