Matchstick

Matchstick

Visually compare your code and designs.

2 followers

Visit website
Matchstick is a tool for designers and developers that highlights missing design details from your website. Matchstick was built to help improve design handoffs. It makes any misplaced pixels stick out and produces an image that can be shared with your team.
Matchstick gallery image
Matchstick gallery image
Launch tags:
Design Tools•Developer Tools
Launch Team

What do you think? …

Niko Lazaris
Maker
Hey PH, We originally created Matchstick on StartupBus, a startup competition from New York to New Orleans. After four wild days hacking together an MVP, we took home first place and some bragging rights. 🏆 We recently dug it back up from the GitHub graveyard, completely rebuilt it, and made it a free resource for product teams. That's how https://matchstick.xyz was born. Why Matchstick? As a developer, it is often very tough to pick up on all the design details within mockups that have been given to me. Once, a designer pulled up and sat next to me pointing out everything that needed fixing. That is not a unique experience. Designers and developers often come up with their own process for this design handoff. We built Matchstick to give both designers and developers a tool to help them along. Hope you enjoy it! 🙌
Frank Adler
@nikolazaris Looks like there is some dev version deployed, doing calls against a localhost:5000 endpoint ;)
Niko Lazaris
Maker
@adfr Ah fantastic! Looks like the environment variables changed as I deployed updates... Should be fixed thanks!
Matt Condon
this is so well polished, love the details!
Niko Lazaris
Maker
@mattgcondon that means a ton coming from you ❤️
Matt Scott Barnes
would you ever make this figma plugin?
Niko Lazaris
Maker
@mattscottbarnes yeah ill consider it