explaingit

pxx-design/cabinet

Analysis updated 2026-05-18

20HTMLAudience · vibe coderComplexity · 2/5LicenseSetup · moderate

TLDR

A browser based inspiration library that breaks design references into named, reusable techniques a coding AI agent can apply to your own project.

Mindmap

mindmap
  root((Cabinet))
    What it does
      Breaks images into facets
      Feeds facets to a coding agent
      No backend, browser only
    Tech stack
      HTML
      JavaScript
      Python
      Claude Code
    Use cases
      Save design references
      Ingest reusable techniques
      Translate a facet to your product
      Build a personal facet library
    Audience
      Designers
      Vibe coders

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

What do people build with it?

USE CASE 1

Break a design screenshot down into reusable techniques instead of copying it wholesale.

USE CASE 2

Build a personal library of named design moves you can reference across projects.

USE CASE 3

Hand a coding agent precise, named techniques instead of a vague style request.

USE CASE 4

Translate a saved technique into a concrete change for whatever product you are currently building.

What is it built with?

HTMLJavaScriptPythonPillowClaude Code

How does it compare?

pxx-design/cabinetdatcc8a-max/nhom_4_quan_an_fusiongavrielp1/salary-2045
Stars202020
LanguageHTMLHTMLHTML
Setup difficultymoderateeasyeasy
Complexity2/52/52/5
Audiencevibe codergeneralpm founder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires Claude Code (or a compatible agent), a Chromium based browser, and Python 3 with Pillow installed.

The code and technique text are MIT licensed, free to use for any purpose. The bundled sample images have a separate notice covering their use.

In plain English

Cabinet is a browser based inspiration library aimed at designers and vibe coders who look at a design and feel something they cannot quite name, then struggle to get an AI coding tool to recreate that feeling. Instead of just saving pretty screenshots to a mood board, Cabinet tries to break a reference image down into named, reusable techniques it calls facets, things like a soft gradient, a photo backed interface, or a specific prop style, so those techniques can be handed to a coding agent as precise instructions rather than asking it to copy the whole image. The tool runs entirely in the browser with no backend server. It works alongside Claude Code or another coding agent that can read its ingest rules file. You paste or drop a reference image into the page, click a button to add it to your library, and the agent reads the image and writes out the techniques it finds, including what the technique is called, where it appears in the image, why it works, and how to describe it to an AI. Later, in any project, you select which techniques you want and the agent reads them alongside the context of what you are actually building, drafts a translation of how to apply them, and waits for your approval before touching any code. The project deliberately avoids full image prompts or pasting exact colors, since the goal is transferring a technique rather than copying a picture outright. Setup involves cloning the repository and running an install script, which sets up the ingest and translate commands for Claude Code, and on macOS also installs a watcher that processes new images automatically. On other systems you trigger ingestion manually. The interface itself needs a Chromium based browser like Chrome or Edge, since it relies on the File System Access API to read and write files on disk, plus Python 3 with the Pillow library for measuring images during ingestion. The project ships with six example reference images so the library is not empty on first use, and it is licensed under MIT for the code and technique text, with a separate notice covering the bundled sample images.

Copy-paste prompts

Prompt 1
Explain how Cabinet's facet system avoids just copying a reference image outright.
Prompt 2
Walk me through installing Cabinet and ingesting my first design reference.
Prompt 3
How does the /translate command in Cabinet apply a saved technique to my own project?
Prompt 4
What browser and tools does Cabinet require to run, and why does it need Chromium specifically?

Frequently asked questions

What is cabinet?

A browser based inspiration library that breaks design references into named, reusable techniques a coding AI agent can apply to your own project.

What language is cabinet written in?

Mainly HTML. The stack also includes HTML, JavaScript, Python.

What license does cabinet use?

The code and technique text are MIT licensed, free to use for any purpose. The bundled sample images have a separate notice covering their use.

How hard is cabinet to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is cabinet for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.