Scaffolds OpenUI agent apps, mints Cloud API keys and turns component libraries into model prompts.
Designlang
manavarya0909 · Template
Designlang reads a live website and extracts its design language: colours, typography, spacing, layout, interaction states, motion and component structure. It writes design tokens, a Tailwind theme, shadcn theme variables, Figma variables and typed React stubs, plus a markdown description and prompts for AI tools. It can clone a site into a Next.js starter, check a live site for drift against your tokens in CI and expose the design to MCP-aware agents. It suits people who need a site's styling as code or as context for AI tools.
Written by ooruby from the README of designlang 13.3.2.
Not claimed by its maker. Is this yours? Prove it and answer the findings
Why it's useful
Your theme files, design brief and AI prompts come from the real styles on a live site instead of being rebuilt by hand.
What you could do with it
- Point it at a live site to get design tokens and a Tailwind theme you can drop into your own project.
- Give an MCP-aware agent the extracted tokens, components and contrast pairs to build from.
- Run the drift check in CI to compare a live app with your token file and fail when they differ.
Written from its documentation: what it says it can do, not what our checks found.
Maintenance
Not measuredNo release date is on record for this package yet. The nightly publisher check records one as it reaches each npm package, about once every ten nights.
Release activity only: it says nothing about quality or safety, and a finished small package can be fine without releases. How it is measured
- Command execution is bounded
- inventory
- node child_process (src/replay.js:12)
- synchronous shell execution (src/replay.js:16)
- synchronous shell execution (src/replay.js:23)
- node child_process (bin/design-extract.js:1388)
- An inventory of where the code starts another program, not a verdict on this row: whether each one runs a fixed program or whatever it is handed takes a reading by hand.
Published because it was found. A finding is information about where the limits are, not a verdict that the software is unsafe.
What this does not cover
- Everything. Treat it as you would software from anywhere else.
Receipt history: every signed receipt for every version of this listing, and what changed between them.
In its maker's words
Extract the complete design language from any website and ship it — clone to a working Next.js starter, guard tokens with a CI drift bot, or browse everything in a local studio. Outputs W3C DTCG tokens, motion tokens, typed anatomy stubs, Tailwind config,
Compare with
Compare all 4How far this has been checked
Static scanned
- What it establishes
- Its published package, or for a hosted server its source repository at a recorded commit, was read file by file, without running it, by every check in our current scan.
- What it does not
- How it behaves when it runs, or anything the scan does not read yet: several rubric checks, the repository's history, and compiled code in folders named dist or build. For a hosted server, that the endpoint runs the code that was read. The ooruby Index sets out exactly what was read.
- Exactly what was read
- Version 13.3.2, the file with digest sha512-gMMZYvFSl5bIqj/2Xp8SIYPeDTsnsa+ur75bQBeS5jKsHE9+VNWNJuAWImSRYrAPgvzGA1qhw7sz56lG8vHjRw==, as the registry publishes it. A published version cannot be replaced, so this names the same bytes for anyone who checks.
- Authentication
- Runs locally. No hosted endpoint is listed for this package. You run it on your own machine, so there is no endpoint of ours to authenticate against.
Adding it
Run it with:
npx -y designlang@13.3.2Pinned to 13.3.2, which is the version the findings above were found in. Drop the version to take whatever is newest, and the report on this page stops describing what you installed.
Where this came from
- Registry
- npm
- Package
- designlang
- Version read
- 13.3.2
- Resolved
- 2026-10-10
Built from source, attested
npm publishes a signed statement that this exact package was built from the repository below, at this commit. It is verifiable without taking our word for it.
- Repository
- github.com/manavarya09/design-extract
- Commit
- 49f138715716
- Built by
- github.com/actions/runner/github-hosted
- Registry publish attestation
- signed by npm · 2026-10-10
- Checked
- 2026-10-10
The badge, if this is your listing
It renders the current rung (static scanned) and links back here, where what that does and does not establish is one click away. It updates itself as the evidence deepens.
[](https://ooruby.com/market/designlang)About this listing
- Kind
- Template
- Category
- Developer tools
- Pricing
- Free
- Sandbox
- No
- Hosted
- No
- Updated
- 2026-10-07
Similar templates
All templatesCreates a new Mastra app with one command and helps you set up example agents and a model provider.
Scaffolds a new Tangle agent application with either a tool loop or a complete chat interface.
Verification records what our published tests found on a specific version at a specific date. It is not a warranty, and it does not certify that software is free of defects.