Comfy-Org · mintlify · Mar 10, 2026 · Mar 10, 2026 · Mar 10, 2026 · Mar 10, 2026
diff --git a/tutorials/3d/hunyuan3D-2.mdx b/tutorials/3d/hunyuan3D-2.mdx
@@ -47,9 +47,9 @@ In the Hunyuan3D-2mv workflow, we'll use multi-view images to generate a 3D mode
 
 <UpdateReminder/>
 
-<a className="prose" target='_blank' href="https://cloud.comfy.org/?template=3d_hunyuan3d_multiview_to_model&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28A745', color: '#FFFFFF', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=3d_hunyuan3d_multiview_to_model&utm_source=docs">
+  Open this workflow directly in Comfy Cloud
+</Card>
 
 ### 1. Workflow
 
@@ -94,9 +94,9 @@ If you need to add more views, make sure to load other view images in the `Hunyu
 
 In the Hunyuan3D-2mv-turbo workflow, we'll use the Hunyuan3D-2mv-turbo model to generate 3D models. This model is a step distillation version of Hunyuan3D-2mv, allowing for faster 3D model generation. In this version of the workflow, we set `cfg` to 1.0 and add a `flux guidance` node to control the `distilled cfg` generation.
 
-<a className="prose" target='_blank' href="https://cloud.comfy.org/?template=3d_hunyuan3d_multiview_to_model_turbo&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28A745', color: '#FFFFFF', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=3d_hunyuan3d_multiview_to_model_turbo&utm_source=docs">
+  Open this workflow directly in Comfy Cloud
+</Card>
 
 ### 1. Workflow
 
@@ -136,9 +136,9 @@ ComfyUI/
 
 In the Hunyuan3D-2 workflow, we'll use the Hunyuan3D-2 model to generate 3D models. This model is not a multi-view model. In this workflow, we use the `Hunyuan3Dv2Conditioning` node instead of the `Hunyuan3Dv2ConditioningMultiView` node.
 
-<a className="prose" target='_blank' href="https://cloud.comfy.org/?template=3d_hunyuan3d_image_to_model&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28A745', color: '#FFFFFF', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=3d_hunyuan3d_image_to_model&utm_source=docs">
+  Open this workflow directly in Comfy Cloud
+</Card>
 
 ### 1. Workflow
 

diff --git a/tutorials/audio/ace-step/ace-step-v1.mdx b/tutorials/audio/ace-step/ace-step-v1.mdx
@@ -25,9 +25,9 @@ You can visit their [Github](https://github.com/ace-step/ACE-Step?tab=readme-ov-
 
 Click the button below to download the corresponding workflow file. Drag it into ComfyUI to load the workflow information. The workflow includes model download information.
 
-<a className="prose"  target='_blank' href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/audio/ace-step/ace_step_1_t2m.json" style={{ display: 'inline-block', backgroundColor: '#0078D6', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Download Json Format Workflow File</p>
-</a>
+<Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/audio/ace-step/ace_step_1_t2m.json">
+  Download the JSON workflow file for local use
+</Card>
 
 You can also manually download [ace_step_v1_3.5b.safetensors](https://huggingface.co/Comfy-Org/ACE-Step_ComfyUI_repackaged/blob/main/all_in_one/ace_step_v1_3.5b.safetensors) and save it to the `ComfyUI/models/checkpoints` folder
 
@@ -50,15 +50,14 @@ Similar to image-to-image workflows, you can input a piece of music and use the
 
 Click the button below to download the corresponding workflow file. Drag it into ComfyUI to load the workflow information.
 
-<a className="prose"  target='_blank' href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/audio/ace-step/ace_step_1_m2m_editing.json" style={{ display: 'inline-block', backgroundColor: '#0078D6', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Download Json Format Workflow File</p>
-</a>
-
-Download the following audio file as the input audio:
-
-<a className="prose"   target='_blank' href="https://github.com/Comfy-Org/example_workflows/raw/refs/heads/main/audio/ace-step/input.mp3" style={{ display: 'inline-block', backgroundColor: '#0078D6', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Download Example Audio File for Input</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/audio/ace-step/ace_step_1_m2m_editing.json">
+    Download the JSON workflow file for local use
+  </Card>
+  <Card title="Download Audio" icon="download" href="https://github.com/Comfy-Org/example_workflows/raw/refs/heads/main/audio/ace-step/input.mp3">
+    Download the example audio file for input
+  </Card>
+</CardGroup>
 
 
 ### 2. Complete the Workflow Step by Step

diff --git a/tutorials/flux/flux-1-controlnet.mdx b/tutorials/flux/flux-1-controlnet.mdx
@@ -40,9 +40,14 @@ For image preprocessors, you can use the following custom nodes to complete imag
 
 ## FLUX.1-Canny-dev Complete Version Workflow
 
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux_canny_model_example&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux_canny_model_example&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/controlnet/flux-1-canny-dev.png">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 ### 1. Workflow and Asset
 
@@ -106,9 +111,14 @@ Or use the following custom nodes to complete image preprocessing:
 
 ## FLUX.1-Depth-dev-lora Workflow
 
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux_depth_lora_example&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux_depth_lora_example&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/controlnet/flux-1-depth-dev-lora.png">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 The LoRA version workflow builds on the complete version by adding the LoRA model. Compared to the [complete version of the Flux workflow](/tutorials/flux/flux-1-text-to-image), it adds nodes for loading and using the corresponding LoRA model.
 

diff --git a/tutorials/flux/flux-1-fill-dev.mdx b/tutorials/flux/flux-1-fill-dev.mdx
@@ -53,13 +53,14 @@ ComfyUI/
 
 ### 1. Inpainting workflow and asset
 
-<a className="prose"  target='_blank'  href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/inpaint/flux_fill_inpaint.png" style={{ display: 'inline-block', backgroundColor: '#0078D6', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold', marginRight: '10px'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Download Workflow Image</p>
-</a>
-
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux_fill_inpaint_example&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux_fill_inpaint_example&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/inpaint/flux_fill_inpaint.png">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 Please download the image below and drag it into ComfyUI to load the corresponding workflow
 ![ComfyUI Flux.1 inpaint](https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/inpaint/flux_fill_inpaint.png)

diff --git a/tutorials/flux/flux-1-kontext-dev.mdx b/tutorials/flux/flux-1-kontext-dev.mdx
@@ -72,9 +72,14 @@ Model save location
 
 ## Flux.1 Kontext Dev Workflow
 
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux_kontext_dev_basic&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux_kontext_dev_basic&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/kontext/dev/flux_1_kontext_dev_basic.png">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 This workflow uses the `Load Image(from output)` node to load the image to be edited, making it more convenient for you to access the edited image for multiple rounds of editing.
 

diff --git a/tutorials/flux/flux-1-text-to-image.mdx b/tutorials/flux/flux-1-text-to-image.mdx
@@ -46,9 +46,14 @@ If you can't download models from [black-forest-labs/FLUX.1-dev](https://hugging
 Please download the image below and drag it into ComfyUI to load the workflow.
 ![Flux Dev Original Version Workflow](https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/text-to-image/flux_dev_t5fp16.png)
 
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux_dev_checkpoint_example&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux_dev_checkpoint_example&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/text-to-image/flux_dev_t5fp16.png">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 #### 2. Manual Model Installation
 
@@ -100,9 +105,14 @@ Please download the image below and drag it into ComfyUI to load the workflow.
 
 ![Flux Schnell Version Workflow](https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/text-to-image/flux_schnell_t5fp8.png)
 
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux_schnell&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux_schnell&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/text-to-image/flux_schnell_t5fp8.png">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 #### 2. Manual Models Installation
 
@@ -154,9 +164,14 @@ Please download the image below and drag it into ComfyUI to load the workflow.
 
 ![Flux Dev fp8 Checkpoint Version Workflow](https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/text-to-image/flux_dev_fp8.png)
 
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux_dev_full_text_to_image&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux_dev_full_text_to_image&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/text-to-image/flux_dev_fp8.png">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 Please download [flux1-dev-fp8.safetensors](https://huggingface.co/Comfy-Org/flux1-dev/resolve/main/flux1-dev-fp8.safetensors?download=true) and save it to the `ComfyUI/models/checkpoints/` directory.
 

diff --git a/tutorials/flux/flux-1-uso.mdx b/tutorials/flux/flux-1-uso.mdx
@@ -29,18 +29,14 @@ Download the image below and drag it into ComfyUI to load the corresponding work
 
 ![Workflow](https://raw.githubusercontent.com/Comfy-Org/example_workflows/refs/heads/main/flux/bytedance-uso/bytedance-uso.png)
 
-<a 
-className="prose"
-target='_blank'
-href="https://raw.githubusercontent.com/Comfy-Org/workflow_templates/refs/heads/main/templates/flux1_dev_uso_reference_image_gen.json"
-style={{ display: 'inline-block', backgroundColor: '#0078D6', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold', marginRight: '10px'}}
->
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Download JSON Workflow</p>
-</a>
-
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux1_dev_uso_reference_image_gen&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux1_dev_uso_reference_image_gen&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/workflow_templates/refs/heads/main/templates/flux1_dev_uso_reference_image_gen.json">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 Use the image below as an input image.
 

diff --git a/tutorials/flux/flux-2-dev.mdx b/tutorials/flux/flux-2-dev.mdx
@@ -28,15 +28,31 @@ We are using quantized weights in this workflow. The original FLUX.2 repository
 
 <UpdateReminder/>
 
-## Flux.2 Dev Workflow
-
-<a className="prose"  target='_blank'  href="https://raw.githubusercontent.com/Comfy-Org/workflow_templates/refs/heads/main/templates/image_flux2.json" style={{ display: 'inline-block', backgroundColor: '#0078D6', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold', marginRight: '10px'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Download JSON Workflow File</p>
-</a>
-
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=image_flux2&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+## Single image generation workflow
+
+Basic text-to-image workflow for generating single images with FLUX.2 Dev.
+
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=image_flux2&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/workflow_templates/refs/heads/main/templates/image_flux2.json">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
+
+## Multi-image reference workflow
+
+A 2-image reference workflow example. You can extend this implementation to support more reference images.
+
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=image_flux2_fp8&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/comfyui-wiki/workflow_templates/refs/heads/main/templates/image_flux2_fp8.json">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 ## Model links
 

diff --git a/tutorials/flux/flux1-krea-dev.mdx b/tutorials/flux/flux1-krea-dev.mdx
@@ -29,13 +29,14 @@ This model is released under the [flux-1-dev-non-commercial-license](https://hug
 Download the image or JSON below and drag it into ComfyUI to load the corresponding workflow
 ![Flux Krea Dev Workflow](https://raw.githubusercontent.com/Comfy-Org/example_workflows/main/flux/krea/flux1_krea_dev.png)
 
-<a className="prose"  target='_blank'  href="https://raw.githubusercontent.com/Comfy-Org/workflow_templates/refs/heads/main/templates/flux1_krea_dev.json" style={{ display: 'inline-block', backgroundColor: '#0078D6', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold', marginRight: '10px'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Download JSON Workflow</p>
-</a>
-
-<a className="prose"  target='_blank'  href="https://cloud.comfy.org/?template=flux1_krea_dev&utm_source=docs" style={{ display: 'inline-block', backgroundColor: '#28a745', color: '#ffffff', padding: '10px 20px', borderRadius: '8px', borderColor: "transparent", textDecoration: 'none', fontWeight: 'bold'}}>
-    <p className="prose" style={{ margin: 0, fontSize: "0.8rem" }}>Run on Comfy Cloud</p>
-</a>
+<CardGroup cols={2}>
+  <Card title="Run on Comfy Cloud" icon="cloud" href="https://cloud.comfy.org/?template=flux1_krea_dev&utm_source=docs">
+    Open this workflow directly in Comfy Cloud
+  </Card>
+  <Card title="Download Workflow" icon="download" href="https://raw.githubusercontent.com/Comfy-Org/workflow_templates/refs/heads/main/templates/flux1_krea_dev.json">
+    Download the JSON workflow file for local use
+  </Card>
+</CardGroup>
 
 #### 2. Manual Model Installation