design-taste-frontend

Generates frontend landing page and portfolio designs from project briefs and design systems.

Updated Mar 11, 2025
One-click install
npx skills add https://github.com/MohammedSaudAlsahli/dotfiles --skill design-taste-frontend-mohammedsaudalsahli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/MohammedSaudAlsahli/dotfiles/tree/main/ai/agents-skills/design-taste-frontend
Command: npx skills add https://github.com/MohammedSaudAlsahli/dotfiles --skill design-taste-frontend-mohammedsaudalsahli

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill eliminates the common pitfalls in frontend design, ensuring landing pages and portfolios look professional and unique, avoiding clichés and defaults.

Core Features & Use Cases

  • Design Inference: Analyzes the project's requirements and audience to determine the appropriate design direction.
  • Configurable Dials: Adjusts design variance, motion intensity, and visual density to fit the project's aesthetic.
  • Design System Mapping: Selects and implements the most suitable design system or aesthetic for the project.
  • Design Engineering Directives: Provides guidelines for typography, color, layout, and interactive elements to ensure a cohesive and professional look.
  • Use Case: A designer creates a landing page for a SaaS product. The Skill analyzes the project's requirements, selects a design system, and generates a design with a clean aesthetic, avoiding clichés and defaults.

Quick Start

Run the design-taste-frontend skill with the brief: "I need a landing page for a SaaS product targeting technical buyers. The design should be minimalist and use a Linear-style aesthetic."

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 frontend landing page design that avoids common clichés and defaults?

To create a frontend landing page design that avoids common clichés and defaults, analyze your project brief to select an appropriate design system and apply design engineering principles for a unique, professional aesthetic.

What is design engineering for frontend aesthetics and when do I need it?

Design engineering for frontend aesthetics is the process of applying systematic design directives for typography, color, and layout to generate professional portfolios. You need it when your project requires a unique look that avoids default template slop.

How do I configure visual density and motion intensity for a SaaS landing page?

You can configure visual density and motion intensity for a SaaS landing page by using adjustable design dials that align the project's aesthetic direction with your target audience and specific design system requirements.

Does this approach work for designing technical portfolios as well as marketing sites?

Yes, this approach works for designing technical portfolios and marketing sites by analyzing project requirements and audience to determine the appropriate design direction, ensuring a cohesive and professional look across both formats.

Do I need prior knowledge of design systems to generate unique portfolio layouts?

Yes, generating unique portfolio layouts requires knowledge of design systems and frontend development principles to effectively map and implement the most suitable aesthetic for your project.

What's the best way to map an appropriate design system to a project brief?

The best way to map an appropriate design system to a project brief is to analyze the project's requirements and audience first, then select and implement the aesthetic that provides a clean, professional look without relying on clichéd defaults.