screenshot to Vue
Screenshot to Vue: Components, Props and Responsive Review
Convert a UI screenshot into a Vue starting point. Define props and events, review component structure, and test keyboard access and responsive behavior.
Converting a screenshot to Vue creates a starting point for visible interface structure. You still need to define the data model and events that make it a working product. BuildUI offers Vue as a screenshot output; the review should fit the Vue conventions already used in your repository.
Describe the target component tree
Use a clear capture with readable labels. In the dashboard choose Screenshot to Code and Vue, then attach the image. Identify repeated patterns such as summary cards and list rows. Name the parts you want reused and the parts that are unique to the screen.
Include representative data shapes rather than real customer data. For example, a metric may have id, label, value and trend fields. Explain what happens when the list is empty, a value is missing, or a label is much longer than the reference. Those cases are absent from the image but affect the markup.
Review single-file component boundaries
Vue single-file components can group template, script and styles. Ask for your preferred conventions, then inspect whether repeated elements actually share a component. Do not accept a large duplicated template just because its first render resembles the screenshot.
Props carry inputs into a component; emitted events communicate actions to its parent. Keep ownership explicit. A display card should not silently fetch account data or mutate a prop when clicked. Decide whether navigation uses a real link or whether an action needs a button.
A small review example
This hand-authored example demonstrates a display-only metric and is not a claimed generation result. Use it to assess whether a generated component has a clear input contract. Add formatting and localization in your own application.
<script setup>
defineProps({ label: String, value: String });
</script>
<template>
<div class="metric">
<dt>{{ label }}</dt>
<dd>{{ value }}</dd>
</div>
</template>
<!-- Place metric instances inside a parent dl. -->Check reactivity and styling in context
Run the component with changing props and reordered data. Inspect keys on repeated elements. Confirm that event names match the parent listeners and that computed display values update when inputs change. Test the empty and loading states independently.
Review global selectors before importing generated CSS. A broad button or heading rule can affect unrelated screens. Match your project styling approach, and verify whether scoped styles or shared tokens are appropriate. Do not infer exact spacing tokens or font licenses from pixels.
Responsive and accessible acceptance checks
Test a narrow phone width, tablet and desktop with long content. Replace fixed-position screenshot coordinates with layout rules where appropriate. Check that lists do not clip and menus remain operable when the screen is zoomed.
Tab through the page. Verify visible focus, native form labels, meaningful button names and announcements for important async state. Run the existing build and component checks, then inspect the generated dependencies. The image does not prove the code works with your router, store or backend.
Technical references
Related reading
Key takeaways
- Describe props, events and missing states in the prompt.
- Use repeated visual patterns to propose component boundaries.
- Review Vue behavior as well as the first rendered frame.