Sign In
Share:

Open-source agent skill (design-taste-frontend) that gives coding agents an art direction, real pictures and a browser check so landing pages look less generic.

Security Reviewed

Instructions plus local Node scripts that launch a headless browser, fetch pictures from public collections and write to the project and ~/.taste-skill; no API keys needed.

What it looks like in Antigravity 2.0

WorksInstalled with Option 1 and worked, using its Node scripts: it downloaded real public-domain photos, built the page, then checked it in headless Chrome at 3 widths until 0 fails. About 15 minutes, no questions asked.Run by us on 2026-10-14 ยท desktop app, Gemini 3.8 Flash (High), Windows

Larkhall Hearth bakery one-page site built by Antigravity with the Taste skill: dark hero with arched baker photo
What you get: the bakery site it built, as the skill's own browser check captured it at 1440 px.
Bakery menu section with loaf photos, descriptions and prices
Further down: the daily-bake menu with real photos it downloaded.

How to get this result, step by step

  1. 1Open your project folder in Antigravity, start a new conversation and paste the install message. Press Enter.

    Install the "Taste" skill for Google Antigravity.
    Follow the steps at https://www.antigravityskills.org/install/taste-skill.md (source: https://github.com/Leonxlnx/taste-skill/tree/main/skills/taste-skill).
    Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
    Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.
    Antigravity 2.0 chat box with the Taste skill install message pasted in
  2. 2The agent lists the Node scripts it brings (needs Node 22+ and Chrome or Edge) and waits. Reply "OK".

    OK
    Antigravity agent listing the Taste skill's Node.js scripts and their requirements
  3. 3Check it is installed: in a new conversation type /taste. It shows up as design-taste-frontend.

    /taste
    Antigravity slash menu showing design-taste-frontend after typing /taste
  4. 4Ask for the site and name the skill by its listed name.

    Use the design-taste-frontend skill to build a one-page site for a small neighbourhood bakery. List what is unique to this client first, draw a direction, then check the page in the browser at three widths.
    Antigravity chat box with the bakery prompt for the design-taste-frontend skill
  5. 5It searches public picture archives, downloads photos, then checks the page in a hidden browser. Just wait.

    Antigravity running the Taste skill's asset search and headless browser inspection
  6. 6Its check report: headline, type sizes and colours measured at 3 widths, 0 fails.

    Taste skill inspect report showing 0 FAIL, 0 WARN at three widths
  7. 7Done: index.html, style.css, main.js and assets/ with picture credits. Open index.html in a browser.

    Antigravity summary listing downloaded Wikimedia Commons pictures with licences and the project files
Full test log

Install method: Option 1 (pasted the agent prompt into a new conversation in an empty project folder).

  1. The agent read the install page and the GitHub folder, then said the skill includes executable Node.js scripts (draw.mjs, inspect.mjs, assets.mjs, lint.mjs plus lib/), that they need Node.js 22+ and Chrome or Edge, and that assets.mjs downloads public-domain pictures. It planned a git clone into a temp folder and a copy into .agents/skills/taste-skill, and waited. We replied OK.
  2. After installing it checked the app's settings and confirmed the skill. Its name in Antigravity is design-taste-frontend (folder taste-skill). Typing /taste in a new conversation finds it.
  3. With the example prompt from this page, the agent first searched ~/.gemini for the skill, then read SKILL.md, checked the Node version and Chrome path, and ran draw.mjs to pick a direction (it saved .taste-skill/direction.json).
  4. It ran assets.mjs four times (bakery oven, mill and grain, sourdough loaf, wood-fire video) and saved 6 photos and engravings plus a short wood-fire video clip from Wikimedia Commons into assets/, with credits.json and credits in the page footer.
  5. It wrote index.html, style.css and main.js (+1,618 lines), ran inspect.mjs in headless Chrome at 1440, 768 and 390 px, fixed sizes it flagged and re-ran until the report said "0 FAIL, 0 WARN". The screenshots it took are in .taste-skill/inspect/.

What we corrected on this page

  • Our check step and FAQ said to type /skills; the 2.0 app has no such command and the skill is listed as design-taste-frontend. Changed to /taste.
  • Unlike frontend-design or impeccable it produces 3 files plus about 7 MB of full-size photos in assets/ (not compressed), and loads its font from Fontshare. Compress the photos before you publish.
  • The bakery's name, address, prices and history are invented by the agent. The photos are real (public domain / CC BY and CC BY-SA, credited).

Install Taste in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent
Install the "Taste" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/taste-skill.md (source: https://github.com/Leonxlnx/taste-skill/tree/main/skills/taste-skill).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself
  1. 1. Clone the repository
    git clone --depth 1 https://github.com/Leonxlnx/taste-skill /tmp/taste-skill

    Download the repo to a temporary folder.

  2. 2. Copy the skill folder into your workspace
    mkdir -p .agents/skills && cp -r /tmp/taste-skill/skills/taste-skill .agents/skills/taste-skill

    Run from your project root. Copy the whole folder, not only SKILL.md: the scripts/, references/ and library/ folders are used by the instructions.

  3. 3. Or install it globally
    mkdir -p ~/.gemini/config/skills && cp -r /tmp/taste-skill/skills/taste-skill ~/.gemini/config/skills/taste-skill

    Makes the skill available in every project.

  4. 4. Check that Antigravity sees it

    In the Antigravity app type /taste in a new conversation (the CLI has /skills) and look for design-taste-frontend.

The repo README does not document Antigravity. This is the standard SKILL.md folder placement. The scripts need Node 22+ and Chrome, Edge or Chromium; picture search needs network access.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Taste?

Taste Skill is a set of Agent Skills by Leonxlnx whose default skill (install name design-taste-frontend, folder skills/taste-skill) tells a coding agent how to design a public web page instead of assembling the average landing page. The README says it gives the agent an art direction, real pictures and a way to check its own work in a real browser. It is meant for landing pages, marketing sites, portfolios and product pages in any stack; the README says it is not for dashboards or app screens.

How to use Taste?

Put the skill folder in your Antigravity skills directory and ask for a page or a redesign; the SKILL.md description tells the agent to load it for landing pages, hero sections and pages that look generic or AI-made. The agent then follows the run described in SKILL.md: read the brief, write the argument, draw a direction with scripts/draw.mjs, build, inspect in a browser and fix.

Key features of Taste

  • โœ“A script (scripts/draw.mjs) deals three of 20 researched design directions and the agent picks one that fits the subject
  • โœ“A library for the draw: 56 palettes, 44 type systems, 48 hero compositions, 172 section compositions and 11 motions (counted in library/*.json)
  • โœ“A "house style" that bans gradients, resting shadows, glass panels, icon-topped feature cards and violet/indigo palettes, checked by scripts/lint.mjs and scripts/inspect.mjs
  • โœ“scripts/inspect.mjs opens the page in a headless Chrome, Edge or Chromium and checks it at three widths
  • โœ“scripts/assets.mjs searches open collections (Openverse, Wikimedia Commons, Met, Art Institute of Chicago, Internet Archive, NASA) and records the credit for each picture it downloads
  • โœ“Eight job-specific sibling skills in the same repo (redesign, image-to-code, soft, minimalist, brutalist, stitch, output enforcement, GPT variant)

When to use Taste

  1. 1Building a new landing page or portfolio that should not look like a template
  2. 2Restyling a page that looks generic or "AI-made"
  3. 3Reviewing an existing page against a written list of generated-page tells (references/tells.md)
  4. 4Picking a distinct visual direction before writing any code

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure Taste in your development environment.

Step 1: npx skills CLI (README)claude
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Installs the default skill with the npx skills CLI. Drop --skill to install every skill in the repo.

Step 2: Claude Code plugin (README)claude
/plugin marketplace add Leonxlnx/taste-skill

Then run /plugin install taste-skill@taste-skill inside Claude Code.

Step 3: Codex plugin (README)codex
codex plugin marketplace add Leonxlnx/taste-skill

Then run codex plugin add taste-skill@taste-skill and start a new Codex session.

Usage Example & Verification

Prompt / Request Example
Illustrative: "Use the design-taste-frontend skill to build a one-page site for a small neighbourhood bakery. List what is unique to this client first, draw a direction, then check the page in the browser at three widths."

Security Review

Static review
Reviewed Date
2026-10-07
Audited Ref / Commit
a60a36dc2bb3bb77ccf17f2f62041f5ca8a458b9
Reviewer
antigravityskills.org (static code review)

Instructions plus local Node scripts that launch a headless browser, fetch pictures from public collections and write to the project and ~/.taste-skill; no API keys needed.

Full review: scope, findings, risks
Audit Scope:Cloned Leonxlnx/taste-skill at commit a60a36dc2bb3bb77ccf17f2f62041f5ca8a458b9 (2026-10-13). Read README.md, CHANGELOG.md, install.sh, skills/taste-skill/SKILL.md, the library/*.json files (counted), and grepped scripts/*.mjs and scripts/lib/*.mjs for network, process and file-write calls.
Key Findings:Folder skills/taste-skill holds SKILL.md, 9 reference .md files, 8 JSON library files, 2 asset files (base.css, base.js) and 7 .mjs scripts (draw, lint, inspect, assets, lib/cdp, lib/probe, lib/rules). assets.mjs fetches from Openverse, Wikimedia Commons, Met, Art Institute of Chicago, Internet Archive and NASA and writes downloaded pictures and a credits file. cdp.mjs spawns a headless Chrome/Edge/Chromium with a temporary user-data-dir and removes it afterwards. draw.mjs writes a sheet to the project and a history file at ~/.taste-skill/history.json (or TASTE_SKILL_HISTORY).
Identified Operational Risks & Permissions:Runs local scripts and a headless browser when the agent follows it; downloads third-party images (licence filter described in README, not verified by us); static review only, nothing was executed.

We cloned Leonxlnx/taste-skill at commit a60a36dc2bb3bb77ccf17f2f62041f5ca8a458b9 and reviewed skills/taste-skill statically. The skill is SKILL.md plus references, JSON libraries and seven Node scripts. scripts/assets.mjs makes HTTPS requests (fetch) to api.openverse.org, commons.wikimedia.org, collectionapi.metmuseum.org, api.artic.edu, archive.org and images-api.nasa.gov and writes downloaded media and a credits file with writeFileSync. scripts/lib/cdp.mjs uses child_process spawn to start headless Chrome/Edge/Chromium with --remote-debugging-port=0 and a temporary profile that it deletes. scripts/inspect.mjs serves the project over a local 127.0.0.1 HTTP server for the check. scripts/draw.mjs writes a sheet under the project and a history file under ~/.taste-skill. We found no environment-variable secrets (only the optional TASTE_SKILL_HISTORY path), no eval of remote code and no credentials. Static review only; we did not run the scripts.

Operational Notes & Known Limitations

Known Limitations

  • โ€ขScripts need Node 22+ and an installed Chrome, Edge or Chromium (SKILL.md, README "Common Questions")
  • โ€ขscripts/assets.mjs needs network access to fetch pictures; SKILL.md says it uses no API keys
  • โ€ขREADME: not for dashboards or app screens; use minimalist-skill or soft-skill for product UI
  • โ€ขREADME says a build takes roughly 30 to 45 minutes and a few hundred thousand tokens, so it is a heavy skill for small edits
  • โ€ขWritten for a general agent; Antigravity is not mentioned in the repo docs, so the Antigravity steps here are the standard SKILL.md folder placement

Frequently Asked Questions

Is the Taste Skill safe?

In our static review at commit a60a36d it is instructions plus Node scripts under skills/taste-skill/scripts/. They write files in the project and your home folder, start a local headless browser, and fetch pictures from public collections. We found no API keys, eval or shell-out other than launching the browser. Static review only; we did not run it.

How do I install Taste Skill in Antigravity?

Clone Leonxlnx/taste-skill and copy skills/taste-skill into .agents/skills/ (project) or ~/.gemini/config/skills/ (global), then type /taste in a new conversation: the skill shows up as design-taste-frontend. The README documents npx skills, Claude Code and Codex instead.

Which Taste Skill folder do I need?

The default is skills/taste-skill (install name design-taste-frontend). The repo also keeps the older v1 and v2-experimental skills and eight job-specific skills; README lists each.

Does Taste Skill work for dashboards?

The README says no: the default skill is for public-facing pages. It points to minimalist-skill or soft-skill for product UI.

Does it need an API key?

No. SKILL.md and the README say it uses no API keys. It does need Node 22+ and a Chrome-family browser, and network access to find pictures.

Supported Platforms

antigravityclaudecursorcodex

Choosing between UI skills? We installed Impeccable, Frontend Design, Taste Skill and Claude Design in Antigravity 2.0 and put the results side by side: Impeccable vs Frontend Design vs Taste Skill.