Taste Skill — présentation et installation

GitHub

Découvrez les flux de conception frontend, de refonte et autres tâches pour agents du dépôt Taste Skill avant de choisir un Skill.

Cette page contient le README du dépôt, pas un SKILL.md installable. Choisissez un flux précis et examinez ses fichiers avant de l’installer.

Licence MIT du code sourceLecture et copie sans connexion.

Prévisualisez une page HTML fonctionnelle, puis appliquez ces techniques avec son code et le prompt fourni dans votre agent de programmation.

Framewise — Modèle HTML de landing page pour produit IA

Exercez la présentation du produit, la hiérarchie visuelle et une section d’accueil responsive.

Prévisualiser le modèle

Aster Hale — Modèle HTML de portfolio pour designer produit

Adaptez les services, les études de cas et le parcours de contact à votre activité.

Prévisualiser le modèle

Les Skills restent gratuites à lire et copier sans connexion. Les aperçus des modèles sont publics ; télécharger le code et le prompt fourni nécessite un compte et l’achat ou le forfait correspondant. Voir l’accès au code et les tarifs

Document de la compétence

Cette ressource est affichée dans sa langue d’origine.

Neruve catalog note — source and setup

This entry is the upstream project README, not an individual SKILL.md. The current v2 frontend skill is experimental; the repository also preserves v1. Select the specific skill you need rather than installing the entire collection.

Original source · Repository README · License

Archived 2026-10-12 at revision d237dd399d57524945c0c81327da5da19f7a468d. Original language retained. The upstream document starts below; relative Markdown links are resolved to the pinned repository and YAML frontmatter is displayed as code.


Portable Agent Skills that upgrade AI-built interfaces: stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs. This repo also includes image-generation skills for reference boards (web, mobile, brand kits). Pair them with ChatGPT Images or similar generators, then hand the frames to Codex, Cursor, or Claude Code for implementation.

Disclaimer

Taste Skill has no official token, coin, or crypto project. Any token using my name, image, or project is unaffiliated and not endorsed by me.

Feedback & Contributions

We would love your feedback. Suggestions and bug reports:

Installing

The npx skills add CLI scans the skills/ folder in this repo, so all skills below (code and image-generation) install the same way.

npx skills add https://github.com/Leonxlnx/taste-skill

Install a single skill by its install name (the name: field inside the SKILL frontmatter, not the folder name):

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

You can also copy any SKILL.md into your project or paste it into ChatGPT / Codex conversations.

Install as a Claude Code plugin

If you only use Claude Code, you can install the whole repo as a plugin from the included .claude-plugin/ manifests. Every skill is namespaced under taste-skill: (for example, /taste-skill:imagegen-frontend-web), so they won't collide with your other skills — no npx skills step required.

Run these inside Claude Code:

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

Run /plugin update later to upgrade installed plugins to new versions. Claude Code also checks for updates automatically at startup.

Updating from the previous version

The default taste-skill (install name design-taste-frontend) is now v2 (experimental), a substantial rewrite of the original v1. If you already have v1 installed, just re-run the install command and you will be upgraded:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

The install name did not change, so no script updates are needed. The newer SKILL.md replaces the older one in place.

If you depend on the exact behavior of v1 and want to pin to it explicitly:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

See CHANGELOG.md for the full v1 to v2 diff and the rationale.

Skills

Each skill does one job; you do not need all of them at once. Implementation skills output code. Image-generation skills output reference images only.

The Install name column is the exact value you pass to --skill.

Skill (folder)Install nameDescription
taste-skilldesign-taste-frontend🆕 v2 (experimental) - substantial rewrite of the default skill. Reads the brief, infers the design language, tunes three dials (VARIANCE / MOTION / DENSITY). Brief inference, design-system map, hard em-dash ban, canonical GSAP code skeletons, redesign-audit protocol, strict pre-flight check. Actively iterating toward v2.0.0 stable.
taste-skill-v1design-taste-frontend-v1The original v1 of taste-skill, preserved for projects depending on its exact behavior. Use only if the v2 default breaks something specific in your workflow.
gpt-tasteskillgpt-tasteStricter variant for GPT/Codex: higher layout variance, stronger GSAP direction, aggressive anti-slop.
image-to-code-skillimage-to-codeImage-first pipeline: generate site references, analyze them, then implement the frontend to match.
redesign-skillredesign-existing-projectsExisting projects: audit the UI first, then fix layout, spacing, hierarchy, styling.
soft-skillhigh-end-visual-designPolished, calm, expensive UI with softer contrast, whitespace, premium fonts, spring motion.
output-skillfull-output-enforcementWhen the model ships half-finished work: full output, no placeholder comments.
minimalist-skillminimalist-uiEditorial product UI (Notion/Linear vibes), restrained palette, crisp structure.
brutalist-skillindustrial-brutalist-uiHard mechanical language: Swiss type, sharp contrast, experimental layout.
stitch-skillstitch-design-tasteGoogle Stitch-compatible rules, including optional DESIGN.md export format.

Image generation skills

These produce design images only (no code). Use with ChatGPT Images, Codex image mode, or any agent that generates images.

Skill (folder)Install nameDescription
imagegen-frontend-webimagegen-frontend-webWebsite comps: hero, landing, multi-section with strong typography, spacing, anti-slop art direction.
imagegen-frontend-mobileimagegen-frontend-mobileMobile screens and flows: iOS/Android/cross-platform, mockups, readable type, coherent sets.
brandkitbrandkitBrand-kit boards: logo directions, palettes, type, identity applications across categories.

Which one should I use?

  • Start with taste-skill for the safest general default. (Now v2 experimental - see what changed in the CHANGELOG.)
  • If you depend on the exact behavior of the original taste-skill, install taste-skill-v1 instead.
  • Use gpt-taste when you want the stricter GPT/Codex-oriented rules and motion/layout enforcement.
  • Use image-to-code-skill for image → analyze → code website workflows.
  • Use redesign-skill to improve an existing codebase instead of greenfield styling.
  • Add soft-skill, minimalist-skill, or brutalist-skill when the visual direction is already chosen.
  • Add output-skill if the agent keeps truncating output.
  • Use imagegen-frontend-web, imagegen-frontend-mobile, or brandkit when the deliverable is images (comps, flows, identity boards), then pass results to your coding agent.

Image-first tip

For image-to-code-skill, state the pipeline in the prompt, e.g.: follow the skill: generate images, then analyze, then code.

ChatGPT Images and Codex

Attach or paste imagegen-frontend-web, imagegen-frontend-mobile, or brandkit and ask for the frames you need, then feed the renders to Codex, Cursor, or Claude Code. Use image-to-code-skill when you want one workflow that both generates references and implements the site in code.

Settings (taste-skill only)

Numbers at the top of the file are 1-10 dials:

  • DESIGN_VARIANCE: Layout experimentation (lower: centered/clean · higher: asymmetric/modern).
  • MOTION_INTENSITY: Animation depth (lower: hover · higher: scroll/magnetic).
  • VISUAL_DENSITY: Information per viewport (lower: spacious · higher: dense dashboards).

Examples

Created with taste-skill:

Support the project

If Taste Skill helps you, consider sponsoring:

Sponsor on GitHub

Open Source Supporters

Community Sponsors

Research

Background writing that shaped these skills lives in research/.

Common Questions

How is this different from other AI design skills?
Multiple specialized variants, adjustable dials in key skills, anti-repetition rules informed by dedicated research. All are framework agnostic across major coding agents.

Does it work with React, Vue, Svelte?
Yes. Rules target design intent, not a single framework API.

What is SKILL.md?
A portable instruction file agents can load automatically; install via npx skills add or by copying into a repo or conversation.

Do image-generation skills install with npx skills add?
Yes. They live under skills/ alongside the code skills so the same CLI discovers them.

License

MIT License · Copyright (c) 2026 Leonxlnx


License notice (archived upstream license)

MIT License

Copyright (c) 2026 Leonxlnx

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Chargement de la skill…