skills.rest
phintruong
phintruongCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/phintruong/skills --skill frontend-design-phintruong
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Likas07Likas07

ux-architect

Generate CSS design systems and layout frameworks for web development projects.

Community
Advanced
v24kuonv24kuon

frontend-design

Generate custom CSS and responsive layouts with intentional design choices.

Community
Advanced
aryan-binaziraryan-binazir

frontend-design

Generate HTML/CSS/JS frontend interfaces with distinctive typography, color, motion, and spatial composition.

Community
Advanced
viralcodeviralcode
61

ui-ux-master

Guide UI/UX design with Apple HIG, WCAG, and component best practices.

Community
Advanced