import-screenshot-to-prototype

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

Jump to install

Repository: nexu-io/open-design
Last source activity: August 18, 2026 at 07:09
Detected SKILL.md language: English
Stars: 96,674
Forks: 11,234

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/nexu-io/open-design --skill import-screenshot-to-prototype

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

2 files

SKILL.md

Source instructions · Read-only preview

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 OpenDesign prototype with sensible components, layout, and responsive behavior.
license	MIT
metadata	{"author":"open-design-spec","version":"0.1.0"}

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.

Back to search Back to installation

velar-luxury-real-estate

Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below and scales up while pinning to a dark statement section, a sticky dark stats band with count-up numbers, and a hover-expand video gallery that slides up over the dark section. Invoke for 'luxury real estate landing page', 'architecture brand site', 'scroll-driven hero with rising building', or when the user references the Velar template.

2026-09-17

od-next-strategy

Bundled OD Next V2 strategy entrypoint for route-locked planning and Build execution.

2026-09-08

od-next-media-inputs

Prepare required media inputs within an existing OD Next plan. Reuse capability evidence, acquire and measure assets efficiently, and resolve asynchronous jobs without removing required content or weakening quality standards.

2026-09-08

View all from this repository

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 OpenDesign prototype with sensible components, layout, and responsive behavior.
license	MIT
metadata	{"author":"open-design-spec","version":"0.1.0"}

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.

import-screenshot-to-prototype

Source facts

Install options

Review the source files

Import Screenshot To Prototype

Workflow

Output Contract

More from this repository

Import Screenshot To Prototype

Workflow

Output Contract

More from this repository