skills.rest
fatihkan
fatihkanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-taste

Enforce deterministic typography, layout variants, and motion for frontend outputs.

7|Updated Apr 9, 2026
Search Tags:#design#ui#layout#frontend#motion#premium#taste
One-click install
npx skills add https://github.com/fatihkan/badi --skill frontend-taste
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-taste
Source: https://github.com/fatihkan/badi/tree/main/.claude/skills/frontend-taste
Command: npx skills add https://github.com/fatihkan/badi --skill frontend-taste

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents generic AI-looking UI by enforcing deterministic typography, calibrated color, and asymmetric layouts, ensuring premium, high-agency frontend outputs that feel designed rather than auto-generated.

Core Features & Use Cases

  • Enforces 9 distinct variant styles (default, gpt-taste, minimalist, brutalist, soft, redesign, output, stitch, images-first) to provide a rich palette of premium UI directions.
  • Maintains strict design engineering rules (typography, color, spacing, motion) to deliver implementation-ready prompts and assets.
  • Ideal for architects, designers, and AI-assisted coding agents who need repeatable, non-generic frontend results across multiple projects.

Quick Start

Describe a premium UI taste scenario requesting a high-agency frontend variant.

Frequently Asked Questions about frontend-taste

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

FAQPage Schema
How do I prevent generic AI-looking UI when generating frontend layouts?▼

You can enforce deterministic typography, calibrated colors, and asymmetric layouts to prevent generic AI-looking UI. Applying taste-driven rules overrides standard generation biases to produce premium frontend outputs that feel designed.

What design variant styles can I use for high-agency frontend development?▼

For high-agency frontend development, you can apply 9 distinct variant styles: default, minimalist, brutalist, soft, redesign, output, stitch, and images-first. These provide a rich palette of premium UI directions.

Does this frontend design approach work with Claude Code and Cursor adapters?▼

Yes, this taste-driven frontend approach targets Claude Code, Cursor, and Gemini adapters. It delivers deterministic typography, layout variants, and motion with guaranteed structure for these coding environments.

How do I implement strict design engineering rules for typography and motion?▼

You implement strict design engineering rules by enforcing deterministic typography, calibrated color, spacing, and motion constraints. This yields implementation-ready prompts and assets with repeatable, non-generic frontend results.

Why does my AI generated UI lack premium taste and look generic?▼

AI generated UI looks generic because standard model biases produce default, symmetric layouts. Enforcing taste-driven rules with design tokens and strict UI conventions overrides these biases to deliver high-agency frontend outputs.

Related Skills

Explore More Design & Creative Skills→
treejhtreejh

context-loader

Loads project rules and docs from .claude to align Gemini CLI outputs.

Community
Intermediate
LeonxlnxLeonxlnx
74.5k

gpt-taste

Generate GSAP-driven hero UI layouts with deterministic Bento grids.

Community
Advanced
anonymouswhite07anonymouswhite07

design-taste-frontend

Enforce design taste, color, layout, and motion rules for Next.js/React interfaces.

Community
Advanced
hookvibehookvibe
3

ui-ux-pro-max

Generate UI/UX design systems with color palettes and typography guidelines.

Official
Basic