frontend-design

Generate production-grade frontend interfaces with HTML, CSS, JS, React, or Vue.

1|Updated Dec 15, 2025

Search Tags:#design #ui #web development #frontend #react #css #aesthetics

Ready to run

npx skills add https://github.com/mihaamiharu/twe --skill frontend-design-mihaamiharu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mihaamiharu/twe/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/mihaamiharu/twe --skill frontend-design-mihaamiharu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating distinctive, production-grade frontend interfaces that move beyond generic AI aesthetics, focusing on unique visual appeal and user delight.

Core Features & Use Cases

Aesthetic Direction: Guides the selection of a bold, intentional design theme (e.g., brutalist, art deco, maximalist).
Production-Grade Code: Generates functional HTML/CSS/JS, React, or Vue code.
Detailed Refinement: Focuses on typography, color, motion, spatial composition, and visual details.
Use Case: Design a landing page for a new artisanal coffee brand with a "retro-futuristic" aesthetic, incorporating unique typography, a warm color palette, and subtle animations on scroll.

Quick Start

Use the frontend-design skill to create a React component for a user profile card with a minimalist aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I generate frontend UI code that avoids generic AI aesthetics?▼

To generate frontend UI code that avoids generic aesthetics, this Skill focuses on intentionality in design direction, executing precise choices in typography, color, and motion. It produces production-grade HTML/CSS/JS, React, or Vue code with distinctive visual appeal.

What is the best way to create a React component with a specific aesthetic direction like brutalism or art deco?▼

Creating a React component with a specific aesthetic direction requires guiding the design theme intentionally. This Skill executes chosen conceptual directions like brutalist or art deco with precision in spatial composition and visual details, outputting functional production-grade code.

Can I use this frontend design approach for both full web pages and individual components?▼

Yes, you can use this frontend design approach for both full web pages and individual components. It generates distinctive, production-grade interfaces for components, pages, or applications, applying high design quality and detailed refinement across any scope.

Does this UI generation method support Vue alongside React?▼

Yes, this UI generation method supports Vue alongside React. It generates functional, production-grade code in HTML/CSS/JS, React, or Vue, applying the same exceptional attention to aesthetic details, motion, and visual choices across these frameworks.

How do I design a web page with a retro-futuristic aesthetic and subtle scroll animations?▼

To design a web page with a retro-futuristic aesthetic and subtle scroll animations, you define an intentional design theme and warm color palette. This Skill executes that direction precisely, generating functional code with detailed attention to motion and typography.

What distinguishes this frontend design approach from other UI generation tools?▼

What distinguishes this frontend design approach is its focus on avoiding generic AI aesthetics by executing bold, intentional design themes. It provides detailed refinement in typography, spatial composition, and visual details that standard UI generation tools often lack.