repository·main·Indexed 13 days ago
https://github.com/leonxlnx/taste-skillAn 'Anti-Slop' frontend framework for AI agents providing portable skills to upgrade AI-generated interfaces with professional layout, typography, motion, and spacing. Includes implementation skills for code output, image generation skills for visual comps, and a v2 (experimental) design-taste-frontend skill with adjustable dials for variance, motion intensity, and visual density.
research directory contains background research that informs the implementation of the skills within this project. It is organized by topic, providing the theoretical and experimental basis for the project's capabilities.The imagegen-frontend-mobile skill is an elite mobile product design tool for generating premium, app-native screen concepts and user flows. It is specifically designed for creating high-fidelity visual representations of mobile interfaces for iOS, Android, and cross-platform products.
Key Capabilities:
Important Limitations:
The brandkit skill is a premium image generation tool designed to create high-end brand identity assets. It is optimized for generating brand-guidelines boards, logo systems, identity decks, and visual-world presentations.
It is specifically trained to handle various brand aesthetics including:
The skill focuses on intentional logo concepting, refined composition, sparse typography, and premium mockups using flexible grid layouts.
The gpt-taste skill transforms an LLM into an elite frontend design engineer focused on Awwwards-level design. It enforces high-end design principles including GSAP motion, AIDA page structure, and strict layout rules to avoid common LLM design biases (like narrow text containers or repetitive layouts).
Core Design Principles:
@gsap/react and ScrollTrigger for pinning, scrubbing, and hover physics.grid-flow-dense to ensure mathematically perfect, gapless layouts.minimalist-ui skill is a frontend engineering directive designed to generate highly refined, ultra-minimalist, "document-style" web interfaces. It is intended for creating high-end workspace platforms by enforcing a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with muted pastel accents. It explicitly rejects generic SaaS design trends like heavy shadows, gradients, and neon colors.The stitch-design-taste skill is a Semantic Design System Skill designed for Google Stitch. It generates DESIGN.md files that act as a single source of truth for prompting Stitch to create premium, non-generic user interfaces.
Instead of generic UI, it translates high-end frontend engineering directives into Stitch's native semantic design language—using descriptive natural-language rules paired with precise values (hex codes, typography specs, and component behaviors) that an AI agent can interpret to produce high-agency, professional designs.
When generating images featuring iPhone, Android, or generic phone mockups, ensure the presentation is clean and premium.
Key Requirements:
Multi-device compositions:
The image-to-code skill follows a strict visual-first methodology to ensure high-fidelity frontend implementation. The workflow must follow this sequence:
When to trigger image generation first: Always prioritize generating images before attempting to write code to avoid generic reinterpretations.
The Model Context Protocol (MCP) is an open standard for real-time, bidirectional connections between LLMs and external data sources. It transforms a model from a static knowledge store into a reasoning engine that operates on real-time data, reducing hallucinations and truncation caused by outdated training weights.
stdio (for local connections) or HTTP (for remote connections).The image-to-code skill is designed for high-fidelity website design and implementation (hero sections, landing pages, marketing sites, etc.). It follows a strict, three-step mandatory workflow to ensure visual quality and implementation accuracy:
Crucial Rule: Do not skip image generation or begin with freeform coding. The image is the design source; the code is the translation layer.
image generation first
deep image analysis second
implementation thirdA common failure mode is 'design drift', where the coded result becomes a generic template. To prevent this, follow the Design-to-Code Copy Discipline: preserve layout logic, spacing rhythm, section ordering, and component styles. Do not 'improve' the design by replacing it with a generic layout.
unleash, elevate, revolutionize, next-gen, or seamless. Avoid fake brand names like Acme, Nexus, or Quantumly.