skills.rest
mhfed
mhfedCOMMUNITY
Explore all skills by this author →
Website𝕏@mhfedevGitHub

design-taste-frontend

Infer design direction for frontend layouts before implementation.

Updated Nov 1, 2025
Search Tags:#landing page#portfolio#tailwind#frontend design#motion design#ui direction
One-click install
npx skills add https://github.com/mhfed/portfolio-2025 --skill design-taste-frontend-mhfed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/mhfed/portfolio-2025/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/mhfed/portfolio-2025 --skill design-taste-frontend-mhfed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design and build landing pages, portfolios, and redesigns that feel intentional, distinctive, and polished instead of generic or templated.

Core Features & Use Cases

  • Design Read First: Infers the page type, audience, vibe, and constraints before proposing any UI direction.
  • Anti-Default Frontend Guidance: Pushes you away from overused AI design tropes and toward appropriate layout, typography, motion, and color choices.
  • Real System Selection: Recommends when to use an official design system versus native CSS, Tailwind, or component libraries.
  • Use Case: A developer portfolio can be framed with a sharper visual language, stronger hierarchy, and better motion discipline while still staying readable and conversion-oriented.

Quick Start

Ask the skill to read your brief and propose a distinctive frontend direction for a portfolio or landing page.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I design a landing page that doesn't look like a generic template?▼

To design a distinctive landing page, you must infer the correct design direction based on audience and constraints before implementation, avoiding overused UI tropes in favor of intentional layout, typography, and color choices.

What's the best way to choose typography and color for a frontend portfolio?▼

Choosing typography and color for a frontend portfolio requires audience-driven visual decisions and color calibration, pushing away from default patterns toward a sharper visual language and stronger hierarchy.

How do I know when to use Tailwind versus an official design system for my web interface?▼

Deciding between Tailwind and an official design system depends on your project constraints, where the Skill recommends selecting the appropriate build approach to avoid templated UI patterns while maintaining readability.

How can I prevent my AI-generated frontend layouts from looking generic?▼

Preventing generic AI-generated frontend layouts involves applying strict pre-flight checks and guardrails against templated UI patterns, ensuring motion tuning and layout composition feel intentional and polished.

Related Skills

Explore More Design & Creative Skills→
ydnikolaevydnikolaev
8

idea-interview

Extract project information through structured stakeholder interviews into a discovery brief.

Community
Advanced
michaeldyryndamichaeldyrynda
59

frontend-design

Translate bold aesthetic direction into production-ready frontend code.

Community
Advanced
wubq511wubq511
6

design-taste-frontend

Generate frontend designs with intentional aesthetic direction from user briefs.

Community
Advanced
act70255act70255

frontend-design

Design distinctive frontend interfaces with intentional design systems and functional code.

Community
Advanced