git404hub

what is screenshot-to-requirements fr?

supriatinkusmawanti71-sketch/screenshot-to-requirements — explained in plain English

Analysis updated 2026-05-18

15Audience · vibe coderComplexity · 2/5Setup · easy

tl;dr

A Codex Skill that turns a screenshot, wireframe, or Figma export of a UI into a markdown requirements document a coding agent can implement.

vibe map

mindmap
  root((screenshot-to-requirements))
    Input
      Product screenshots
      Figma exports
      Wireframes
    Workflow
      Observe page type
      Break down structure
      Infer states and interactions
    Output
      Component list
      Interaction logic
      Acceptance criteria
    Audience
      Vibe coders
      Coding agent users

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Turn a product screenshot into an implementation-ready markdown requirements doc.

VIBE 2

Convert a Figma export into a breakdown of components, states, and interactions.

VIBE 3

Reconstruct a page's layout, states, and edge cases from a single image.

what's the stack?

MarkdownCodex Skill

how it stacks up fr

supriatinkusmawanti71-sketch/screenshot-to-requirements0pen-sourcer/hearth0rnot/god-mode-claude
Stars151515
LanguagePython
Setup difficultyeasymoderateeasy
Complexity2/53/51/5
Audiencevibe codervibe coderdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Installed as a Codex skill via a plain git clone into the Codex skills folder, no other dependencies mentioned.

in plain english

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.

prompts (copy fr)

prompt 1
Use screenshot-to-requirements to turn this product screenshot into implementation-ready markdown.
prompt 2
Analyze this page screenshot and break it into components, states, and interactions for me to build.
prompt 3
Convert this UI screenshot into a PRD I can hand to a coding agent.

Frequently asked questions

what is screenshot-to-requirements fr?

A Codex Skill that turns a screenshot, wireframe, or Figma export of a UI into a markdown requirements document a coding agent can implement.

How hard is screenshot-to-requirements to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is screenshot-to-requirements for?

Mainly vibe coder.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.