T-1537 · webflow

Refine

Ingested candidate. Review screenshots before using as a production reference pack.

Open prototype brief Open queue JSON Original URL

Visual reference

Screenshots

T-1537 Refine How Our Clients Receive Daily Marketing Goals screenshot

T-1537 Refine Individual Plan screenshot

Prototype handoff

Prepare URL Prototype Brief

Use this first. It asks the agent to create a live, reviewable URL prototype from the TemplateFlow screenshots.

Open JSON

{
  "packetVersion": "templateflow.prototype-brief.v1",
  "sourceReferenceId": "tf-webflow-refine",
  "sourceTemplateCode": "T-1537",
  "preparedAt": "2026-06-06T12:30:10.585Z",
  "targetSystem": "templateflow-url-prototype-agent",
  "expectedDerivedTemplateCode": "T-1537A",
  "referencePack": {
    "sourcePlatform": "webflow",
    "sourceUrl": "https://webflow.com/templates/html/refine-website-template",
    "originalUrl": "https://refine-template.webflow.io/",
    "sourceTemplateName": "Refine",
    "internalCandidateName": "Refine",
    "templateCode": "T-1537",
    "category": "Portfolio And Agency",
    "tags": [
      "webflow",
      "portfolio",
      "and",
      "agency"
    ],
    "cmsClassification": {
      "label": "CMS likely",
      "likelyCms": true,
      "score": 7,
      "decisionSource": "Computed from category, tags, CMS hints, review scores, chat/layout notes, and captured subpage paths."
    },
    "screenshots": {
      "desktop": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/desktop.png",
      "mobile": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/mobile.png",
      "subpages": [
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-01.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-02.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-03.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-04.png"
      ],
      "subpageDetails": [
        {
          "label": "Article",
          "path": "/article",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-01.png"
        },
        {
          "label": "How Our Clients Receive Daily Marketing Goals",
          "path": "/article/how-our-clients-receive-daily-marketing-goals",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-02.png"
        },
        {
          "label": "Pricing",
          "path": "/pricing",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-03.png"
        },
        {
          "label": "Individual Plan",
          "path": "/product/individual-plan",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-04.png"
        }
      ]
    }
  },
  "prototypeInstructions": {
    "objective": "Create a live TemplateFlow URL prototype from this source reference. The prototype should be a close, reviewable HTML/CSS mockup that is easier to convert into a Conversite Builder-native template than a Figma file.",
    "fidelityRules": [
      "Use the captured TemplateFlow screenshots as the visual source of truth.",
      "Preserve section order, layout, spacing, proportions, visual rhythm, colour feel, typography scale, border radius, card treatment, navbar structure, hero composition, and mobile stacking.",
      "Change only brand/name, proprietary media, logos, and client-specific copy unless the operator explicitly asks for broader changes.",
      "Replace photos with generated, licensed, or placeholder media that keeps the same composition and visual weight.",
      "Make review-critical prototype images load deterministically in automated screenshots; do not lazy-load images that affect the visual comparison.",
      "Do not import or trace marketplace HTML, CSS, JS, or proprietary assets.",
      "The output must be recognisably the same design system and page structure when compared side by side with the captured screenshots."
    ],
    "builderConstraints": [
      "Use only patterns that can later be represented in Conversite Builder: normal sections, cards, galleries, CMS list/detail pages, canonical sticky headers, and approved chat entry points.",
      "All user-started chat flows must resolve to /chat.",
      "Do not create custom /chat marketing preludes; let source-aware chat context render automatically from CMS/card handoff fields later.",
      "If the reference suggests CMS, prototype a listing page and at least one detail page.",
      "Include desktop and mobile responsive states that can be screenshot-tested."
    ],
    "deliverables": [
      "Live TemplateFlow prototype URL",
      "Homepage route plus one or two representative subpage/detail routes when useful",
      "Desktop screenshot URL for TemplateFlow comparison",
      "Mobile screenshot URL for TemplateFlow comparison",
      "Short notes describing CMS assumptions, hero media decision, and any fidelity compromises"
    ]
  },
  "syncBackInstructions": {
    "purpose": "After the URL prototype is ready, sync it back to TemplateFlow as a derivedDesign so reviewers can compare the original reference and live prototype before Conversite build handoff.",
    "commandTemplate": "npm run sync-prototype -- --source-id tf-webflow-refine --template-code T-1537A --name \"<new brand/template name>\" --prototype-url \"<prototype url>\" --desktop-screenshot-url \"<desktop screenshot url>\" --mobile-screenshot-url \"<mobile screenshot url>\" --status prototype_ready --notes \"<review notes>\"",
    "requiredFields": [
      "source-id",
      "template-code",
      "name",
      "prototype-url",
      "desktop-screenshot-url when the prototype is ready for visual comparison"
    ]
  }
}

Reference Notes

License

Marketplace or public source. Use as inspiration/reference only; do not copy source HTML, CSS, copy, imagery, or exact composition.

CMS Hints

Review after capture.

Chat Entry

Review after capture. Any chat entry must resolve to canonical /chat.

Queue output

Prepare Conversite Queue Packet

Copy this structured inspiration packet into the Conversite Template Factory queue. It contains screenshot references and constraints only.

{
  "packetVersion": "templateflow.queue-packet.v1",
  "sourceReferenceId": "tf-webflow-refine",
  "templateCode": "T-1537",
  "preparedAt": "2026-06-06T12:30:10.585Z",
  "targetSystem": "conversite-template-factory",
  "templateCodePlaceholder": "TEMPLATE_FACTORY_TO_ASSIGN_ORIGINAL_BUILDER_NATIVE_TEMPLATE_CODE",
  "referencePack": {
    "sourcePlatform": "webflow",
    "sourceUrl": "https://webflow.com/templates/html/refine-website-template",
    "originalUrl": "https://refine-template.webflow.io/",
    "sourceTemplateName": "Refine",
    "internalCandidateName": "Refine",
    "templateCode": "T-1537",
    "category": "Portfolio And Agency",
    "tags": [
      "webflow",
      "portfolio",
      "and",
      "agency"
    ],
    "cmsClassification": {
      "label": "CMS likely",
      "likelyCms": true,
      "score": 7,
      "decisionSource": "Computed from category, tags, CMS hints, review scores, chat/layout notes, and captured subpage paths."
    },
    "screenshots": {
      "desktop": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/desktop.png",
      "mobile": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/mobile.png",
      "subpages": [
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-01.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-02.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-03.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-04.png"
      ],
      "subpageDetails": [
        {
          "label": "Article",
          "path": "/article",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-01.png"
        },
        {
          "label": "How Our Clients Receive Daily Marketing Goals",
          "path": "/article/how-our-clients-receive-daily-marketing-goals",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-02.png"
        },
        {
          "label": "Pricing",
          "path": "/pricing",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-03.png"
        },
        {
          "label": "Individual Plan",
          "path": "/product/individual-plan",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-04.png"
        }
      ]
    },
    "sourceScreenshotReferences": [
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/desktop.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/mobile.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-01.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-02.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-03.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-refine/2026-06-06T09-23-26-358Z/subpage-04.png"
    ],
    "derivedDesigns": []
  },
  "buildPreferences": {
    "cmsPreference": "Review after capture.",
    "heroMediaPreference": "Use original Conversite-approved imagery or generated/source-owned media. Do not reuse marketplace screenshots as final hero assets.",
    "chatEntrySuggestion": "Review after capture. Any chat entry must resolve to canonical /chat."
  },
  "notes": {
    "license": "Marketplace or public source. Use as inspiration/reference only; do not copy source HTML, CSS, copy, imagery, or exact composition.",
    "layout": "Ingested candidate. Review screenshots before using as a production reference pack.",
    "cms": "Review after capture.",
    "originality": "Treat this packet as inspiration and reference input only. Do not copy commercial template HTML, CSS, copy, imagery, or exact composition into Conversite.",
    "requiredConversiteConventions": [
      "All user-started chat flows must resolve to canonical /chat.",
      "Final output must be Builder-native.",
      "External source HTML/CSS must not be injected into Conversite.",
      "Use original copy, images, sections, and components.",
      "If selectedDerivedDesign is present, use that approved URL prototype or derived design as the primary visual source for the Conversite build."
    ]
  },
  "status": "captured",
  "conversiteQueueItemId": null
}

Design sync

Sync prototype output back

After the URL prototype is ready, run this command with the live prototype and screenshot URLs. TemplateFlow will show the result side by side with the original reference.

npm run sync-prototype -- --source-id tf-webflow-refine --template-code T-1537A --name "<new brand/template name>" --prototype-url "<prototype url>" --desktop-screenshot-url "<desktop screenshot url>" --mobile-screenshot-url "<mobile screenshot url>" --status prototype_ready --notes "<review notes>"

Pipeline status

TemplateFlow → Prototype → Conversite

Captured

1
Candidate
Source has been identified but not fully captured.
2
Captured
Reference screenshots and notes are available for review.
3
Selected for prototype
Reference is approved for live URL prototype generation.
4
In prototype
An agent is producing a live, reviewable URL prototype.
5
Prototype ready
A live prototype has been synced back for comparison.
6
Legacy Figma selected
Legacy Figma status retained for old records.
7
Legacy Figma
Legacy Figma status retained for old records.
8
Legacy Figma exported
Legacy Figma reproduction retained for old records.
9
Approved for Conversite
Design is ready to enter the Conversite Template Factory.
10
Queued in Conversite
Approved design has been sent to the Conversite build queue.
11
Built on staging
Conversite staging build exists and is ready for review.
12
Production ready
Template passed review and can be promoted for launch use.

npm run update-reference-status -- --source-id tf-webflow-refine --status selected_for_prototype

npm run update-reference-status -- --source-id tf-webflow-refine --status in_prototype

npm run update-reference-status -- --source-id tf-webflow-refine --status approved_for_conversite

Prototype jobs

Prototype job history

Loading prototype jobs...

Generated designs

D1-synced prototypes

Loading generated designs...