skills.rest
hanthienduc
hanthienducCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design-pro

Generate HTML/CSS interfaces with curated aesthetic styles and image links.

Updated Aug 23, 2026
Search Tags:#design#web development#frontend#UI/UX#image generation#aesthetic#Tailwind CSS
One-click install
npx skills add https://github.com/hanthienduc/myprotocol-stack --skill frontend-design-pro-hanthienduc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-pro
Source: https://github.com/hanthienduc/myprotocol-stack/tree/main/.claude/skills/frontend-design-pro
Command: npx skills add https://github.com/hanthienduc/myprotocol-stack --skill frontend-design-pro-hanthienduc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AI-generated UIs often lack aesthetic quality, use generic fonts, and struggle with realistic, high-quality imagery, leading to "AI slop" and fake assets. This skill solves that by enforcing high-end design principles and providing flawless image solutions.

Core Features & Use Cases

  • Elite Frontend Design: Generates interfaces that look like $50k+ agency projects, adhering to strict aesthetic rules (characterful fonts, custom properties, asymmetry, unique details).
  • Perfect Image System: Delivers direct Unsplash/Pexels links for real photos or hyper-detailed prompts for AI image generation (Flux/Midjourney v6/Ideogram), ensuring zero fake links or low-effort AI slop.
  • Bold Aesthetic Directions: Offers a curated list of 11 distinct design styles (Minimalism, Neumorphism, Glassmorphism, Brutalism, Claymorphism, Aurora, Retro-Futurism, 3D Hyperrealism, Vibrant Block, Dark OLED Luxury, Organic/Biomorphic) to ensure a strong, consistent visual identity.
  • Use Case: A startup needs a new landing page that stands out. You can use this skill to generate a complete, production-ready HTML/CSS (Tailwind) interface with a "Dark OLED Luxury" aesthetic, complete with a stunning hero image prompt for Midjourney, ensuring a premium feel without hiring an expensive design agency.

Quick Start

Design a hero section for a SaaS product using the "Glassmorphism" aesthetic. Include a call to action button and a conceptual background image.