AcademySkillsDesign and media

design-dna

Design and product teams that want new screens to match the look of a reference interface.

  • Recommendedour rating
  • 1,937gitHub stars
  • MITlicence
  • 44 days agolast update
git clone https://github.com/zanwei/design-dna.git
README.md

Loading the file...

What it does

Turns reference interfaces, such as images, screenshots or URLs, into a structured Design DNA file in JSON. It records design tokens, the qualitative style and visual effects, then uses that file to generate new UI from your own content in the same look.

Use cases

  1. 01Capture the style of a competitor screenshot as tokens
  2. 02Generate a page from your copy in a reference style
  3. 03Keep a shared style file for a whole team

Questions about
design-dna.

What is design-dna used for?

Design and product teams that want new screens to match the look of a reference interface. Turns reference interfaces, such as images, screenshots or URLs, into a structured Design DNA file in JSON. It records design tokens, the qualitative style and visual effects, then uses that file to generate new UI from your own content in the same look.

How do I install design-dna?

Run this in your terminal: git clone https://github.com/zanwei/design-dna.git

Is design-dna open source?

Yes. The code is on GitHub (zanwei/design-dna) under the MIT licence.

Is design-dna safe to use?

It passed our automatic scan for credential theft, hidden instructions and risky install commands. Third party open source software. Sabemos AI does not maintain it. Check the code and permissions before you connect it to company data.