gitwtfhub

wtf is avocode?

keppelen/avocode — explained in plain English

Analysis updated 2026-08-13 · repo last pushed 2015-11-19

Audience · developerComplexity · 1/5DormantSetup · easy

TL;DR

Avocode lets developers inspect design files and extract CSS, SVGs, images, fonts, and color values without opening Photoshop or Sketch. This repo is for bug reports and feature requests.

Mindmap

mindmap
  root((repo))
    What it does
      Extract CSS from designs
      Export images and SVGs
      Grab font details
      Get color values
    For developers
      Front-end developers
      Engineering teams
      No design software needed
    Use cases
      Design handoff to code
      Review designs without licenses
      Export design assets
    Repository purpose
      Report bugs
      Request features
      Chelog on separate site

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

Why would anyone build with this?

REASON 1

Extract exact CSS, hex codes, and font details from a designer's mockup to build the page in code.

REASON 2

Export image assets and SVGs from a design file without owning a Photoshop or Sketch license.

REASON 3

Review and inspect design files handed off by designers so engineers can implement them accurately.

How it stacks up

keppelen/avocode000madz000/rfid-attendance00kaku/gallery-slider-block
LanguageTypeScriptJavaScript
Last pushed2015-11-192024-07-222021-05-19
MaintenanceDormantDormantDormant
Setup difficultyeasyeasyeasy
Complexity1/52/52/5
Audiencedeveloperdevelopergeneral

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

How do you spin it up?

Difficulty · easy Time to first run · 5min

This repo is for bug reports and feature requests only, not the application itself, no setup or installation is needed.

No license information is provided in this repository.

Wtf does this do

Avocode is a tool that lets developers grab everything they need from a design file, CSS code, SVG graphics, image assets, fonts, and color values, without having to open Photoshop or Sketch. Think of it as a bridge between designers and developers: designers create the visuals in their preferred software, and developers use this tool to inspect those designs and pull out the exact code and assets they need to build the interface. At a high level, it works by letting you open and explore design files in a format developers can easily work with. Instead of needing expensive design software just to see what a button looks like or what color was used, you can inspect the design directly, copy the relevant CSS, export images, and grab font details. The README doesn't go into technical detail about how the underlying system works, but the value proposition is straightforward: it removes the dependency on design software for developers who just need to extract usable information from a design. This would be used primarily by front-end developers and engineering teams who work closely with designers. For example, if a designer hands off a website mockup, a developer can open it in Avocode to get the exact hex codes, font families, spacing measurements, and exportable image files needed to build that page in code. It's also useful for teams where not everyone has a Photoshop or Sketch license but still needs to review or implement designs. This repository itself isn't the application code, it exists primarily as a place for users to report bugs and request new features. The actual product is maintained separately, and release notes are published on a dedicated changelog site. Users who find issues are asked to report them with specific details including steps to reproduce, expected versus actual results, and screenshots.

Yoink these prompts

Prompt 1
I have a design file from my designer but I don't have Photoshop or Sketch, how do I extract CSS, colors, fonts, and image assets from it using Avocode?
Prompt 2
Help me set up a design handoff workflow where my designer creates mockups and I use Avocode to inspect the design and pull out hex codes, spacing measurements, and exportable images for front-end development.
Prompt 3
What specific information should I include when filing a bug report in the Avocode GitHub repo so the maintainers can reproduce and fix the issue quickly?
Prompt 4
My team needs to implement a website mockup from our designer, walk me through how to use Avocode to get the exact font families, color values, and CSS needed to build the page.

Frequently asked questions

wtf is avocode?

Avocode lets developers inspect design files and extract CSS, SVGs, images, fonts, and color values without opening Photoshop or Sketch. This repo is for bug reports and feature requests.

Is avocode actively maintained?

Dormant — no commits in 2+ years (last push 2015-11-19).

What license does avocode use?

No license information is provided in this repository.

How hard is avocode to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is avocode for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.