skills.rest
tomasbasso
tomasbassoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

Updated Apr 25, 2026
Search Tags:#typography#design#ui#frontend#components#aesthetics
One-click install
npx skills add https://github.com/tomasbasso/SistemaStockV2 --skill frontend-design-tomasbasso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tomasbasso/SistemaStockV2/tree/main/.agents/skills/diseno-frontend-y-componentes
Command: npx skills add https://github.com/tomasbasso/SistemaStockV2 --skill frontend-design-tomasbasso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. It emphasizes implementing real working code with meticulous attention to aesthetic details and creative choices.

Core Features & Use Cases

  • The user provides frontend requirements: a component, page, application, or interface to build; the skill commits to a bold aesthetic direction and delivers production-grade implementation.
  • Before coding, understand the context and commit to a BOLD aesthetic direction, covering purpose, tone, constraints, and differentiation.
  • Implement working code (HTML/CSS/JS, React, Vue, etc.) that is production-grade, visually striking, cohesive with a clear aesthetic point of view, and meticulously refined.
  • Follow Frontend Aesthetics Guidelines focusing on typography, color & theme, motion, spatial composition, and visual details; avoid generic AI aesthetics.

Quick Start

Provide a clear frontend brief (component, page, or dashboard) and let the system generate a production-grade implementation in your preferred framework.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade frontend interfaces that avoid generic AI aesthetics?▼

To build production-grade frontend interfaces, you must commit to a bold aesthetic direction covering typography, motion, and spatial composition before coding. This approach ensures a cohesive visual language and delivers meticulously refined components.

Can I generate React components with strong typography and responsive layouts from a design brief?▼

Yes, you can generate React components with strong typography and responsive layouts by providing a clear frontend brief. The implementation translates requirements into visually striking, production-ready working code tailored to your preferred framework.

What is the best way to create a distinctive UI for dashboards and landing pages?▼

The best way to create a distinctive UI for dashboards and landing pages is applying frontend aesthetics guidelines that emphasize color, theme, and visual details. This prevents generic design and guarantees a cohesive, visually striking interface.

Does this frontend design approach support accessibility and design tokens?▼

Yes, the frontend design approach satisfies requirements for accessibility, performance, and design tokens. It ensures that the resulting component libraries and interfaces maintain a cohesive visual language while meeting production standards.

Why does my generated component library lack a cohesive visual language?▼

Your generated component library may lack a cohesive visual language if it does not follow established frontend aesthetics guidelines. Defining a bold aesthetic direction with specific typography and color constraints before implementation resolves this issue.

How do I translate frontend requirements into a working UI with bold motion and color choices?▼

To translate frontend requirements into a working UI, first commit to a bold aesthetic direction covering tone and constraints. Then implement production-grade code that meticulously applies specific motion and color choices across the components.

Related Skills

Explore More Design & Creative Skills→
Shana-AEShana-AE
2

frontend-design

Design production-grade frontend interfaces from requirements with accessible markup.

Community
Advanced
Exia-thdExia-thd

performance-engineer

Profile web applications and generate k6/Artillery load testing scripts.

Community
Advanced
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced
brivarobrivaro

frontend-design

Generate distinctive frontend interfaces with HTML, CSS, and JavaScript.

Community
Advanced