design-taste-frontend

Transform design briefs into front-end interfaces with design variance and motion controls.

Updated Jan 2, 2026
One-click install
npx skills add https://github.com/cooopmac/nourish --skill design-taste-frontend-cooopmac
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/cooopmac/nourish/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/cooopmac/nourish --skill design-taste-frontend-cooopmac

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill takes design briefs and translates them into high-quality, anti-slop front-end interfaces, eliminating the need for manual design work and ensuring professional-level design outcomes.

Core Features & Use Cases

  • Brief Inference: Analyzes and interprets design briefs to determine the right aesthetic and functional direction.
  • Design Variance Control: Allows fine-tuning of design variance, motion intensity, and visual density.
  • Design System Mapping: Chooses the appropriate design system or aesthetic for the project.
  • Layout & Architecture: Provides guidelines for layout, state management, icons, emoji policy, responsiveness, and dependency verification.
  • Design Engineering Directives: Offers bias correction for typography, color calibration, layout diversification, materiality, shadows, cards, interactive UI states, data & form patterns, layout discipline, image & visual asset strategy.
  • Use Case: Ideal for agencies, designers, and businesses looking to quickly and efficiently create landing pages, portfolios, and redesigns with a professional touch.

Quick Start

Use the design-taste-frontend skill to generate a design for a landing page targeting tech-savvy consumers with a minimalist 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 turn a design brief into a front-end landing page?

This Skill transforms design briefs into front-end interfaces by analyzing the brief to determine aesthetic direction, applying design variance controls, and mapping the project to an appropriate design system with enforced layout best practices.

What is anti-slop precision in front-end design?

Anti-slop precision in front-end design eliminates generic automated outputs by applying bias correction for typography, color calibration, materiality, shadows, and interactive UI states to ensure professional-level design outcomes.

Can I control motion intensity and visual density for a portfolio redesign?

Yes, you can control motion intensity and visual density for a portfolio redesign. The Skill provides design variance controls allowing fine-tuning of these parameters to match the desired aesthetic and functional direction.

Do I need a specific framework to implement these design system guidelines?

No specific framework is required. The Skill provides framework-agnostic directives for state management, dependency verification, and responsiveness, requiring only an understanding of front-end development practices.

What's the best way to ensure layout discipline and responsive design in generated interfaces?

The best way to ensure layout discipline and responsive design is to apply the Skill's design engineering directives, which enforce layout diversification, manage data and form patterns, and verify dependencies for consistent visual architecture.