skills.rest
marduk191
marduk191COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or React and Vue components.

9|4|Updated Feb 7, 2026
Search Tags:#design#ui#frontend#react#components#aesthetics
One-click install
npx skills add https://github.com/marduk191/qwen3_mcp --skill frontend-design-marduk191
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/marduk191/qwen3_mcp/tree/main/skills/frontend-design
Command: npx skills add https://github.com/marduk191/qwen3_mcp --skill frontend-design-marduk191

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams produce distinctive, production-grade frontend interfaces with a clear aesthetic direction, avoiding generic AI visuals and delivering polished code and UI design.

Core Features & Use Cases

  • Production-grade code: generates functional HTML/CSS/JS or framework components (React, Vue) aligned with a bold design direction.
  • Design system guidance: provides typography, color tokens, motion, and layout guidance for responsive, accessible interfaces.
  • Use Case: craft dashboards, landing pages, or product interfaces with a unique brand-aware visual language.

Quick Start

Provide a design brief outlining the required aesthetic and deliverables and I will generate a production-grade frontend implementation that matches the brief.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-ready React components with a bold UI design?▼

To generate production-ready React components with a bold UI design, provide a design brief outlining your aesthetic direction and deliverables. This skill outputs framework-ready HTML, CSS, JS, or React components complete with accessible typography, color tokens, and responsive layouts.

Can I use this to build responsive dashboards and landing pages?▼

Yes, you can use this to build responsive dashboards and landing pages. It designs and implements production-grade frontend interfaces tailored for websites and product interfaces, delivering cohesive UI systems with distinctive visual language and motion.

What's the best way to avoid generic AI visuals when building a frontend?▼

The best way to avoid generic AI visuals when building a frontend is to apply a clear, bold aesthetic direction. This skill interprets your design brief to produce distinctive, brand-aware visual language rather than default, generic interface outputs.

Does this skill provide design system tokens for typography and color?▼

Yes, this skill provides design system tokens for typography and color. It delivers comprehensive guidance for accessible interfaces, including color tokens, typography rules, motion specifications, and responsive layout structures directly within the generated code.

Can I generate Vue components instead of plain HTML and CSS?▼

Yes, you can generate Vue components instead of plain HTML and CSS. The skill delivers framework-ready code for React or Vue, alongside standard HTML, CSS, and JS implementations, depending on your specific project requirements.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
amhuppertamhuppert
2

break-into-subtasks

Break down frontend feature requirements into API clients, UI components, and integration tasks with dependencies.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

responsive

Implement mobile-first responsive layouts with CSS Grid, Flexbox, and Tailwind breakpoints.

Community
Intermediate
miolamiomiolamio
23

frontend-design

Generates HTML/CSS/JS front-end components and layouts with specified visual themes.

Community
Advanced