SCP Image To Page Generator

Problem

scp-img-to-page targets React + Ant Design front-end projects such as aheadofcow_web, where a UI screenshot often needs to become a compilable page without manually reconstructing the table, filters, routing, and component conventions. It is scoped to the aheadofcow_web/ directory, avoids backend_transaction/, and does not generate src/api/ interface files, making it suitable for quickly adding list pages, form pages, routes, and basic interactions.

How It Works

The skill uses screenshots as input, identifies the page title, table columns, filters, action buttons, and dialogs, then generates React components. Key capabilities include:
- Image analysis: extracts column names, order, types, and button placement; continues from visual content if image analysis is unavailable
- Code generation: creates src/views/xxx/index.jsx, child components, and updates src/router/index.js
- Mock data: for list pages, generates 15 records with a unique id, plus filtering, pagination, and a 300ms simulated loading delay
- Component conventions: uses UploadRender for imports and Download for exports/downloads; permission buttons follow module_feature_action
- Compile check: starts the front-end dev server, waits for webpack compilation, fixes syntax issues, and outputs a file list

Boundaries

This is a project-specific front-end tool, not a general-purpose React assistant. It only handles pages, routes, Mock data, and component styling in the target front-end project. It does not generate backend controllers, services, DAOs, database configuration, or @/api/xxx imports. Non-list pages do not receive Mock data, and new routes or permission codes still need to be registered in the backend permission system. It is best used by front-end developers to produce prototype pages, integration pages, and basic CRUD views inside an existing project.