frontend-design

Generate production-ready HTML/CSS/JS, React, or Vue interfaces with cohesive visual design.

60|38|Updated Feb 9, 2026
One-click install
npx skills add https://github.com/abcnuts/manus-skills --skill frontend-design-abcnuts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/abcnuts/manus-skills/tree/main/skills/design-skills/frontend-design
Command: npx skills add https://github.com/abcnuts/manus-skills --skill frontend-design-abcnuts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics and deliver ready-to-run code with meticulous visual polish.

Core Features & Use Cases

  • Guided aesthetic direction: Establishes a bold or refined design direction (tone, typography, color system) before implementation.
  • Production-grade implementation: Generates working HTML/CSS/JS, React/Vue components, and UI patterns aligned with the chosen aesthetic.
  • Context-aware adaptation: Adapts to requirements, audience, and constraints to produce cohesive UI across pages, dashboards, and apps.

Quick Start

Provide a frontend requirement (component, page, or interface) and the skill will generate a production-grade, visually distinctive implementation.

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-grade frontend interfaces that avoid generic AI aesthetics?▼

To generate production-grade frontend interfaces that avoid generic AI aesthetics, provide a component, page, or application requirement to establish a bold or refined design direction with cohesive typography and color systems before implementation.

Can I use this to build React and Vue components with CSS variables?▼

Yes, you can build React and Vue components with CSS variables. The skill generates working HTML/CSS/JS and component code aligned with your chosen aesthetic across these specific ecosystems.

What is the best way to create a cohesive visual identity for a web dashboard?▼

The best way to create a cohesive visual identity for a web dashboard is to apply context-aware adaptation to your requirements, ensuring typography, color systems, motion, and layout maintain consistency across the interface.

Does the generated frontend code include accessibility and motion design?▼

Yes, the generated frontend code includes accessibility and motion design. It satisfies requirements for typography, color systems with CSS variables, motion, layout, and accessibility to deliver ready-to-run code.

How do I start building a visually distinctive web page from a basic requirement?▼

To start building a visually distinctive web page, provide a frontend requirement such as a component or interface. The skill will first guide the aesthetic direction, then generate a production-grade implementation.

Why does my AI generated UI look generic and lack visual polish?▼

AI generated UI looks generic and lacks visual polish when it relies on default templates. This skill solves that by establishing a distinctive design direction first, ensuring meticulous visual polish and avoiding generic aesthetics.