T-0710 · webflow

Mellio

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

Open Figma brief Open queue JSON Original URL

Visual reference

Screenshots

Figma handoff

Prepare Figma Design Brief

Use this first. It asks the design agent to create an original, Builder-ready Figma design from the TemplateFlow reference.

Open JSON

{
  "packetVersion": "templateflow.figma-brief.v1",
  "sourceReferenceId": "tf-webflow-mellio",
  "sourceTemplateCode": "T-0710",
  "preparedAt": "2026-06-05T20:49:07.109Z",
  "targetSystem": "figma-design-agent",
  "expectedDerivedTemplateCode": "T-0710A",
  "referencePack": {
    "sourcePlatform": "webflow",
    "sourceUrl": "https://webflow.com/templates/html/mellio-website-template",
    "originalUrl": "https://kitpro-mellio.webflow.io/",
    "sourceTemplateName": "Mellio",
    "internalCandidateName": "Mellio",
    "templateCode": "T-0710",
    "category": "Portfolio And Agency",
    "tags": [
      "webflow",
      "portfolio",
      "and",
      "agency"
    ],
    "cmsClassification": {
      "label": "No obvious CMS",
      "likelyCms": false,
      "score": 0.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-mellio/2026-06-05T19-29-29-080Z/desktop.png",
      "mobile": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/mobile.png",
      "subpages": [
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-01.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-02.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-03.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-04.png"
      ],
      "subpageDetails": [
        {
          "label": "Changelog",
          "path": "/utilities/changelog",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-01.png"
        },
        {
          "label": "Instruction",
          "path": "/utilities/instruction",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-02.png"
        },
        {
          "label": "License",
          "path": "/utilities/license",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-03.png"
        },
        {
          "label": "Style Guide",
          "path": "/utilities/style-guide",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-04.png"
        }
      ]
    }
  },
  "figmaDesignInstructions": {
    "objective": "Create a reference-faithful Figma redesign from this source reference. The output must be Conversite Builder-ready and should match the captured screenshots closely while replacing proprietary brand/media/copy.",
    "originalityRules": [
      "Use the 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 photos/media, logos, and client-specific copy unless the operator explicitly requests a broader redesign.",
      "Use original, generated, licensed, or Conversite-hostable replacement media that is visually similar enough to preserve the original composition.",
      "Do not import or trace marketplace HTML, CSS, or proprietary assets."
    ],
    "builderConstraints": [
      "Use Builder-supported page structures, sections, CMS/card/detail patterns, and approved chat entry points.",
      "All user-started chat flows must resolve to canonical /chat.",
      "Do not create custom /chat marketing preludes; let source-aware chat context render automatically from CMS/card handoff fields.",
      "Use canonical sticky site headers where appropriate.",
      "Design desktop, tablet, and mobile states so later Builder/Preview/Published parity can be tested."
    ],
    "deliverables": [
      "Figma file URL",
      "Figma node URL for the approved design frame",
      "Desktop screenshot URL for TemplateFlow comparison",
      "Mobile screenshot URL for TemplateFlow comparison when available",
      "Short notes describing the design direction and any CMS assumptions"
    ]
  },
  "syncBackInstructions": {
    "purpose": "After the Figma design is ready, sync it back to TemplateFlow as a derivedDesign so reviewers can compare the original reference and the Figma reproduction side by side.",
    "commandTemplate": "npm run sync-derived-design -- --source-id tf-webflow-mellio --template-code T-0710A --name \"<new brand/template name>\" --figma-file-url \"<figma file url>\" --figma-node-url \"<figma node url>\" --desktop-screenshot-url \"<desktop screenshot url>\" --mobile-screenshot-url \"<mobile screenshot url>\" --status figma_exported --notes \"<review notes>\"",
    "requiredFields": [
      "source-id",
      "template-code",
      "name",
      "figma-file-url or figma-node-url",
      "desktop-screenshot-url when the design 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-mellio",
  "templateCode": "T-0710",
  "preparedAt": "2026-06-05T20:49:07.109Z",
  "targetSystem": "conversite-template-factory",
  "templateCodePlaceholder": "TEMPLATE_FACTORY_TO_ASSIGN_ORIGINAL_BUILDER_NATIVE_TEMPLATE_CODE",
  "referencePack": {
    "sourcePlatform": "webflow",
    "sourceUrl": "https://webflow.com/templates/html/mellio-website-template",
    "originalUrl": "https://kitpro-mellio.webflow.io/",
    "sourceTemplateName": "Mellio",
    "internalCandidateName": "Mellio",
    "templateCode": "T-0710",
    "category": "Portfolio And Agency",
    "tags": [
      "webflow",
      "portfolio",
      "and",
      "agency"
    ],
    "cmsClassification": {
      "label": "No obvious CMS",
      "likelyCms": false,
      "score": 0.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-mellio/2026-06-05T19-29-29-080Z/desktop.png",
      "mobile": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/mobile.png",
      "subpages": [
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-01.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-02.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-03.png",
        "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-04.png"
      ],
      "subpageDetails": [
        {
          "label": "Changelog",
          "path": "/utilities/changelog",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-01.png"
        },
        {
          "label": "Instruction",
          "path": "/utilities/instruction",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-02.png"
        },
        {
          "label": "License",
          "path": "/utilities/license",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-03.png"
        },
        {
          "label": "Style Guide",
          "path": "/utilities/style-guide",
          "screenshotUrl": "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-04.png"
        }
      ]
    },
    "figmaSourceScreenshotReferences": [
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/desktop.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/mobile.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-01.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-02.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/subpage-03.png",
      "https://templateflow-assets.apps.emubrain.com/reference-packs/tf-webflow-mellio/2026-06-05T19-29-29-080Z/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 design as the primary visual source for the Conversite build."
    ]
  },
  "status": "captured",
  "conversiteQueueItemId": null
}

Design sync

Sync Figma output back

After the Figma design is ready, run this command with the real Figma and screenshot URLs. TemplateFlow will show the result side by side with the original reference.

npm run sync-derived-design -- --source-id tf-webflow-mellio --template-code T-0710A --name "<new brand/template name>" --figma-file-url "<figma file url>" --figma-node-url "<figma node url>" --desktop-screenshot-url "<desktop screenshot url>" --mobile-screenshot-url "<mobile screenshot url>" --status figma_exported --notes "<review notes>"

Pipeline status

TemplateFlow → Figma → 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 Figma
Reference is approved for original Figma redesign.
4
In Figma
A design agent is producing a Builder-ready Figma version.
5
Figma exported
A Figma reproduction has been synced back for comparison.
6
Approved for Conversite
Design is ready to enter the Conversite Template Factory.
7
Queued in Conversite
Approved design has been sent to the Conversite build queue.
8
Built on staging
Conversite staging build exists and is ready for review.
9
Production ready
Template passed review and can be promoted for launch use.

npm run update-reference-status -- --source-id tf-webflow-mellio --status selected_for_figma

npm run update-reference-status -- --source-id tf-webflow-mellio --status in_figma

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

Figma jobs

Design job history

Loading design jobs...

Generated designs

D1-synced Figma designs

Loading generated designs...