explaingit

jaytel0/taste

27TypeScriptAudience · vibe coderComplexity · 3/5Setup · moderate

TLDR

A pipeline that analyzes a set of reference design images using vision AI models and produces a SKILL.md instruction file that guides AI coding agents to match that visual style.

Mindmap

mindmap
  root((Taste))
    What it does
      Converts images to design rules
      Outputs SKILL.md for AI agents
      Runs locally or hosted
    Pipeline Stages
      Index and deduplicate images
      Analyze with vision models
      Fuse and chunk notes
      Write final skill file
    Tech Stack
      TypeScript
      OpenAI
      Anthropic
      Vercel
      Postgres
    Audience
      Vibe coders
      AI-assisted developers
      Design-focused builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Convert a folder of design screenshots into a SKILL.md that you attach to an AI coding session to keep generated UI consistent with your visual preferences.

USE CASE 2

Extract repeatable design rules from a reference set and use them to guide an AI agent building a new frontend from scratch.

USE CASE 3

Run the local pipeline privately with your own images without using the hosted web app or any cloud storage.

Tech stack

TypeScriptOpenAIAnthropicVercelPostgres

Getting it running

Difficulty · moderate Time to first run · 30min

Requires OPENAI_API_KEY and ANTHROPIC_API_KEY (or an OpenRouter key), run npm install then npm run taste with images in reference-images/.

No license specified, all rights are reserved by default, meaning you cannot reuse or redistribute the code without the author's permission.

In plain English

Taste is a tool that looks at a collection of reference images and produces a written style guide, stored as a file called SKILL.md, that an AI coding assistant can follow when generating interfaces. Instead of describing your design preferences in words, you show the AI examples of what you like, and it extracts the patterns itself. The pipeline works in five steps. You drop JPG, PNG, or WebP images into a folder. The tool indexes them, removes duplicates, and assigns each one an identifier. Then two AI vision models analyze each image independently, looking only at visual details like layout, spacing, color use, typography, and density, deliberately ignoring what the app in each image actually does. The notes from both models are merged into one synthesized description per image. Those descriptions are grouped into chunks, and each chunk is distilled into a set of design rules. A final writing step turns those rules into concrete, specific instructions rather than vague aesthetic labels. The output might say things like "use neutral sans-serif typography" and "keep accent color localized" instead of "make it look premium." You can run the full pipeline locally with a single command after setting API keys for OpenAI and Anthropic. The result lands in a timestamped folder in your project. There is also a hosted web demo at taste.jaytel.com, which uses a database and cloud storage to run the same pipeline in a browser without any local setup. The repository is a TypeScript monorepo with a web frontend, a reusable AI package for prompting and provider handling, and a scripts folder for the local pipeline runner. It supports routing through AI gateway services like OpenRouter as an alternative to direct provider keys. The production web app adds Vercel hosting, Postgres for workflow state, and Vercel Blob for artifact storage. The repository includes comparison screenshots where agents with and without a Taste-generated skill produced dashboards and chat interfaces, showing the difference in visual consistency. No license is specified in the repository.

Copy-paste prompts

Prompt 1
I cloned the Taste repo. Walk me through setting OPENAI_API_KEY and ANTHROPIC_API_KEY in .env.local and running npm run taste to generate a SKILL.md from my screenshots.
Prompt 2
How does Taste merge the notes from two separate vision models into one synthesized note per image in the packages/ai/ package?
Prompt 3
How do I point the Taste pipeline at a different folder of images or use a different AI provider like OpenRouter?
Prompt 4
Show me how the rule-synthesis stage in Taste reduces image notes into the final SKILL.md and what the chunking and merging steps look like.
Prompt 5
I have a generated SKILL.md from Taste. How do I attach it as context in a Cursor or Claude coding session so the agent follows the design rules?
Open on GitHub → Explain another repo

← jaytel0 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.