ui-creatorlisted

# Converting UI to Web Application ## Inputs 1. **UI images** (optional) — image files (PNG, JPG, etc.) of UI screens. When provided, design tokens and style reference are derived from images. When absent, default tokens are used 2. **Project path** (required) 3. **OpenAPI spec** (optional) — YAML/JSON for API service generation. Endpoints that don't map to any image become inferred pages At least one of UI images or OpenAPI spec must be provided ## Workflow ### Step 1: Determine target platform Detect from the project or ask the user: - **Angular project?** → Read [platform-angular.md](references/platform-angular.md) - **React project?** → Read [platform-react.md](references/platform-react.md) ### Step 2: Inspect project Follow the platform file for scaffolding and project inspection commands Ensure `playwright` and `tsx` are available: ```bash test -d node_modules/playwright && test -d node_modules/tsx || npm install playwright tsx npx playwright install chromium ``` ### Step 3: Analyze inputs and infer pages 1. **Check for instructions**: Look for any `.md` file (e.g. `instrucciones.md`) in the source directory. If found, read it and use it for: - **Business logic**: service call triggers, navigation targets, data refresh behaviors - **Visual preferences** (if mentioned): colors, theme (dark/light), typography, accent color, layout style — apply these over the default tokens when no images are provided 2. **If images are provided:** - View all images with vi