frontend-design

Generate production-grade frontend interfaces with custom typography and advanced CSS motion.

Updated Apr 23, 2026

Search Tags:#typography #design #ui #frontend #css #web-development

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of generic, uninspired AI-generated UI by enforcing a rigorous, intentional, and bold design process that prioritizes aesthetic quality and user experience.

Core Features & Use Cases

Aesthetic Direction: Guides the selection of cohesive, high-impact visual themes ranging from brutalist to refined luxury.
Technical Implementation: Ensures production-grade code generation with a focus on typography, motion, and spatial composition.
Use Case: Use this skill when building a landing page or web component to ensure the output is visually striking, memorable, and avoids common AI design patterns.

Quick Start

Invoke the frontend-design skill to build a minimalist, high-end product landing page with bold typography and staggered entrance animations.

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 with distinctive UI design?▼

Production-grade frontend interfaces are generated by enforcing a rigorous design process that prioritizes custom typography, advanced CSS motion, and cohesive spatial composition to deliver high-quality web components.

Why does my AI-generated web design look generic and uninspired?▼

AI-generated web design often looks generic because it lacks intentional aesthetic direction, requiring a process that enforces bold visual themes and meticulous detail to create visually striking and memorable interfaces.

How do I build a high-end product landing page with bold typography and CSS motion?▼

Building a high-end product landing page involves selecting a cohesive aesthetic direction, applying custom typography, and implementing staggered entrance animations to achieve a visually striking web application.

What is the best way to avoid common AI design patterns when creating web components?▼

Avoiding common AI design patterns requires applying an intentional design process that focuses on unique visual character, advanced CSS motion, and high-quality execution rather than relying on generic templates.

Can I use this approach for both brutalist and refined luxury web development aesthetics?▼

This approach supports both brutalist and refined luxury web development aesthetics by guiding the selection of cohesive, high-impact visual themes tailored to specific design requirements.