supriatinkusmawanti71-sketch/screenshot-to-requirements — explained in plain English
Analysis updated 2026-05-18
Turn a product screenshot into an implementation-ready markdown requirements doc.
Convert a Figma export into a breakdown of components, states, and interactions.
Reconstruct a page's layout, states, and edge cases from a single image.
| supriatinkusmawanti71-sketch/screenshot-to-requirements | 0pen-sourcer/hearth | 0rnot/god-mode-claude | |
|---|---|---|---|
| Stars | 15 | 15 | 15 |
| Language | — | Python | — |
| Setup difficulty | easy | moderate | easy |
| Complexity | 2/5 | 3/5 | 1/5 |
| Audience | vibe coder | vibe coder | developer |
Figures from each repo's GitHub metadata at analysis time.
Installed as a Codex skill via a plain git clone into the Codex skills folder, no other dependencies mentioned.
screenshot-to-requirements is a Codex Skill that takes a product screenshot, wireframe, Figma export, app screen, or web page image and breaks it down into a markdown requirements document that a coding agent can act on directly. The README lists example uses such as turning a screenshot into requirements, generating implementation notes for Codex or Claude Code, splitting a page image into components, states, and interactions, converting a UI image into a PRD, or writing frontend requirements straight from a picture of a page. The stated workflow moves through several steps: look at the screenshot and figure out what kind of page it is and its main purpose, break down its information layout, identify the individual components, fields, and controls, infer likely states and interactions, note any assumptions about data or API calls, and add notes on responsive behavior and accessibility. The final markdown output is meant to cover a page overview, the visible structure, a component list, component states, interaction logic, data and API assumptions, responsive and accessibility requirements, edge cases, concrete implementation tasks, acceptance criteria, and a list of uncertain points and assumptions. The README describes a few guiding principles behind this process: look at the image first and treat only what is actually visible as evidence, keep a clear line between what is visible and what is inferred, favor making reasonable assumptions over stopping to ask questions unless the core goal truly cannot be determined, and write requirements with implementation in mind rather than just describing what the screen looks like. It also calls out covering interaction states like hover, focus, empty, error, and loading, not just the static layout. The repository itself is small, containing a SKILL.md file describing the trigger and workflow, a reference checklist and output template, and metadata for use inside the Codex app. Installation is a plain git clone into the user's Codex skills folder. No license is mentioned in the README.
A Codex Skill that turns a screenshot, wireframe, or Figma export of a UI into a markdown requirements document a coding agent can implement.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly vibe coder.
This repo across BitVibe Labs
double-check against the repo, no cap.