design-taste-frontend

Generate brief-driven frontend designs with responsive layouts and accessibility checks.

Updated Jan 30, 2026
One-click install
npx skills add https://github.com/Rayzerrek/dotfiles --skill design-taste-frontend-rayzerrek
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/Rayzerrek/dotfiles/tree/main/.pi/agent/skills/design-taste-frontend
Command: npx skills add https://github.com/Rayzerrek/dotfiles --skill design-taste-frontend-rayzerrek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps generate landing pages, portfolios, and redesigns that feel intentional instead of templated, by inferring the right visual direction from the brief and avoiding common AI design clichés.

Core Features & Use Cases

  • Brief Interpretation: Reads the page type, audience, vibe words, references, and brand assets before making design decisions.
  • Design System Selection: Chooses an official design system when the brief calls for one, or an honest aesthetic implementation when no system exists.
  • Production-Ready Frontend Guidance: Enforces responsive layouts, motion discipline, typography choices, color consistency, and accessibility checks.
  • Use Case: Ideal for a startup landing page, a designer portfolio, or a brand redesign that needs strong visual taste without looking generic.

Quick Start

Create a distinctive frontend for this brief by inferring the design direction, selecting the right system or aesthetic, and producing a responsive, accessible layout.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I stop my AI generated landing pages from looking generic and templated?

To stop landing pages from looking generic, the design process must read the brief to infer page type, audience, and vibe words before making visual decisions, avoiding common AI design clichés.

How do I choose the right UI direction for a portfolio redesign?

Choosing the right UI direction for a portfolio redesign involves analyzing brief-driven constraints and preserve-or-overhaul requirements. The agent selects an official design system when specified, or applies an honest aesthetic implementation when none exists.

What is the best way to ensure frontend design accessibility and responsive layout discipline?

The best way to ensure frontend design accessibility and responsive layout discipline is through pre-flight validation. This process enforces typography choices, color consistency, and motion discipline checks before finalizing the UI generation output.

Can I use Tailwind for brief-driven UI generation with motion discipline?

Yes, you can use Tailwind for brief-driven UI generation. The process applies design-read framing and dial selection to enforce motion discipline, ensuring the frontend output remains responsive and visually distinctive without templated constraints.

Does this frontend design approach work without an existing brand design system?

This frontend design approach works without an existing brand design system by applying an honest aesthetic implementation. It infers the visual direction from the provided brief, selecting the appropriate aesthetic dials for typography, color, and motion.