Reverse design

Skill mojomoth/design-lens/plugin/skills/reverse-design

Clone reference designs, reverse-engineer the design thinking, customize conversationally — a design plugin for Claude Code, Codex, Cursor, and OpenCode.

Install

npx -y skills add mojomoth/design-lens --skill reverse-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

27 days oldThe repository was created 27 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Reverse-engineer a reference site's design like a senior designer — WHY it was designed this way — producing DESIGN.md and VARIATIONS.md. Use when the user asks to analyze a design, extract a style guide or design system from a site, or asks why a site looks good.

SKILL.md

3.6 KB, 823 tokens by cl100k_base, as published. Nobody here has run it

Before anything else, verify the CLI is available: run ~/.design-lens/bin/design-lens --version. If that file is missing, the plugin bootstrap has not run: ask the user to restart the session (a SessionStart hook provisions the runtime), or locate the installed plugin directory with claude plugin list (Claude Code) or codex plugin list (Codex) and run bash <plugin-dir>/scripts/bootstrap.sh, then retry. If design-lens was installed without a plugin system (for example via npx skills add on Cursor or OpenCode), provision the runtime with npx -y design-lens setup instead, then retry.

Work from a clone. If .design-lens/<slug>/ does not exist for the site the user named, run the clone-reference flow first, then continue here.
Gather evidence in this order. The order matters: look before you read code, or you will describe the markup instead of the design.

a. Screenshots first — vision before code. Look at .design-lens/<slug>/screenshots/: original-full.png (the whole live page), original-viewport.png (what lands above the fold), clone-full.png (the capture's fidelity). Form your first impression here, and write it down before you know anything about the CSS.

b. Tokens. Run ~/.design-lens/bin/design-lens tokens .design-lens/<slug> and read tokens.json: clustered colors with usage counts, type families and sizes, the spacing scale, motion durations and easings.

c. Elements. Run ~/.design-lens/bin/design-lens inspect .design-lens/<slug> --pretty for the logo, nav, hero, and CTAs with their positions and computed styles.

d. Landmarks. Grep the clone HTML for structure — headings, <section>, <nav>, <footer>, grid and flex containers. Read only windows around the matches. Never open the cloned index.html's full contents into context.

e. Mobile, if the responsive story matters. One live shot at phone width:
```
~/.design-lens/bin/design-lens screenshot --url <URL> --width 390 --height 844 --out .design-lens/<slug>/screenshots/original-mobile.png
```
Adopt the senior-designer persona and run the analysis lenses described in LENSES.md, in this skill's own folder. Read that file now — it defines the lenses, the depth expected of each, and the standing rule that every observation must answer WHY, not merely WHAT. Then fill templates/DESIGN.template.md (also in this folder) and write the result to .design-lens/<slug>/DESIGN.md. Keep every one of its twelve numbered headings, in order, including ## 11. What NOT to Copy — trademarked marks, licensed photography, brand voice. Cite the evidence you gathered (a token value, a screenshot region, a dl-id) rather than asserting taste.
Fill templates/VARIATIONS.template.md and write it to .design-lens/<slug>/VARIATIONS.md: three to five named directions that keep the reference's structural DNA while replacing its surface — each with the concrete swaps (color, type, density, motion) that produce it, and the kind of product it suits.
Present a ten-line executive summary in the chat: the design's intent, the two or three moves that make it work, the biggest risk in copying it, and where the two files were written. Do not paste the files into the conversation — point at them.

Gives 0 of the 12 instructions most design systems skills give in 823 tokens

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06

create a custom theme if neededin 54 of 528, across 10 files
read the corresponding theme filein 54 of 528, across 10 files
ask which theme to applyin 53 of 528, across 9 files
show the theme showcasein 53 of 528, across 9 files
maintain visual identity across all slidesin 50 of 528, across 6 files
apply the specified colors and fontsin 47 of 528, across 3 files
get explicit confirmationin 45 of 528, across 1 file
Generate a design system before codingin 19 of 528, across 6 files
Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
Check Python installation and install if missingin 17 of 528, across 4 files
Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

verify the CLI is available before starting
run the clone-reference flow if the directory is missing
review screenshots before reading code
gather design tokens using the CLI
inspect key elements using the CLI
grep cloned HTML for structural landmarks

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.