Design outputs
- Produce index.html and a short import-notes.md that lists inferred decisions.
nexu-io/open-design
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.
62Collecting
See source evidenceView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "plugins/spec/examples/import-screenshot-to-prototype"Source profileDesignCatalog only
Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Limited to facts supported by the pinned source
What the pinned source establishes about 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.
npx skills add https://github.com/nexu-io/open-design --skill "plugins/spec/examples/import-screenshot-to-prototype"The pinned source contains about 99 English words and 2 usable sections. That evidence supports a source profile, not a complete guide.
99 source words · 2 usable sections
What the source actually contains
2 verifiable source sections for import-screenshot-to-prototype
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
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 t…
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.
Output Contract
Produce index.html and a short import-notes.md that lists inferred decisions.
Produce index.html and a short import-notes.md that lists inferred decisions.
Choose a different workflow
When another Skill is the better fit
design-review
Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.
A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.
Open source detailhiggsfield-generate
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
A separate implementation from MoizIbnYousaf/marketing-cli; compare its source, maintenance signals, and permission requirements.
Open source detailarize-evaluator
Handles LLM-as-judge evaluation workflows on Arize including creating/updating evaluators, running evaluations on spans or experiments, managing tasks, trigger-run operations, column mapping, and continuous monitoring. Use when the user mentions create evaluator, LLM judge, hallucination, faithfulness, correctness, relevance, run eval, score spans, score experiment, trigger-run, column mapping, continuous monitoring, or improve evaluator prompt.
A separate implementation from github/awesome-copilot; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
How do I install import-screenshot-to-prototype?
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/spec/examples/import-screenshot-to-prototype". Inspect the command and pinned source before running it.
Repository stars
82,073
Repository forks
9,485
Quality
62/100
Source repository last pushed
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Documentation17/30
Specificity13/25
Maintenance20/20
Trust signals12/25
Compare before choosing
Related Agent Skills and source variants
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
design-review by event4u-app
Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.
higgsfield-generate by MoizIbnYousaf
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
arize-evaluator by github
Handles LLM-as-judge evaluation workflows on Arize including creating/updating evaluators, running evaluations on spans or experiments, managing tasks, trigger-run operations, column mapping, and continuous monitoring. Use when the user mentions create evaluator, LLM judge, hallucination, faithfulness, correctness, relevance, run eval, score spans, score experiment, trigger-run, column mapping, continuous monitoring, or improve evaluator prompt.
neuropixels-analysis by k-dense-ai
Analyze Neuropixels extracellular recordings end-to-end with SpikeInterface. Covers loading SpikeGLX/Open Ephys/NWB data, preprocessing, drift/motion correction, Kilosort4 (and CPU) spike sorting, quality metrics, and unit curation (threshold-based, model-based UnitRefine, and AI-assisted visual review). Use when working with Neuropixels 1.0/2.0 recordings, spike sorting, or extracellular electrophysiology analysis.
scientific-brainstorming by k-dense-ai
Facilitates evidence-aware scientific ideation with independent generation, structured discussion, explicit assumptions, transparent evaluation, adversarial review, and decision logs. Use for early-stage research brainstorming or prioritizing candidate directions; hand off empirical validation, study design, ethics or regulatory review, and clinical questions to appropriate experts or skills.
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 1 min
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.htmlartifact 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.
- Source repo
- nexu-io/open-design
- Skill path
- plugins/spec/examples/import-screenshot-to-prototype/SKILL.md
- Commit SHA
- 89d6d4ef21ba
- Repository license
- Apache-2.0
- Data collected