skills.rest
gsd-build
gsd-buildOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Design production-grade frontend interfaces with accessible, responsive HTML/CSS/JS components.

7.8k|770|Updated Mar 11, 2026
Search Tags:#design#frontend#react#css#aesthetics#ui-components#design-systems
One-click install
npx skills add https://github.com/gsd-build/gsd-2 --skill frontend-design-gsd-build
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/gsd-build/gsd-2/tree/main/src/resources/skills/frontend-design
Command: npx skills add https://github.com/gsd-build/gsd-2 --skill frontend-design-gsd-build

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps designers and developers craft visually distinctive, production-grade frontend interfaces with a clear aesthetic direction.

Core Features & Use Cases

  • Aesthetic direction setting: establish typography, color, spacing, and motion to achieve a unique look.
  • Produce production-ready UI code: HTML/CSS/JS, React, Vue, or other frameworks, with accessible, responsive components.
  • Use cases: web components, landing pages, dashboards, design systems, and UI kits.

Quick Start

Describe your target aesthetic and constraints, and I will generate a production-ready UI design and starter code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a production-grade frontend interface with a distinctive aesthetic?▼

A design system ensures scalable, accessible, and responsive components by establishing typography, color, spacing, and motion rules upfront, then generating production-ready HTML, CSS, or React code aligned to that visual direction.

Can I generate React components for a dashboard with a non-generic UI?▼

Yes, you can generate production-ready React components for dashboards by specifying your desired aesthetic direction, which produces clean, accessible, and responsive code tailored to a bold, non-generic visual style.

What's the best way to build a landing page that requires a bold aesthetic direction?▼

The best way to build a bold landing page is to first establish the typography, color, spacing, and motion parameters, then generate production-ready HTML, CSS, or JS code that fulfills accessibility and responsive requirements.

Does this approach to frontend design work with Vue or other frameworks?▼

Yes, this frontend design approach supports Vue and other frameworks by delivering scalable, production-ready UI code that maintains accessibility, responsive behavior, and the chosen aesthetic direction across the implementation.

How do I ensure my web components are accessible and responsive when building a UI kit?▼

To ensure web components in a UI kit are accessible and responsive, generate production-grade code that explicitly fulfills architecture requirements, accessibility standards, and responsive behavior aligned with your aesthetic direction.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
hacsat88-bliphacsat88-blip

web-artifacts-builder

Create React web artifacts bundled into a single HTML file.

Community
Advanced
yutaoshaoyutaoshao

frontend-design

Transform UI briefs into token-driven design systems with CSS variables and TypeScript types.

Community
Advanced
polyuiislabpolyuiislab
1.2k

frontend-design

Generate production-grade frontend interfaces from bold aesthetic direction.

Community
Advanced