Screenshot style QA

An Apify Actor that takes screenshots of UI, analyzes all visible text against the Apify style guide using Claude Vision, and writes results to a Notion database.

Built for the Apify marketing team to systematically audit Console copy for style guide compliance.

---

What it does

1. Accepts one or more publicly accessible screenshot URLs as input
2. Sends each screenshot to Claude (claude-opus-4-6) with the full Apify style guide rules
3. Claude identifies every visible text element and checks it for violations
4. Results (score, issues, good points, description) are written as a new page in a Notion database
5. Results are also pushed to the Apify dataset for easy review in the Console

---

Style rules checked

The Actor checks against the full Apify style guide, including:

• "Actor" capitalization - always uppercase; "task" and "schedule" are always lowercase
• Product names - "Apify Console" (not "the Apify Console"), "Apify Store" (not "the Apify Store"), "the Apify platform" (with "the", lowercase "p")
• Currency format - "$49" or "USD 49", never "49 USD" or "49$"
• Oxford comma - "A, B, and C" not "A, B and C"
• Sentence case - headings and titles in sentence case, not Title Case
• Ampersand - use "and" in body text, "&" only in UI labels or brand names
• Em dash - use " - " (hyphen with spaces), not "—"
• US spelling - "analyze" not "analyse", "color" not "colour"
• UI element formatting - UI elements in bold, not italics
• Tone - direct and active voice, no blame language, no robotic phrases like "Please note that" or "in order to"
• Gender-neutral language - use "they/theirs"
• And many more from the full Apify style guide

---

Input

Field	Type	Required	Description
screenshots	array	Yes	List of { url, name? } objects. URLs must be publicly accessible.
notionApiKey	string	Yes	Notion integration token (create at notion.so/my-integrations).
notionDatabaseId	string	No	ID of an existing Notion database to append results to.
notionParentPageId	string	No*	ID of a Notion page to create a new results database under. Required if notionDatabaseId is not provided.
anthropicApiKey	string	No	Anthropic API key. Falls back to ANTHROPIC_API_KEY environment variable.
additionalRules	string	No	Extra rules to check beyond the built-in style guide, one per line.
scoreThreshold	integer	No	Minimum score for "Needs review" status. Default: 70. Below threshold = Fail, 70-79 = Needs review, 80+ = Pass.

* Either notionDatabaseId or notionParentPageId must be provided.

Example input

{
  "screenshots": [
    {
      "url": "https://storage.googleapis.com/my-bucket/actor-detail.png",
      "name": "Actor detail page"
    },
    {
      "url": "https://storage.googleapis.com/my-bucket/billing-modal.png",
      "name": "Billing upgrade modal"
    }
  ],
  "notionApiKey": "secret_abc123",
  "notionParentPageId": "1234567890abcdef1234567890abcdef",
  "scoreThreshold": 70
}

---

Output

Notion database

Each screenshot gets a new page in the database with:

• Name - screenshot name or filename
• Score - 0-100 compliance score
• Status - Pass / Needs review / Fail
• Screenshot URL - link to the original image
• Issues count - number of style violations found
• Analyzed at - timestamp

Each page also contains blocks with:

• The screenshot embedded
• Context (what UI screen this is)
• Description (what the user sees)
• Summary (overall assessment)
• Issues list - each with: violated rule category, exact problematic text, what rule it breaks, and suggested fix
• Good points list (what's done correctly)

Apify dataset

Each item in the dataset contains:

{
  "screenshotUrl": "https://...",
  "name": "Actor detail page",
  "context": "Actor detail page in Apify Console",
  "description": "Shows the Actor overview tab with title, description, and run button",
  "score": 82,
  "status": "Pass",
  "issuesCount": 2,
  "issues": [
    {
      "type": "capitalization",
      "text": "the Apify Console",
      "problem": "Should be 'Apify Console' without 'the'",
      "suggestion": "Apify Console"
    }
  ],
  "goodPoints": [
    "Correct use of Oxford comma in the feature list"
  ],
  "summary": "Good overall compliance with minor capitalization issues.",
  "analyzedAt": "2026-04-01T10:00:00.000Z"
}

---

Setup

1. Create a Notion integration

1. Go to notion.so/my-integrations
2. Create a new integration with read/write access to pages and databases
3. Copy the integration token (starts with secret_)
4. Open the Notion page where you want results, click Share, and add your integration

2. Get the Anthropic API key

Get your key from console.anthropic.com. The Actor uses claude-opus-4-6.

Set it as the ANTHROPIC_API_KEY environment variable in the Actor's environment settings on the Apify platform, or pass it as the anthropicApiKey input field.

3. Prepare screenshots

Screenshots must be at publicly accessible URLs. Options:

• Upload to Google Cloud Storage, AWS S3, or similar with public read access
• Use Apify's key-value store and make the records public
• Use any CDN or image hosting service

4. Deploy to Apify

apify login
apify push

---

Running locally

npm install
npm run build

# Put your input in storage/key_value_stores/default/INPUT.json
# Set your Anthropic API key
export ANTHROPIC_API_KEY=sk-ant-...

apify run

---

Notes

• The Actor uses claude-opus-4-6 for best vision accuracy on UI screenshots
• Each screenshot is one API call to Claude - costs depend on image resolution and response length
• Screenshots are processed sequentially to respect Notion's API rate limits
• Screenshots with no visible text receive a null score with an explanation in the context field