Screenshot Layout Decomposer (Image → DOM Plan → Component Map)
Quickly convert any UI screenshot into a structured component map with sections, hierarchy, and a first-pass DOM plan ready for coding.
Prompt Overview
Tips For You
- Keep names stable across sprints to prevent diff churn. - Capture repeating UI as a variant prop early. - Confirm interactive affordances (hover, focus, press) with design. - Start Storybook stubs with only props required for the screenshot.
From Operations TeamNexusAi TechnologyProblem It Solves
Speeds up the hardest first mile: translating visuals into a coherent component structure and layout plan without guesswork.
Hierarchy parsing
Turns visuals into a component tree and regions.
Props/state planning
Defines clean inputs and event surfaces.
Responsive layout notes
Proposes grid/flex patterns by breakpoint.
Risk ledger
Flags unclear interactions to confirm early.
AI Prompt Instructions
Act as: A senior frontend engineer and UI systems architect.
Why this task matters: Starting from a screenshot often leads to ad-hoc components, naming drift, and rework. A clear map reduces ambiguity and accelerates coding.
Important boundaries:
- Assume React + Tailwind or CSS Modules.
- Prefer semantic HTML tags and ARIA roles where needed.
- Do not invent product features beyond what the screenshot implies.
User inputs:
- Screenshot link or description
- Brand constraints (if any): spacing scale, font families, primary/secondary colors
- Target breakpoints (e.g., sm, md, lg, xl)
Objectives:
1) Identify layout regions (header, nav, main, sidebars, footer, dialogs).
2) Propose a component tree with names, purpose, and reuse potential.
3) Outline props/state, data dependencies, and event surfaces.
4) Suggest Tailwind utility groups or CSS classes for core layout.
Analysis workflow:
1) Parse visual hierarchy: grid vs. flex patterns, spacing rhythm, typography roles.
2) Draft component boundaries based on repetition and interaction hotspots.
3) Define props for variability (text, icons, images, sizes, variants).
4) Note accessibility needs (landmarks, labels, focus order).
Required output format:
- ComponentTree: bullet list of components with nesting
- ComponentSpecs: for each component: purpose, props, state, aria/roles
- LayoutPlan: grid/flex strategy with gap, padding, and breakpoint notes
- Risks: assumptions and areas needing stakeholder confirmation
Quality controls:
- Names are consistent and descriptive (PascalCase for components).
- Avoid deeply nested components when a slot/child pattern suffices.
Verification checklist:
- Can each component render independently in Storybook?
- Are props minimal yet complete for reuse?
Final instruction: Produce the ComponentTree, ComponentSpecs, LayoutPlan, and Risks as separate clearly labeled sections, ready to hand to a coder.
Expected Outcome
ComponentTree: - AppLayout - TopBar - SideNav - ContentArea - StatsCard (x3) - DataTable LayoutPlan: - Outer: grid-cols-[auto,1fr] with gap-6 on lg; collapse SideNav under md. ComponentSpecs: - StatsCard props: title, value, delta, icon, variant. Risks: - Table row actions unclear (icons vs. text).
Implementation Journey
Draft the component map in ChatGPT
Open ChatGPT and paste your screenshot link plus any brand spacing/typography constraints. Ask for a ComponentTree, ComponentSpecs, LayoutPlan, and Risks. Expect a structured hierarchy and a first-pass DOM plan you can copy into a planning doc.
10 minCreate Storybook stubs
In your editor (e.g., VS Code), scaffold empty React components from the ComponentTree and add basic Storybook stories with props from ComponentSpecs. This turns the plan into running placeholders you can fit code into.
20 minConfirm assumptions with the team
Share the Risks section and Storybook link with your PM/designer. Capture decisions (e.g., variant names, breakpoints) directly in component props to lock the interface before coding.
15 min