skills.rest
luisartola
luisartolaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design production-grade frontend interfaces with typography, color systems, spacing, and accessibility.

Updated Feb 22, 2026
Search Tags:#typography#design#ui#frontend#color#design-system
One-click install
npx skills add https://github.com/luisartola/findes --skill frontend-design-luisartola
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/luisartola/findes/tree/main/.github/skills/frontend-design
Command: npx skills add https://github.com/luisartola/findes --skill frontend-design-luisartola

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates distinctive, production-grade frontend interfaces with high design quality, helping teams move beyond generic AI aesthetics.

Core Features & Use Cases

  • Supports building web components, pages, artifacts, posters, and applications with a bold, polished aesthetic.
  • Provides guidelines for typography, color systems, spacing, and accessibility to ensure cohesive design outputs.
  • Suitable for design-driven projects where unique brand voice and visual identity are critical.

Quick Start

Provide a production-ready frontend component that matches the requested design brief.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create frontend interfaces that avoid generic AI aesthetics?▼

To create frontend interfaces that avoid generic AI aesthetics, use design guidelines that enforce production-grade typography, cohesive color systems, and structured spacing to produce distinctive, polished web components and pages.

What is a design system approach for building production-grade web components?▼

A design system approach for production-grade web components applies structured rules for typography, color, spacing, and accessibility to ensure visual cohesion and high code quality across all frontend interfaces.

Can I use this to design posters and web pages with a bold aesthetic?▼

Yes, you can design posters, web pages, and artifacts with a bold aesthetic. The guidelines apply to any frontend interface requiring a distinctive, polished visual identity and production-ready code.

How do I ensure my frontend design meets accessibility considerations?▼

To ensure frontend design meets accessibility considerations, apply built-in guidelines for color contrast, spacing, and typography that support cohesive design outputs suitable for inclusive design systems.

Does this provide a color system and typography guidelines for UI design?▼

Yes, this provides a color system and typography guidelines for UI design. It enforces specific rules for spacing and visual identity to help build distinctive, design-driven frontend applications.

Related Skills

Explore More Design & Creative Skills→
tomasbassotomasbasso

frontend-design

Translates design briefs into production-grade frontend interfaces and components.

Community
Advanced
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
HaydernCenterpointHaydernCenterpoint

frontend-design

Align frontend UI components to a cohesive design system.

Community
Intermediate
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic