skills.rest
HexAI-inc
HexAI-incOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Create web UI designs with retro aesthetics, physics-based animations, and UX psychology.

Updated Oct 30, 2025
Search Tags:#web development#animation#frontend development#ui design#ux psychology#aesthetic standards#css art
One-click install
npx skills add https://github.com/HexAI-inc/v0-futuristic-website-design --skill frontend-design-hexai-inc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/HexAI-inc/v0-futuristic-website-design/tree/main/.agents/skills/maestro/skills/frontend-design
Command: npx skills add https://github.com/HexAI-inc/v0-futuristic-website-design --skill frontend-design-hexai-inc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually stunning, highly functional, and psychologically resonant user interfaces that avoid generic AI aesthetics and prioritize user experience through meticulous design and animation.

Core Features & Use Cases

  • Anti-AI Aesthetic Mandate: Ensures designs are unique, avoiding cliché patterns and overused styles.
  • Psychology-Driven Design: Integrates UX psychology and behavioral patterns for intuitive interactions.
  • Physics-Based Animation: Implements fluid, natural motion using spring physics for a tactile feel.
  • Use Case: Design a futuristic e-commerce product page that uses subtle animations to guide the user's eye, employs a unique color palette derived from a "cyberpunk noir" narrative, and ensures all interactive elements feel responsive and weighty.

Quick Start

Use the frontend-design skill to create a visually unique and engaging landing page for a new tech product, adhering to the 'Neo Brutalist' aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create web UIs that avoid generic AI aesthetics and look visually unique?▼

To create web UIs that avoid generic AI aesthetics, you need an anti-AI generation mandate that enforces unique patterns, pixel-perfect retro aesthetics, and distinctive original styles like Neo Brutalism or cyberpunk noir.

What is UX psychology in frontend development and how does it improve UI design?▼

UX psychology in frontend development integrates behavioral patterns and psychological protocols into UI design, ensuring layouts are immersive and interactions feel intuitive and highly responsive for the user.

How do I implement physics-based animations for a more natural web UI feel?▼

Implement physics-based animations by using spring physics to drive fluid, natural motion, giving interactive UI elements a tactile feel and physical weight that enhances the overall user experience.

Can I use this approach to build a production-level e-commerce frontend with a specific aesthetic?▼

Yes, you can build production-level frontends for e-commerce by applying detailed aesthetic and technical references, using unique color palettes and subtle animations to guide the user's eye effectively.

What's the best way to enforce pixel-perfect retro aesthetics in web development?▼

The best way to enforce pixel-perfect retro aesthetics is by adhering to detailed aesthetic references and standards that mandate original, distinctive design patterns over cliché, overused UI styles.

Why does my frontend UI lack architectural integrity when using complex animations?▼

Frontend UI lacks architectural integrity when complex animations are built without integrating with complementary skills, which are required to maintain structural and technical cohesion across the design.

Related Skills

Explore More Design & Creative Skills→
AvaTar-ArTsAvaTar-ArTs

frontend-design

Generate responsive HTML/CSS/JS interfaces with accessible, reusable components and distinctive aesthetics.

Community
Advanced
reomgitreomgit

setup-deploy

Detect deployment platforms and write configuration settings to CLAUDE.md.

Community
Advanced
zhizhunbaozhizhunbao

Full-Stack Data Flow Checker

Validates data flow consistency across full-stack applications using ripgrep analysis and Python scripts.

Community
Advanced
elihuvillarauselihuvillaraus
2

ui-designer

Create design systems, component libraries, and interface specifications for developer handoff.

Community
Advanced