Paperclip

• 

  Screenshot of UI tools

• 

  responsive testing

NOTE: I've been working on this for over a year.

Inspiration

Webflow, Bret Victor's talk: inventing on principle

Developers suck at translating designs to code, and designers need tools that allows them to make changes to code themselves in an easy-to-use interface.

What it does

Paperclip works with presentational components - just HTML & CSS, that can compile down to vanilla code (React for now, but it can be compiled to any target). UI tooling is available for designers that allows them to make visual adjustments.

How we built it

Mix of JavaScript (UI tools) and Rust (compiler & evaluator).

Challenges we ran into

Social issues. What do designers want? What do engineers want? Trying to thread the needle with UI tooling that solves a particular class of problem that both engineers and designers are comfortable with. This is still a WIP.

Accomplishments that we're proud of

Validating Paperclip with a larger team.

What we learned

• Even with a faster way to build UIs, engineers still do a poor job translating designs to code
• Designers need an online editor and are unwilling to mess around with GIT

What's next for Paperclip

• Online Webflow-like editor for designers that connects to GitHub repositories.
• More tooling that allows designers to be part of the UI development + QA process.
  • Designers can be code owners of PC files and pulled into PR reviews whenever design files change + open Paperclip up in an online editor and make changes directly
  • commenting functionality for elements layers for designers (for those that don't want to tweak UIs and just want to communicate with developers about what needs to change)
  • visual regression tools that allow designers & developers to see what changed
• More compiler targets: PHP, Ruby, Python, etc.

Built With

• react
• rust
• typescript