Construa com Claude, ChatGPT, Cursor ou qualquer LLM

Entregue sua API key a um LLM. Receba capturas e CI/CD.

O Screenshots.live expõe um JSON Schema e uma especificação OpenAPI em URLs estáveis. Um LLM com a sua API key pode criar templates, posicionar items, gerar um workflow do GitHub Actions e disparar renders — sem que você escreva uma linha de código.

Como funciona

  1. 1

    Crie uma API key

    Faça login e crie uma key no painel. Copie-a uma vez (começa com sa_live_) e armazene como secret. Ela autentica tanto a criação de templates quanto os renders.

  2. 2

    Dê ao LLM o system prompt + sua key

    Cole o system prompt abaixo no Claude, ChatGPT, Cursor ou qualquer agente. Adicione sua especificação. O LLM lê o schema e faz POST de templates e items em seu nome.

  3. 3

    Deixe o LLM escrever o workflow

    Peça um workflow do GitHub Actions. O LLM emite YAML usando a render-screenshots-action oficial, referencia o seu secret e produz um artefato baixável a cada push.

System prompt para copiar e colar

Cole isto no campo system de qualquer ferramenta LLM. Aponta o modelo para as URLs do schema e estabelece as regras básicas para que ele produza payloads válidos em vez de alucinar 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 legível por máquina

Duas URLs estáveis que um LLM pode buscar diretamente. A primeira é filtrada para estruturas de templates; a segunda é a especificação OpenAPI pública completa de cada endpoint que sua API key pode usar.

JSON Schema dos templates
https://api.screenshots.live/schema/templates.json
Especificação 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 mais usados pelos LLMs

Todos os endpoints aceitam sua API key sa_live_ como Bearer token. Templates e items pertencem ao dono da key; rate limits são por tier.

MétodoCaminhoPropó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.

Autenticação

Envie Authorization: Bearer sa_live_<sua-key>. A mesma key autentica o CRUD de templates, o CRUD de items e o dispatch de renders — sem 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"
    }
  }'

Vocabulário que o LLM deve fixar

Estes enums vêm direto do schema. Fixá-los no system prompt impede o modelo de inventar valores que falham com 422.

Tipos de item
TextDeviceFrameImageShapeCanvasBackgroundHtml
Categorias de tamanho de tela
MobileTabletDesktopCustom

Workflow CI/CD de exemplo

Um LLM que segue o prompt acima vai produzir algo como isto. A action cuida da chamada YAML de render, dos retries e do upload do artefato.

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/

Adicione SCREENSHOTS_LIVE_API_KEY aos secrets do repositório e SCREENSHOTS_TEMPLATE_ID às variáveis do repositório antes de fazer push.

Erros que os LLMs devem esperar

Repasse-os ao LLM para que ele se recupere em vez de entrar em loop.

  • 401Bearer token ausente ou inválido. Confira a referência ao secret.
  • 403Limite de tier atingido (p. ex. nº de templates excedido) ou dono errado. O LLM não deve repetir sem mudanças.
  • 422Validação de schema falhou. O LLM deve buscar o schema novamente e revalidar antes de postar.
  • 429Rate limit excedido. Backoff e tente de novo; limites por tier valem por key.

Próximos passos