How to set up designlang in Claude Code and Codex

designlang is a free, open-source tool that opens a site in a hidden browser and records its colors, fonts, spacing and button styles. It saves them as files your AI can read, including a DESIGN.md that sums up the whole look.

Give that file to Claude Code or Codex, and your AI has your style to follow when it builds new pages.

You need Node.js 20 or newer. You don't install anything first, because npx downloads it and runs it in one go. Inside your project folder, run:

npx designlang https://yoursite.com

It saves its files in a design-extract-output folder in your project. To get its slash commands in Claude Code, paste these two lines in a Claude Code chat:

/plugin marketplace add Manavarya09/design-extract

/plugin install designlang@designlang

Open your project in Claude Code or Codex and paste one of these, with your own address:

Use npx designlang to read the design of https://yoursite.com and save the DESIGN.md it makes in this project.

Run npx designlang slop https://yoursite.com and tell me which parts of my site look generic.

Use npx designlang verify-ui to check my local preview against DESIGN.md at phone and desktop sizes, and list what doesn't match.

Only copy the look of sites you own or have the right to use. designlang saves style settings, not the pages themselves, but a brand's look can still belong to that brand.

Its scores are its own reading. On our own site, checked against the DESIGN.md it had just written, it still flagged our heading font, so check what it lists before you change anything.