Generate Stunning UI Designs with the justingirard/draft-ui-designer Cognitive Actions

25 Apr 2025
Generate Stunning UI Designs with the justingirard/draft-ui-designer Cognitive Actions

In the fast-paced world of application development, creating visually appealing user interfaces is crucial for user engagement and satisfaction. The justingirard/draft-ui-designer Cognitive Actions provide developers with powerful tools to automatically generate user interface designs using a fine-tuned FLUX model. These pre-built actions not only streamline the design process but also ensure high-quality and accurate results, enabling developers to focus more on functionality and less on design intricacies.

Prerequisites

Before diving into the integration of the Cognitive Actions, ensure you have an API key for the Cognitive Actions platform. This key is essential for authenticating your requests. Conceptually, you'll pass the API key in the headers of your requests to access the actions seamlessly.

Cognitive Actions Overview

Generate UI Design from Flux Model

Description: This action allows you to generate user interface designs using a fine-tuned FLUX model. It leverages the model's capabilities to predict and create detailed UI designs, offering options for fast mode and multiple outputs.

Category: Image Generation

Input

The input schema for this action requires several fields, with the prompt being mandatory. Here’s a breakdown of the input parameters:

  • prompt: Instruction or description to generate the image. E.g., "A screen that shows many items to buy from a shop, including pricing information. The design should look like THE_SLEEK_UI."
  • image (optional): URI of an input image for image-to-image or inpainting mode.
  • width (optional): Target width of the generated image in pixels (e.g., 1024).
  • height (optional): Target height of the generated image in pixels (e.g., 1024).
  • numOutputs (optional): Number of images to generate (1-4).
  • aspectRatio (optional): Aspect ratio of the generated image (default is "1:1").
  • outputFormat (optional): File format for the output images (default is "webp").
  • mainLoraScale (optional): Influences the application strength of the main LoRA (default is 1).
  • outputQuality (optional): Defines the quality level for saving output images (0-100).
  • inferenceModel (optional): Select the model for performing inference (default is "dev").
  • promptStrength (optional): Influences the amount of alteration applied in img2img mode (default is 0.8).
  • numInferenceSteps (optional): Specifies the number of denoising steps (default is 28).
  • additionalLoraScale (optional): Controls the application strength of additional LoRA (default is 1).
  • diffusionGuidanceScale (optional): Sets the scale for diffusion guidance (default is 3).

Example Input:

{
  "image": "https://replicate.delivery/pbxt/Lw7tTNZgCZfNZJovklt6rYqnUiCZ9XUOs89V2CSCsn9OyXjJ/Untitled.png",
  "width": 1024,
  "height": 1024,
  "prompt": "A screen that shows many items to buy from a shop, including pricing information. The design should look like THE_SLEEK_UI.",
  "numOutputs": 1,
  "aspectRatio": "1:1",
  "outputFormat": "webp",
  "mainLoraScale": 1,
  "outputQuality": 90,
  "inferenceModel": "dev",
  "promptStrength": 0.75,
  "numInferenceSteps": 28,
  "additionalLoraScale": 1,
  "diffusionGuidanceScale": 3.24
}

Output

The action typically returns a list of URLs pointing to the generated images. Here’s an example of a possible output:

Example Output:

[
  "https://assets.cognitiveactions.com/invocations/0a9528d8-0f8d-4f1d-822c-bbd42ef902b8/7b895ba0-4166-4155-99b2-edc9d73dc97f.webp"
]

Conceptual Usage Example (Python)

Here’s how you might call the Generate UI Design from Flux Model action using Python:

import requests
import json

# Replace with your Cognitive Actions API key and endpoint
COGNITIVE_ACTIONS_API_KEY = "YOUR_COGNITIVE_ACTIONS_API_KEY"
COGNITIVE_ACTIONS_EXECUTE_URL = "https://api.cognitiveactions.com/actions/execute" # Hypothetical endpoint

action_id = "41c39c95-1b65-4df9-94b6-75d6987ba99b" # Action ID for Generate UI Design from Flux Model

# Construct the input payload based on the action's requirements
payload = {
    "image": "https://replicate.delivery/pbxt/Lw7tTNZgCZfNZJovklt6rYqnUiCZ9XUOs89V2CSCsn9OyXjJ/Untitled.png",
    "width": 1024,
    "height": 1024,
    "prompt": "A screen that shows many items to buy from a shop, including pricing information. The design should look like THE_SLEEK_UI.",
    "numOutputs": 1,
    "aspectRatio": "1:1",
    "outputFormat": "webp",
    "mainLoraScale": 1,
    "outputQuality": 90,
    "inferenceModel": "dev",
    "promptStrength": 0.75,
    "numInferenceSteps": 28,
    "additionalLoraScale": 1,
    "diffusionGuidanceScale": 3.24
}

headers = {
    "Authorization": f"Bearer {COGNITIVE_ACTIONS_API_KEY}",
    "Content-Type": "application/json"
}

try:
    response = requests.post(
        COGNITIVE_ACTIONS_EXECUTE_URL,
        headers=headers,
        json={"action_id": action_id, "inputs": payload} # Hypothetical structure
    )
    response.raise_for_status() # Raise an exception for bad status codes (4xx or 5xx)

    result = response.json()
    print("Action executed successfully:")
    print(json.dumps(result, indent=2))

except requests.exceptions.RequestException as e:
    print(f"Error executing action {action_id}: {e}")
    if e.response is not None:
        print(f"Response status: {e.response.status_code}")
        try:
            print(f"Response body: {e.response.json()}")
        except json.JSONDecodeError:
            print(f"Response body: {e.response.text}")

In this example, replace YOUR_COGNITIVE_ACTIONS_API_KEY with your actual API key. The action ID is specified, and the input JSON payload is structured according to the action's requirements.

Conclusion

The justingirard/draft-ui-designer Cognitive Actions empower developers to generate high-quality UI designs efficiently. By leveraging the capabilities of the FLUX model, developers can automate design tasks, allowing them to focus more on creating exceptional applications. Whether you're looking to enhance your existing applications or start a new project, these Cognitive Actions provide an excellent starting point for innovative design solutions. Consider exploring further use cases and integrating these actions into your development workflow!

← Back to All Articles