Taste Skill
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Install
npx skills add https://github.com/Leonxlnx/taste-skillAll skills in the repo
This is third-party code. Review the repository files before installing.
What it does
A set of skills that teach an agent to build interfaces with deliberate layout, typography, motion and density. The main design-taste-frontend skill reads the brief, infers a visual language and is tuned with three dials: DESIGN_VARIANCE, MOTION_INTENSITY and VISUAL_DENSITY. Other skills set a style (minimalist, brutalist, soft premium), handle redesigns or force full output. The imagegen-frontend-web, imagegen-frontend-mobile and brandkit skills produce reference images only.
Who it is for. Frontend developers and designers tired of generic AI-built interfaces.
Good fit when
- You are building a landing page or portfolio and want a non-template look
- You need to audit and redesign an existing UI
- You need screen references before implementing in Codex, Cursor or Claude Code
- The model truncates code with placeholders and you need full output
Not a fit when
- You need a strict corporate design system with no layout experiments
- The project is not a web interface
Example request
Build a landing page for our booking service with design-taste-frontend, DESIGN_VARIANCE 7, MOTION_INTENSITY 4Limitations
The v2 main skill is marked experimental, and design-taste-frontend-v1 preserves the old behavior. Image generation skills do not write code and need an image generator such as ChatGPT Images.
How to disable. Delete the skill folder from your agent's skills directory, for example .claude/skills or .agents/skills.
Security check
- Skills are markdown instructions
README in short
Taste Skill is a set of portable Agent Skills for better AI-built interfaces, MIT licensed. It has implementation skills that output code and image generation skills for references. All install via npx skills add, and a single skill is selected by its install name. The README includes a guide on which skill fits which task and the main skill's settings.
SKILL.md
--- name: brandkit description: Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts. --- # BRANDKIT IMAGE GENERATION SKILL You are an elite brand identity art director, logo designer, visual-system strategist, and presentation designer. Your job is to generate premium brand-kit images that feel like they came from a serious identity studio. The output must feel: - intentional - premium - minimal - coherent - strategic - visually expensive - brand-system driven - presentation-ready Do not generate generic logos. Do not generate random mockups. Do not generate messy AI moodboards. Create a complete brand world in one image. --- # REFERENCE STYLE DNA The desired visual quality is inspired by premium brand-guidelines decks with: - dark charcoal outer canvas - clean grid-based presentation boards - strong gutters between panels - restrained visual density - very sparse typography - large negative space - cinematic brand atmosphere - simple but memorable logo marks - UI mockups used as brand applications - browser chrome / app headers / terminal frames - image-led panels with subtle overlays - halftone, grain, scanline, or print texture - geometric construction diagrams - small labels and page-number details - muted but powerful accent colors - logo repeated across multiple touchpoints - one strong brand idea per board The references are not a fixed style. They define the quality bar, restraint, and presentation logic. --- # CORE PRINCIPLE A premium brand kit is not decoration.
FAQ
How do I get the v1 behavior back?
Install the skill named design-taste-frontend-v1, which is preserved as is.
What name goes into the --skill flag?
The name field from the SKILL.md frontmatter, not the folder name. For the taste-skill folder it is design-taste-frontend.
Related
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys
A skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
An open-source Claude Design alternative that builds prototypes, decks, dashboards and video through your local agents