Construye con Claude, ChatGPT, Cursor o cualquier LLM

Entrega tu API key a un LLM. Obtén capturas y CI/CD.

Screenshots.live expone un JSON Schema y una especificación OpenAPI en URLs estables. Un LLM con tu API key puede crear plantillas, colocar elementos, generar un workflow de GitHub Actions y disparar renders — sin que escribas una línea de código.

Cómo funciona

  1. 1

    Crea una API key

    Inicia sesión y crea una key en tu panel. Cópiala una sola vez (empieza por sa_live_) y guárdala como secret. Autentica tanto la creación de plantillas como los renders.

  2. 2

    Dale al LLM el system prompt + tu key

    Pega el system prompt de abajo en Claude, ChatGPT, Cursor o cualquier agente. Añade tu especificación. El LLM lee el schema y hace POST de plantillas y elementos en tu nombre.

  3. 3

    Deja que el LLM escriba el workflow

    Pídele un workflow de GitHub Actions. El LLM emite YAML que usa la render-screenshots-action oficial, referencia tu secret y produce un artefacto descargable en cada push.

System prompt para copiar y pegar

Pégalo en el campo system de cualquier herramienta LLM. Apunta el modelo a las URLs del schema y fija las reglas básicas para que produzca payloads válidos en lugar de inventar campos.

prompt
You are an expert at creating Screenshots.live templates programmatically.

You have an API key for Screenshots.live (it begins with sa_live_). You can:

1. Read the JSON Schema for templates at:
   https://api.screenshots.live/schema/templates.json

2. Read the full OpenAPI specification at:
   https://api.screenshots.live/schema/openapi.json

3. Create templates by POSTing to https://api.screenshots.live/templates with the
   header: Authorization: Bearer <THE_API_KEY>

4. Add items (text, device frames, images, shapes, backgrounds) by POSTing to
   https://api.screenshots.live/templates/{id}/items

5. Render screenshots from a template by POSTing YAML to
   https://api.screenshots.live/render/api with the same Bearer header.

When the user describes a screenshot or asks for a CI/CD workflow:
- Fetch the schema first; do not invent fields.
- Use exact enum values from the schema for screenSizeCategory and item types.
- For coordinates and dimensions, stay within the screen size bounds.
- For CI workflows, prefer the official GitHub Action:
    uses: screenshots-live/render-screenshots-action@v1
- Never hard-code the API key in code; always reference a secret.

Always show the exact curl or YAML you executed, plus the response status,
so the user can audit what changed.

Schema legible por máquina

Dos URLs estables que un LLM puede consultar directamente. La primera está filtrada a las estructuras relacionadas con plantillas; la segunda es la especificación pública completa de OpenAPI para todo endpoint que tu API key puede usar.

JSON Schema de plantillas
https://api.screenshots.live/schema/templates.json
Especificación OpenAPI 3.x completa
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpoints que más usan los LLM

Todos los endpoints aceptan tu API key sa_live_ como Bearer token. Plantillas e items pertenecen al dueño de la key; los rate limits dependen del tier.

MétodoRutaPropósito
POST/templatesCreate a template (defines canvas size and screen count).
GET/templatesList the API key owner's templates.
GET/templates/{id}Fetch a template with its items.
POST/templates/{id}/itemsAdd an item: Text, DeviceFrame, Image, Shape, CanvasBackground, or Html.
PUT/templates/{id}/items/{itemId}Update an item's position, z-index, or properties.
PUT/templates/{id}/items/bulkReplace all items in a template in one call.
POST/render/apiRender a template into screenshots from a YAML body.
GET/templates/{id}/yamlDownload a YAML scaffold with swappable fields ready to feed the render API.

Autenticación

Envía Authorization: Bearer sa_live_<tu-key>. La misma key autentica el CRUD de plantillas, el CRUD de items y el dispatch de renders — sin scopes separados.

bash
curl -X POST https://api.screenshots.live/templates \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Fitness app — launch screens",
    "screenSizeCategory": "Mobile",
    "screenCount": 3
  }'
bash
curl -X POST https://api.screenshots.live/templates/$TEMPLATE_ID/items \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "Text",
    "x": 80,
    "y": 120,
    "zIndex": 10,
    "properties": {
      "text": "Track every workout",
      "fontSize": 64,
      "fontWeight": "bold",
      "color": "#0F172A",
      "textAlign": "left"
    }
  }'

Vocabulario que el LLM debe fijar

Estos enums salen directos del schema. Fijarlos en el system prompt evita que el modelo invente valores que fallen con 422.

Tipos de item
TextDeviceFrameImageShapeCanvasBackgroundHtml
Categorías de tamaño de pantalla
MobileTabletDesktopCustom

Workflow CI/CD de ejemplo

Un LLM que siga el prompt anterior producirá algo así. La action gestiona la llamada YAML al render, los reintentos por error y la subida del artefacto.

yaml
name: Render screenshots
on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  screenshots:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Render via Screenshots.live
        uses: screenshots-live/render-screenshots-action@v1
        with:
          api-key: ${{ secrets.SCREENSHOTS_LIVE_API_KEY }}
          template-id: ${{ vars.SCREENSHOTS_TEMPLATE_ID }}
          yaml-path: ./screenshots/template.yaml

      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
          name: screenshots
          path: ./screenshots/output/

Añade SCREENSHOTS_LIVE_API_KEY a los secrets del repositorio y SCREENSHOTS_TEMPLATE_ID a las variables del repositorio antes de hacer push.

Errores que el LLM debe esperar

Comunícaselos al LLM para que pueda recuperarse en lugar de entrar en bucles.

  • 401Bearer token ausente o inválido. Revisa la referencia al secret.
  • 403Límite de tier alcanzado (p. ej. plantillas excedidas) o dueño incorrecto. El LLM no debería reintentar sin cambios.
  • 422Falló la validación del schema. El LLM debe volver a obtener el schema y revalidar antes de postear.
  • 429Rate limit superado. Backoff y reintenta; los límites por tier aplican por key.

Siguientes pasos