agentsclimarketplace

Clone reference

Skill mojomoth/design-lens/plugin/skills/clone-reference

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 clone-reference

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

Clone a reference website into a self-contained local folder for design study. Use when the user gives a URL to clone, capture, mirror, save, or use as a design reference. Single pages only; not for whole-site crawls or pages behind logins.

SKILL.md

2.7 KB, 582 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.

  1. The target URL is in the user's request. If none was given, ask for one before running anything. One page per clone — if the user names a whole site, clone the single page they care about most and say so.

  2. From the project root, run:

    ~/.design-lens/bin/design-lens clone <URL>

    Add --project <name> if the user named the project (otherwise the directory is derived from the URL host). Add --remove-selector <css> for elements the user wants excluded from the capture; the flag repeats. Consent and cookie banners are already blocked by default.

    The command prints progress to stderr and one JSON result line to stdout, then writes .design-lens/<slug>/ containing clone/, manifest.json, REPORT.md, and screenshots/. A non-zero exit means the page was never captured — report the error rather than guessing.

  3. Read .design-lens/<slug>/REPORT.md. Summarize for the user, in a few lines:

    • what was localized (pages, styles, images, fonts),
    • what stayed remote and why (the ## Left remote section gives a reason per URL),
    • any fidelity warnings (the ## Fidelity notes section).

    If the user asks how faithful the capture is, show them screenshots/clone-full.png next to screenshots/original-full.png — the first is the written clone re-rendered from disk, the second is the live page.

  4. Remind the user, in one sentence: the clone is for design study; brand assets must be replaced before shipping anything derived from it.

  5. Offer the natural next steps:

    • reverse-design — analyze the design and write DESIGN.md,
    • inspect-elements — list what can be customized,
    • customize-clone — start editing.

Never open the cloned index.html's full contents into context — it is large; use grep and targeted reads.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.