# Hosted phone mockups — agent instructions Service: https://mockups.sandbox.stit.tech OpenAPI: https://mockups.sandbox.stit.tech/openapi.json Browser constructor: https://mockups.sandbox.stit.tech/ Use this service to place live content inside a measured 3D iPhone on any website. No checkout, npm, build, credentials or local server is needed. The host site's framework does not matter: insert the returned iframe HTML. ## HTTP workflow POST https://mockups.sandbox.stit.tech/api/v1/mockups Content-Type: application/json ```json { "device": "iphone-18-pro", "finish": "silver", "rotation": {"x": -6, "y": -20, "z": -4}, "background": "transparent", "interactive": true, "screenPadding": true, "screen": {"type": "url", "url": "https://example.com/app"} } ``` The 201 JSON response contains id, previewUrl, configUrl, contentUrl, exportEndpoint and embedHtml. Insert embedHtml into the target site. Adjust iframe CSS width/height to the composition (suggested height 650–800px). Check it at desktop and mobile sizes. GET configUrl to inspect or reuse a configuration. To change one, POST a new configuration: saved mockup links are immutable, have no automatic expiry, and depend on continued operation of this hosting service. Keep a copy of config. For custom content replace screen with: ```json {"type":"html","html":"

Your app

","css":"body{background:#f6f2ed;color:#222;padding:24px;font:18px system-ui}"} ``` For a screenshot use `{"type":"image","url":"https://example.com/screen.png"}`. Only public HTTPS URLs without credentials or custom ports are accepted. There is no upload endpoint in v1. Image mode uses object-fit: cover. ## Browser-only workflow Open the constructor. Select site / HTML / image, fill the appropriate fields, choose finish and X/Y/Z rotation, then click «Создать мокап ↗». Copy the «Код для вставки» textarea below the preview. A native form submission also works if JavaScript cannot submit API requests. No terminal is required. ## Parameters and constraints - Device: iphone-18-pro only. Finish: silver, black, glacier, burgundy. - X/Y/Z are degrees, each -36000…36000; arbitrary rotations including rear view. - background: transparent (default) or #RRGGBB. - interactive true (default): clicks and scroll inside the screen. false: drag to rotate. Add ?controls=1 to previewUrl for a switch between these modes. - screenPadding true (default): top 52px and bottom 17px within the 402×874 logical screen. Set false for an edge-to-edge screenshot or safe-area-aware UI. - HTML runs on an isolated origin with sandbox allow-scripts, without cookies, same-origin privileges, embedded frames, form submissions or top navigation. Inline scripts/styles and HTTPS resources are supported. Relative asset URLs will not work; use absolute HTTPS URLs. Network APIs must permit opaque-origin requests (CORS). Never rely on service-origin localStorage or authentication. - A URL screen must permit iframe embedding via CSP frame-ancestors and X-Frame-Options. This service cannot bypass them. Third-party cookie restrictions can affect login. Use HTML or image mode if the site cannot be embedded. - Parent website CSP must allow https://mockups.sandbox.stit.tech in frame-src. - Requires JavaScript/WebGL in the viewer. First detailed-model load is ~10 MB; immutable model assets are cached across mockups. Use loading="lazy" and avoid mounting many simultaneous WebGL viewers. Live previews use WebGL; exported PNG/WebP files do not. - Public and unauthenticated: anyone with a link can read its content/config. Do not send credentials, tokens, personal or confidential information. - Maximum body: 256 KiB UTF-8 JSON; 60 creations/hour/IP; 10,000 saved mockups in the initial deployment. Errors are JSON with error and status 400, 413, 415, 429 or 507. Do not retry a mockup-creation POST automatically after an uncertain timeout; v1 has no idempotency keys. There is no edit/delete/list API in v1. ## PNG / WebP export After creating a mockup, POST its exportEndpoint (or https://mockups.sandbox.stit.tech/api/v1/mockups/ID/exports) with Content-Type: application/json: ```json {"width":1200,"height":1520,"waitMs":1000} ``` A 202 response contains `status: "pending"` and `statusUrl`. Poll statusUrl every 2 seconds until status is `ready` or `failed`. Ready results contain **both** `pngUrl` and `webpUrl`, pixel dimensions and a warnings array. These URLs serve actual images, usable in ``, CSS background-image, download tools or design software. They do not require WebGL. Open the files and visually verify them. A failure has an error string; do not present it as a successful image export. PNG/WebP preserve transparency when the saved mockup's background is transparent. They capture the entire viewer at the requested dimensions, including the phone and rendered screen. No editor controls appear. Default size 1200×1520; each side 320–2400, maximum 4 million pixels. waitMs (0–10000, default 1000) adds settling time after the model/screen load. Export is asynchronous and bounded to about 3 minutes. Only one render runs at a time; 503 means retry after a few seconds. Identical options reuse the saved snapshot (200 when ready). Add `"refresh":true` for a fresh snapshot of a changed external page. Existing image URLs stay immutable. Budget: 20 new renders/hour/IP, 500 stored exports in this deployment. Reusing an existing pending/ready job does not consume this render quota. Browser-only workflow: after creating the mockup, choose a pixel size and click «Сгенерировать PNG и WebP». Wait for the two download links below the embed code. Check «Переснять заново» to force a fresh snapshot instead of reusing the cached image. The renderer starts a **fresh anonymous session**. It does not copy your browser login, scrolling, clicks or current SPA state. For a specific screen, provide a public deep link or self-contained HTML. Only public HTTPS GET/HEAD/OPTIONS resources are fetched; private IPs, credentials, cookies, non-443 ports, POST, service workers and WebSockets are blocked. URLs must still permit framing. External CORS rules apply. If optional resources fail, inspect the returned warnings and image. ## Copyable prompt Create a phone mockup using https://mockups.sandbox.stit.tech. First read https://mockups.sandbox.stit.tech/agent.md. Use POST /api/v1/mockups, or the browser constructor if HTTP tools are unavailable. Choose content, finish and angle to fit the current project's brief. Insert the returned embedHtml into the target site and verify it visually. No local tool installation is required. Do not use placeholder content as the final result.