Core Idea
The author's design philosophy, what sets this apart from peer projects, and quick notes on the key workflows. Skill names mentioned in the text auto-link to their detail pages.
Taste Skill is an anti-slop frontend skill set that upgrades AI-generated UIs from boilerplate to premium through portable Agent Skills. Unlike full-stack frameworks, it stays modular: each skill does one job (implementation or image generation).
soft-skill).State the skill in prompt (e.g. follow image-to-code: generate, analyze, code), let agent apply, pass images to coding agent.
Skill Composition
Each skill is designed for a specific kind of caller — some only fire when you name them, others load automatically when the model judges them relevant. The split below summarises both modes at a glance.
These skills only fire when you call them by name. The agent will not load them on its own — they stay inert until invoked.
These skills are loaded automatically by the agent when it judges the context relevant. You usually don't need to call them yourself.
Skill List
Premium brand-kit image generation skill that creates high-end brand-guideline boards, logo systems, and identity decks. It infers brand strategy, applies restrained composition and logo concept methods across flexible grid layouts. Output is a presentation-ready, visually expensive brand world image usable for identity, UI, and marketing.
Anti-slop frontend skill for landing pages, portfolios, and redesigns. It reads the brief, infers design direction via three dials, and maps to real design systems or honest aesthetics. Ships non-templated interfaces with audit-first redesigns and strict pre-flight checks, boosting originality and quality.
Original v1 frontend taste skill preserving exact backward-compatible behavior for React/Next.js UI generation. It enforces baseline design variance, motion, density configs, mandatory architecture (Tailwind, RSC, dependency checks), and anti-slop rules (typography, color, layout). Output is premium non-generic code with full interaction states and performance guards.
Enforces complete, unabridged LLM output by banning truncation and placeholder patterns. Method: scope-lock, full build, cross-check, clean pause-on-limit. Value: production-ready exhaustive code/docs with no missing parts.
Elite UX/UI engineer skill that breaks LLM default biases by simulating Python RNG for true layout variance, enforcing AIDA structure, 2-line hero rule, gapless bento grids, and strict GSAP ScrollTriggers. It delivers award-level, motion-rich, non-templated frontend code with rigorous pre-flight design plans.
Teaches AI to design like a high-end agency by defining exact fonts, spacing, shadows, card structures, and animations that make websites feel expensive. Blocks common AI defaults that look cheap. Delivers premium, agency-tier UI code with haptic depth and fluid motion.
Elite image-to-code skill for visually important web tasks. It first generates large section-specific design images, deeply analyzes them, then implements the website to match. Key methods: mandatory image-first rule, per-section fresh generation in Codex, deep design extraction. Value: premium, readable, faithful frontend from artistic references.
Elite mobile app image-generation skill that creates premium, app-native screen concepts and flows for iOS, Android, and cross-platform products. It uses platform-aware mode, locked design bible, and consistency rules to break generic AI defaults. Output is high-quality readable screen images in clean phone mockups, giving designers clear, non-generic visual references without code.
Elite frontend image-direction skill that generates premium, conversion-aware website design references. It enforces one separate horizontal image per section and uses a variation engine to break generic AI patterns. Outputs consistent, art-directed comps developers can accurately recreate.
Generates raw mechanical UI designs fusing Swiss typographic print with military terminal aesthetics. Uses rigid grids, extreme type contrast, utilitarian color, and analog degradation effects. Delivers design specs for data-heavy dashboards, portfolios, or editorial sites feeling like declassified blueprints.
A frontend style-guide skill for building clean editorial minimalist UIs with warm monochrome palette, typographic contrast, flat bento grids, and muted pastels. It bans gradients, heavy shadows, and generic SaaS defaults, and outputs refined, high-end interface code with subtle motion.
Upgrades existing websites and apps to premium quality by auditing design and fixing generic AI patterns. Method: scan stack, diagnose via checklists, apply targeted fixes. Value: high-end look without breaking functionality, works with any CSS framework.
Generates agent-friendly DESIGN.md files for Google Stitch to enforce premium anti-generic UI standards. Method: translates anti-slop frontend directives into Stitch semantic language covering atmosphere, color, typography, components, layout, motion, anti-patterns. Value: single source of truth enabling Stitch to produce non-templated, high-agency interfaces.
Installation
Copy and run in your terminal to add leonxlnx/taste-skill to your Agent environment.
npx skills add leonxlnx/taste-skill