frontend_design

Generate production-ready frontend code scaffolds with guided design thinking.

49|2|Updated Mar 20, 2026

Search Tags:#design #ui #frontend #react #components #aesthetics #design-system

Ready to run

npx skills add https://github.com/vibeinging/YiYi --skill frontend-design-vibeinging

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend_design
Source: https://github.com/vibeinging/YiYi/tree/main/app/src-tauri/skills/frontend_design
Command: npx skills add https://github.com/vibeinging/YiYi --skill frontend-design-vibeinging

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates distinctive, production-grade frontend interfaces with high design quality, empowering teams to move from concept to polished UI swiftly while avoiding generic AI aesthetics.

Core Features & Use Cases

Guided design thinking: Define purpose, tone, constraints, and differentiation to shape the UI direction.
Aesthetics guidelines: Provide typography, color, motion, and layout recommendations to craft cohesive interfaces.
Implementation guidance: Generate ready-to-implement frontend code scaffolds (HTML/CSS/JS, React, Vue, etc.) aligned with the defined aesthetic.
Use Case: Imagine building a bold admin dashboard; this skill guides the entire frontend design process from concept to code.

Quick Start

Create a production-grade frontend page with a bold, distinctive aesthetic using React.

Frequently Asked Questions about frontend_design

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

FAQPage Schema

How do I create production-grade React components with intentional design aesthetics?▼

To create production-grade React components with intentional design aesthetics, you need guided design thinking for typography, color, motion, and layout. This skill generates ready-to-implement code scaffolds aligned with a defined aesthetic direction to avoid generic AI outputs.

What is the best way to build a frontend design system for a bold admin dashboard?▼

The best way to build a frontend design system for a bold admin dashboard is to define purpose, tone, and constraints first. This skill guides the entire process from concept to polished UI, ensuring cohesive interfaces with production-ready code.

Does this frontend design guidance work with Vue and vanilla HTML/CSS/JS stacks?▼

Yes, this frontend design guidance works with Vue and vanilla HTML/CSS/JS stacks. It applies across React, Vue, or vanilla stacks to create components, pages, or applications with intentional typography and layout decisions.

How do I avoid generic AI aesthetics when generating frontend UI code?▼

To avoid generic AI aesthetics when generating frontend UI code, apply aesthetics guidelines for typography, color, motion, and layout. This skill provides design-thinking guidance to craft distinctive, production-grade interfaces with high design quality.

Can I get implementation-ready code scaffolds for my frontend design decisions?▼

Yes, you can get implementation-ready code scaffolds for your frontend design decisions. This skill provides implementation guidance and generates production-ready frontend code artifacts in frameworks like React or Vue that align with your defined aesthetic direction.

What limitations exist when using this skill for frontend page creation?▼

A key limitation is that this skill focuses on frontend page creation and does not handle backend logic or database integration. It strictly solves the challenge of crafting distinctive UI interfaces and providing implementation-ready frontend code scaffolds.