design-taste-frontend

Design landing pages, portfolios, and redesigns from a concrete brief using opinionated frontend guidelines.

Updated Jul 10, 2026
One-click install
npx skills add https://github.com/noticesfromchat/macos-app-digest --skill design-taste-frontend-noticesfromchat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/noticesfromchat/macos-app-digest/tree/main/.agents/skills/taste-skill
Command: npx skills add https://github.com/noticesfromchat/macos-app-digest --skill design-taste-frontend-noticesfromchat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated landing pages and portfolios tend to repeat the same clichéd layouts, fonts, and color palettes. This Skill provides a structured design system of rules, reference patterns, and anti-pattern bans so generated frontend output looks intentionally designed rather than templated. ## Core Features & Use Cases - Brief-driven design direction: Infers design dials (variance, motion intensity, visual density) from the brief and maps them to concrete layout, typography, and color decisions. - Reference catalog: On-demand references cover design systems and stack selection, typography and composition rules, motion techniques with accessibility guardrails, a pattern vocabulary, and a redesign protocol for preserving brand and SEO. - AI-tell elimination: Hard bans on common LLM design signatures such as default Inter or serif fonts, purple gradient glows, fake div-based screenshots, and overused eyebrow labels. - Use Case: Given a brief for a premium consumer cookware landing page, the Skill selects a non-default palette, enforces hero layout discipline, picks real imagery strategy, and ships a page that passes its pre-flight checks. ## Quick Start Design a landing page for my product using the design-taste-frontend skill, following the brief I provide and preserving my existing brand.

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 from a brief with this skill?

Provide a concrete brief describing the product, audience, and desired aesthetic. The skill infers design dials for variance, motion, and density, then applies typography, color, layout, and motion rules from its reference files to produce the page.

What frontend stack does this design skill use?

The default stack is React or Next.js with Server Components, Tailwind v4 for styling, Motion (imported from motion/react) for animation, and next/font for typography. Official design systems like Fluent, Carbon, or shadcn/ui are used when the brief matches them.

Can this skill redesign an existing website without breaking the brand?

Yes. The redesign reference defines a preserve mode that audits existing brand tokens, information architecture, and SEO baseline first, then modernizes typography, spacing, color, and motion without changing URLs, nav labels, or copy voice.

Does the skill support dark mode and reduced motion?

Yes. Dark mode is mandatory for consumer-facing pages using either Tailwind dark variants or CSS variables, and any motion above low intensity must honor prefers-reduced-motion by degrading to static output.

When should I not use this design skill?

It targets landing pages, portfolios, and marketing redesigns. It is not intended for data-dense dashboards, native mobile apps, or backend work, and it defers to official design system packages when a brief clearly maps to one.