skills.rest
abeldotam
abeldotamCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create production-grade frontend interfaces from design concepts.

13|Updated Feb 4, 2026
Search Tags:#design#ui#frontend#react#vue#component#aesthetics
One-click install
npx skills add https://github.com/abeldotam/bmad-viewer --skill frontend-design-abeldotam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/abeldotam/bmad-viewer/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/abeldotam/bmad-viewer --skill frontend-design-abeldotam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers struggle to transform branding and UX concepts into production-grade frontend interfaces that are not generic AI outputs.

Core Features & Use Cases

  • Produce distinctive frontend UI that is production-ready, visually cohesive, and accessible.
  • Translate design concepts into reusable components, patterns, and layouts for web apps, dashboards, and marketing pages.
  • Use case: a design system team provides a bold aesthetic direction and generates a complete UI kit (components, pages) that matches the brand.

Quick Start

Provide a project brief and deliver a production-grade frontend implementation that follows the chosen aesthetic direction.

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 from design concepts?▼

Build production-grade frontend interfaces by translating design concepts into distinctive, accessible, and responsive UI components. This process requires explicit aesthetic direction and a clear component hierarchy to generate cohesive code for web apps or dashboards.

Can I generate a reusable React or Vue component library from a brand aesthetic?▼

Yes, you can generate a reusable React or Vue component library by providing a bold aesthetic direction. The output delivers a complete UI kit with accessible color contrast and responsive layouts that match your specific brand identity.

What is the best way to avoid generic AI outputs when designing web app UI?▼

The best way to avoid generic AI web app UI is to provide explicit aesthetic direction for your frontend interfaces. This ensures the resulting components and layouts are visually cohesive, distinctive, and adhere to production-grade standards.

Does this frontend design approach support vanilla HTML and CSS?▼

Yes, this frontend design approach supports vanilla HTML and CSS alongside React and Vue. It delivers accessible color contrast and responsive layouts across these frameworks, ensuring production-grade UI components for various web projects.

What do I need to provide to create a cohesive frontend UI for a dashboard?▼

To create a cohesive frontend UI for a dashboard, you need to provide a project brief with explicit aesthetic direction and a clear component hierarchy. This ensures the generated responsive layouts meet accessible color contrast standards.

Related Skills

Explore More Design & Creative Skills→
mxyhimxyhi
467

frontend-design

Generate frontend interfaces with guidelines for typography, color, layout, and motion.

Community
Advanced
alter123-zzalter123-zz
18

frontend-design

Generate production-grade frontend interfaces with design systems and accessible components.

Community
Intermediate
sharegpusharegpu

frontend-design

Generate frontend design blueprints with typography, color, and accessibility guidelines.

Official
Intermediate
anzx01anzx01
4

frontend-design

Translate frontend requirements into production-ready UI components and interfaces.

Community
Advanced