skills.rest
Guibibi
GuibibiCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Guibibi/budgetpulse --skill frontend-design-guibibi
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
SheshiyerSheshiyer
4

visual-asset-prompt-generator

Transform brand documentation into structured prompts for image and 3D generation.

Community
Advanced
TencentCloudBaseTencentCloudBase
72

web-development

Structure and deploy web frontend projects with CloudBase Web SDK integration.

Official
Intermediate
nicholasgriffintnnicholasgriffintn
2

performance-optimisation

Identify and fix performance bottlenecks across frontend, backend, and database layers.

Community
Basic
gsy-666gsy-666

frontend-design

Design and implement custom frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Community
Advanced