agentsclimarketplace
Sign in

Import screenshot to prototype

Skill nexu-io/open-design/plugins/spec/examples/import-screenshot-to-prototype

Use this plugin when the user provides a screenshot or image reference and wants it reconstructed as an editable Open Design prototype with sensible components, layout, and responsive behavior.From its SKILL.md

Install
npx -y skills add nexu-io/open-design --skill import-screenshot-to-prototype

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

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

1.0 KB, 142 tokens by cl100k_base, as published. Nobody here has run it

Import Screenshot To Prototype

Workflow

  1. Inspect the screenshot and identify layout regions, controls, typography scale, color roles, and content hierarchy.
  2. Ask for the target viewport only if it cannot be inferred.
  3. Rebuild the screenshot as a clean index.html artifact with semantic sections and reusable CSS tokens.
  4. Preserve the visual intent, but replace unreadable or unavailable text with realistic editable content.
  5. Add responsive behavior for at least one mobile width.
  6. Self-critique visual fidelity, text fit, and editability before final.

Output Contract

Produce index.html and a short import-notes.md that lists inferred decisions.

What ships with it: 1 file

1.5 KB alongside SKILL.md

Keep looking

Skills are one crate of 325,949. 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.