skills.rest
haxlys
haxlysCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Generate UI/UX designs for landing pages and portfolios from design briefs.

Updated Jun 8, 2026
Search Tags:#design systems#interactive UI#UI/UX design#landing pages#redesign#layout rules#portfolio design
One-click install
npx skills add https://github.com/haxlys/frontend-lab --skill design-taste-frontend-haxlys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/haxlys/frontend-lab/tree/main/experiments/02-model-comparison/output/combined-t2-r2/.agents/skills/taste-skill
Command: npx skills add https://github.com/haxlys/frontend-lab --skill design-taste-frontend-haxlys

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you create high-quality UI/UX designs that stand out, focusing on landing pages, portfolios, and redesigns, avoiding the common pitfalls of AI-generated design defaults.

Core Features & Use Cases

  • Design Inference: Analyze user briefs to infer the right design direction and aesthetic.
  • Customization: Set dials for design variance, motion intensity, and visual density to shape the output.
  • Design Systems: Choose from various design systems or implement custom aesthetics using native CSS and Tailwind.
  • Layout & Architecture: Follow strict layout rules and design conventions for consistency and best practices.
  • Typography, Color, & Layout: Enforce typography discipline, color calibration, and layout diversification.
  • Visual Assets: Prioritize real images and logos for a professional finish.
  • Interactive UI States: Implement full UI states for a rich user experience.
  • Data & Form Patterns: Utilize standardized data and form patterns for accessibility and consistency.
  • Hero Section Discipline: Define strict rules for hero sections, including content, font sizes, and layout.
  • Navigation: Ensure a single-line navigation and responsive design.

Quick Start

Generate a landing page design for a SaaS product based on the provided design brief.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I create a modern landing page design that avoids generic AI aesthetics?▼

To create a modern landing page design that avoids generic AI aesthetics, you need to apply strict layout rules, enforce typography discipline, and use real visual assets. This approach ensures professional UI/UX by prioritizing design system consistency over default templates.

What is the best way to structure a portfolio redesign for a consistent user experience?▼

The best way to structure a portfolio redesign for a consistent user experience is by inferring user needs from your brief and applying standardized layout rules. This method enforces color calibration and typography discipline to achieve a cohesive, professional portfolio aesthetic.

How does design variance affect UI/UX generation for interactive web layouts?▼

Design variance affects UI/UX generation by allowing you to set dials for motion intensity and visual density, shaping the interactive web layout output. This customization ensures the generated design matches your intended aesthetic while maintaining strict layout architecture.

Can I use custom CSS and Tailwind to implement design systems for SaaS products?▼

Yes, you can use custom CSS and Tailwind to implement design systems for SaaS products. The process allows you to choose from various predefined design systems or implement custom aesthetics while enforcing hero section discipline and single-line navigation.

Do I need to provide a design brief to generate UI states and form patterns?▼

Yes, you need to provide a design brief to generate UI states and form patterns effectively. Analyzing the design brief allows the system to infer the right design direction, ensuring standardized data patterns and full interactive UI states are implemented for accessibility.

Why does my generated landing page layout lack visual hierarchy and professional polish?▼

Your generated landing page layout may lack visual hierarchy because it does not enforce hero section discipline or prioritize real images and logos. Applying strict layout conventions and typography calibration resolves this by enforcing consistent design architecture.

Related Skills

Explore More Design & Creative Skills→
julianromlijulianromli

shape

Plan UX and UI into a handoff-ready design brief.

Community
Intermediate
EnztunEnztun

ui-ux-pro-max

Generate UI layouts, UX flows, and design systems for web frameworks.

Community
Advanced
FEMADOXFEMADOX
4

tailwind-css-patterns

Automate Tailwind CSS utility pattern creation for responsive UI components.

Community
Intermediate
faionfaionfaionfaion
4

faion-ux-ui-designer

Orchestrate UX/UI design activities across research, wireframing, prototyping, and accessibility.

Community
Advanced