agentsclimarketplace

Inspect elements

Skill mojomoth/design-lens/plugin/skills/inspect-elements

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 inspect-elements

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

List the customizable elements of a design-lens clone (logo, nav, hero, CTAs, colors, fonts) with their stable ids. Use when the user asks what can be changed or customized in a clone, or before making edits.

SKILL.md

2.4 KB, 549 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. Find the clone the user means. Clones live under .design-lens/<slug>/; if there is more than one and the user did not say which, ask. If there is no clone yet, run the clone-reference flow first.

  2. Run the inventory:

    ~/.design-lens/bin/design-lens inspect .design-lens/<slug> --pretty

    It serves the clone on a loopback port, probes the rendered page, and prints JSON to stdout. Restrict the output with --kind <role> when the user only cares about one role.

  3. Present a compact grouped list — never dump the raw JSON. Group by role, one line per element:

    logo           "Acme"                     dl-3
nav-link       "Product" / "Pricing" / …  dl-7, dl-8, dl-9
hero-heading   "Ship design faster"       dl-14
hero-image     hero-photo.jpg             dl-16
cta            "Start free"               dl-21

    The dl-N value is the element's data-dl-id: the stable address every edit is anchored to.

  4. Point the user at colors and fonts, which are not elements: they live in .design-lens/<slug>/tokens.json. If that file is missing, generate it first with:

    ~/.design-lens/bin/design-lens tokens .design-lens/<slug>

  5. State plainly that this is a LIVE inventory, not a saved manifest — nothing was written to the clone directory, and the ids are read back from the page each time. Re-run inspect after any edit rather than trusting the list above.

  6. Invite the user to pick the elements they want to change, and hand off to customize-clone.

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.