import-screenshot-to-prototype

Name: import-screenshot-to-prototype
Author: jhy0285

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

by jhy0285(0) 0 installs

Free

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from jhy0285/monofield (plugins/spec/examples/import-screenshot-to-prototype/SKILL.md). Install upstream with npx skills add jhy0285/monofield --skill import-screenshot-to-prototype. Copyright stays with the author (MIT).

Import Screenshot To Prototype

Workflow

Inspect the screenshot and identify layout regions, controls, typography scale, color roles, and content hierarchy.
Ask for the target viewport only if it cannot be inferred.
Rebuild the screenshot as a clean index.html artifact with semantic sections and reusable CSS tokens.
Preserve the visual intent, but replace unreadable or unavailable text with realistic editable content.
Add responsive behavior for at least one mobile width.
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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/jhy0285-monofield-import-screenshot-to-prototype/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

jhy0285-monofield-import-screenshot-to-prototype.ocm.jsonjson

{
  "ocm": "1",
  "id": "jhy0285-monofield-import-screenshot-to-prototype",
  "kind": "skill",
  "name": "import-screenshot-to-prototype",
  "description": "Use this plugin when the user provides a screenshot or image reference and wants it reconstructed as an editable MonoField prototype with sensible components, layout, and responsive behavior.",
  "publisher": "jhy0285",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Use this plugin when the user provides a screenshot or image reference and wants it reconstructed as an editable MonoField prototype with sensible components, layout, and responsive behavior."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/jhy0285/monofield",
      "path": "plugins/spec/examples/import-screenshot-to-prototype/SKILL.md",
      "ref": "621157330c20fc54b8f57cbd78c0a065a6df98d8",
      "url": "https://github.com/jhy0285/monofield/blob/621157330c20fc54b8f57cbd78c0a065a6df98d8/plugins/spec/examples/import-screenshot-to-prototype/SKILL.md",
      "key": "jhy0285/monofield/plugins/spec/examples/import-screenshot-to-prototype/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Import Screenshot To Prototype\n\n## Workflow\n\n1. Inspect the screenshot and identify layout regions, controls, typography scale, color roles, and content hierarchy.\n2. Ask for the target viewport only if it cannot be inferred.\n3. Rebuild the screenshot as a clean `index.html` artifact with semantic sections and reusable CSS tokens.\n4. Preserve the visual intent, but replace unreadable or unavailable text with realistic editable content.\n5. Add responsive behavior for at least one mobile width.\n6. Self-critique visual fidelity, text fit, and editability before final.\n\n## Output Contract\n\nProdu",
  "cost": {
    "context_tokens": 169
  }
}

Fetch it by URL: GET /api/v1/registry/jhy0285-monofield-import-screenshot-to-prototype/manifest?version=1.0.0