LLM Template Generation Guide

Overview

When LLMs generate code for Lucit Templates, they can use this guide as a tool to correctly build the required HTML, CSS and Optional JS for a template

Objective

When a user of an LLM asks it to generate a Digital OOH (Billboard / Signage) Advertising Template in Lucit, the LLM should produce a beautiful customized template for the user, that they can then copy and paste directly into Lucit and take over editing from there. OR, iterate with the LLM on improvements.

Pre-Requisite

An LLM should read everything in Lucit Templates Guide in order to have a good working knowledge of the Lucit Template Architecure.

Step by Step Guide For LLMs

1. Review Review the user request and develop a list of layers that should be added to the creative
2. Elements For each layer, determine the best element to add
3. Dynamic Element Macros If the template will have dynamic macro elements, determine if the user needs to first add one of our pre-built Applications or if they will need to build a new custom app.
4. HTML Create the HTML elements based on the layers
5. Sizes Determine which one (or more) of the Screen Sizes you will be creating this design for
6. CSS Create the CSS
7. JS If required, create the JS
8. Output Output individual code blocks each for HTML, CSS and JavaScript

Review

When a user is asking an LLM for help, they are typically trying to build an advertising creative that will look amazing and beautiful.

Your job as an LLM is to help them do that.

When you evaluate their request, create a list of layers you will need to fulfill their desired design.

When you think about layers, think about them in the same concept that you would in any design tool such as Canva, or Photoshop or Illustrator

These layers will be created as individual <div> elements that are absolutely positioned within the HTML document in order to make the creative responsive.

Elements

Once you have identified the list of layers you wish to create, you must then best determine the best type for each layer

You can pick from one of the following types for each layer

Type	Notes	CSS Class	Use Cases
Text	A div that contains text	lc_dt_text	Styled text content
Image	A div with a background image	lc_dt_image	Images, Logos, Backgrounds
Object (HTML)	A div that contains HTML	lc_dt_object	Custom functionality and components
Object (SVG)	A div that contains SVG	lc_dt_object_svg	Creating amazing visuals, icons, graphics, etc.

HTML

Once you have identified the layers you need to create. Create the HTML document composed of each layer.

Rules: * DO NOT place ANY STYLES into the style tag EXCEPT for background-image (all other styles MUST BE in the CSS) * Note, this is because background-image is handled in the designer differently then all other CSS editing tools. Because of this, we put background-image directly into the style tag * DO NOT place ANY positioning in the style tag - Again, this MUST be in the CSS * Follow all of the rules listed below in HTML RULES AND EXAMPLES and in the HTML Guide * {rndstring} should be replaced with a randomly generated 8-character lowercase alphanumeric string (a-z, 0-9)

IMPORTANT: You must follow the RULES for each of the types when creating your HTML. Any listed rules are NON NEGOTIABLE and supercede any ideas you have about how it should be done.

CSS

For each layer in the HTML, create a CSS document that positions and styles each layer.

Rules: * Every Element Layer should have its OWN CSS BLOCK using the id of the element * DO NOT combine multiple elements into a single CSS declaration * Positioning, height and width must use percentages * position:absolute is provided by the object CSS Classes (lc_dt_text, lc_dt_image, etc.) so you do not have to specify this * FONTS: ONLY CHOOSE from the list of Available Lucit Fonts * Follow ALL rules in the CSS Guide

JS

If javascript functions are required for advanced functionality, develop the required javascript code using the Javascript Guide

Output

Write the HTML, CSS, and JS to the output so the user can copy and paste each one into the Lucit Template Designer Code Editor

• HTML Each individual div in order. Do NOT wrap in any container div.
• CSS
  • Responsive Template or Single Screen Size
    • Provide a single CSS document
  • Multiple sizes with different positioning, images, or elements
    • Produce a complete CSS document for EACH SIZE
    • See a size reference here
• JS If JS will be required, produce a single JS document

HTML RULES AND EXAMPLES

Decision Tree

• Static Text or Dynamic Element with Macro
  • Static Text :
    • x-objectcode any text slug in snake case
    • x-fieldname Same the object-code. This is the layer name
    • class lc_ut_designer lc_dt_element lc_dt_text lc_dt_text_editable lc_format_fit_text
    • id Generate a unique id in the following form obj_{objectcode}_{rndstring}
    • title Required
    • style MUST BE EMPTY STRING
    • Inner HTML - The Text you want to display
    • Example :

      <div x-objectcode="your_new_text" class="lc_ut_designer lc_dt_element lc_dt_text lc_dt_text_editable lc_format_fit_text" id="obj_your_new_text_k8dkb4kj" title="Your New Text" style="" x-fieldname="your_new_text">Your New Text</div>
      

  • Dynamic Element with Macro :
    • x-objectcode the Macro Object Code
    • x-fieldname The name of the macro
    • id Generate a unique id in the following form `data_source_text_{rndstring}
    • class lc_ut_designer lc_dt_data lc_dt_text lc_format_fit_text
    • title Required, use the Field Name
    • style MUST BE AN EMPTY STRING
    • x-optional-field set to false unless this field will not be required during post ad
    • data-value MUST be set to the macro code. See Macro Reference and Application Reference
    • Inner Html - MUST be set to the macro code

      <div
          id="data_source_text_fldrsep6"
          title=""
          x-objectcode="item_title"
          class="lc_ut_designer lc_dt_data lc_dt_text lc_format_fit_text"
          x-placeholder="Your Caption"
          x-optional-field="false"
          x-fieldname="Title"
          data-value="{item.title}">
          {item.title}
      </div>
      

• Image

  • SVG or Image?
    • SVG
      • x-objectcode Existing Element?
        • Yes Use the object code from the element
        • No Create an object code in snake case like svg_your_unique_id
      • class lc_ut_designer lc_dt_element lc_dt_object lc_dt_object_svg
      • Is this a background image that fills the entire background?
        • Yes Add the class : lc_dt_image_full_size_stretch
      • id Generate a unique id in the following form `obj_{objectcode}_{rndstring}
      • title Required
      • style MUST BE EMPTY STRING
      • Inner HTML - The svg element and children
        • MUST have width="100%" height="100%"
        • MUST have an appropriate viewBox
        • MUST HAVE pointer-events="none"
      • Example :

        <div x-objectcode="square" class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_object_svg" id="obj_square_2zualr3e" title="Square" style=""><svg width="100%" height="100%" viewBox="0 0 100 100" pointer-events="none">
                        <rect x="5" y="5" width="90" height="90" />
                    </svg></div>
        

    • Image
      • Is this image static or a Dynamic Image Element with a Macro?
      • Static Image
        • Do you have the image or will the user be required to upload? :
        • User Must Upload
          • Images in Lucit are uploaded to Lucit and stored as Objects. As an LLM you most likely will not have the ability to upload images on behalf of the user
          • Since this is the case, you must create a PLACEHOLDER image
          • A placeholder image will have a REPLACE IMAGE action that allows the user to easily change the image to one that they want.
          • You can choose from one of the following pre-built place holder images :
            • Placeholder : Image / Photo
            • Placeholder : Transparent Image / Photo
            • Placeholder : User Profile Image
            • Placeholder : Transparent User Profile Image
            • Placeholder : Logo
            • Placeholder : Transparent Logo
          • Once you have selected a placeholder then
            • Copy its Element HTML exactly,
            • Replace {id} with an id in the form obj_{placeholderid}_{rndstring} for example, obj_placeholder_default_image_transparent_background_yoe9it82
        • You have the Image
          • If you have the image, you have 2 options. Use the full URL to the image, if it is publicly accessible, OR, convert the image to Base64
          • id Takes the form obj_img_{rndstring}
          • title Name of image
          • x-objectcode asset_img
          • class lc_ut_designer lc_dt_element lc_dt_object lc_dt_image lc_dt_image_center_contain
          • style MUST CONTAIN background-image: url() And NO OTHER STYLES OF ANY KIND
          • x-fieldname Your Image Name
          • Image Url

            <div
                id="obj_img_hjs12da0"
                title="My Image"
                x-objectcode="asset_img"
                class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image lc_dt_image_center_contain"
                style="background-image: url('https://www.example.com/images/you_image.png');"
                x-fieldname="My Image"
                ></div>
            

          • Base64 Image

            <div
                id="obj_img_hjs12da0"
                title="My Image"
                x-objectcode="asset_img"
                class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image lc_dt_image_center_contain"
                style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABgCAYAAADvhgd/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIkSURBVHhe7ZGxjRxBEMQ+EJnKP7OPQcIZ7xByVDt1qNslgXbGqiG//sgkX3yQDQwzimFGMcwohhnFMKMYZhTDjGKYUQwzimFGMcwohhnFMKMYZhTDjGKYUQwzytvDfP/6fatr8ZYw/Mxd7yTVMBz+lDtBLQzHPu2uUgnDkU+9KxwPw3H/ujvBv/FSjobhKN6d4V+v/vstYZ4C/33l//UwT4P/Tz0cC8Mh6aA7QAeJh2qYp0IPiQvDFKCHxIVhCtBD4sIwBeghcWGYAvSQuDBMAXpIXBimAD0kLgxTgB4SF4YpQA+JC8MUoIfEhWEK0EPiwjAF6CFxYZgC9JC4MEwBekhcGKYAPSQuDFOAHhIXhilAD4kLwxSgh8SFYQrQQ+LCMAXoIXFhmAL0kLgwTAF6SFwYpgA9JC4MU4AeEheGKUAPiQvDFKCHxIVhCtBD4sIwBeghcWGYAvSQuDBMAXpIXBimAD0kLgxTgB4SF4YpQA+JC8MUoIfEhWEK0EPiwjAF6CFxYZgC9JC4MEwBekhcGKYAPSQuDFOAHhIXhilAD4kLwxSgh8RFNUwy6A7QQeLhWJgXHJOO+mT499TBW8Ikwz4R/vnK34+GecFRVwd+AvwnL+F4mBcc9uRLMUzxrlAJ8wOHPumuUg3zgoPvfqeoh/mBH7jbneZtYeT/MMwohhnFMKMYZhTDjGKYUQwzimFGMcwohhnFMKMYZhTDjGKYUQwzyl/U10lBHCVmFgAAAABJRU5ErkJggg==);"
                x-fieldname="My Image"
                ></div>
            

      • Dynamic

        • A dynamic image is available for any macro with a Type of img
        • id Takes the form `data_source_img_{rndstring}
        • title Name of the element
        • class lc_ut_designer lc_dt_data lc_dt_image lc_dt_image_center_cover
        • x-placeholder - Typically can be the following Lucit provided image https://lucore-bucket-images-prod2.s3.us-east-2.amazonaws.com/5/img_6973bd5805671_3fa0ff9223c62378d7a2.png
        • x-fieldname Name of the element
        • style background-image that contains the macro - For example background-image: url('{item.options.primary_image_public_url}'); and NO OTHER STYLES
        • data-value the Macro See Macro Reference and Application Reference

        <div
            id="data_source_img_9j4tw6ir"
            title="Item Image"
            x-objectcode="item_options_primary_image_public_url"
            class="lc_ut_designer lc_dt_data lc_dt_image lc_dt_image_center_cover"
            x-placeholder="https://lucore-bucket-images-prod2.s3.us-east-2.amazonaws.com/5/img_6973bd5805671_3fa0ff9223c62378d7a2.png"
            x-fieldname="Item Image"
            style="background-image: url('{item.options.primary_image_public_url}');"
            data-value="{item.options.primary_image_public_url}"
        ></div>
        

• Object / HTML

  • You can use HTML in an element by creating an element in the following form
  • x-objectcode Existing Element?
    • Yes Use the object code from the element
    • No Create an object code in snake case like obj_your_unique_id
  • class lc_ut_designer lc_dt_element lc_dt_object
  • Is this a background that fills the entire background?
    • Yes Add the class : lc_dt_image_full_size_stretch
  • id Generate a unique id in the following form `obj_{objectcode}_{rndstring}
  • title Required
  • style MUST BE EMPTY STRING
  • Inner HTML - The html children. Can be any HTML
  • Example :

    <div
        id="obj_your_element_rvq3ohel"
        title="Rectangle"
        x-objectcode="rectangle"
        class="lc_ut_designer lc_dt_element lc_dt_object"
        style=""
        x-fieldname="rectangle">
            <div>
                <strong>Here is your crazy cool HTML</strong>
            </div>
        </div>
    

HTML Checklist

• [ ] All first-layer elements are div
• [ ] No wrapper/root container added
• [ ] All elements are direct children
• [ ] IDs use approved prefixes (img_, obj_, data_source_text_, etc.)
• [ ] Required attributes present
  • All Elements
    • id,
    • title
    • class
    • x-objectcode
    • x-fieldname
    • style
  • Dynamic Elements with Macros
    • data-value
    • x-placeholder
• [ ] Required classes are present
  • See the reference in HTML Guide - Functional Classes
• [ ] No inline positioning
• [ ] No animations directly in the CSS or Style - See Animation Guide for how to build animations using the x-animations attribute

CSS Checklist

• [ ] All Layers have a SINGLE block referenced by the Layer's id
• [ ] Check Lucit Managed Styles to see what CSS styles can be edited by the user in the designer (Other styles are OK, but note that they will not have an editing tool)
• [ ] Verify that there are no media queries
• [ ] If the template will have different CSS style values or elements for different Screen Size Formats then display each format CSS completely

JS Checklist

• [ ] You have registered all JavaScript code according to the Lucit JavaScript Reference rules
• [ ] There is NO JavaScript embedded in the HTML

Complete Example - Single Size

Here is an example for a single Widescreen size ad that displays the weather and Editor Mode is set to All Sizes

<div
  id="rectangle_default_bg"
  title=""
  x-objectcode="rectangle"
  class="lc_ut_designer lc_dt_object lc_dt_default_background"
  x-fieldname="rectangle"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}"></div>

<div
  id="obj_amour_amour_nh4w0t07"
  title="Amour Amour"
  x-objectcode="amour_amour"
  class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image_full_size_stretch"
  x-fieldname="amour_amour"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}"></div>

<div
  id="obj_your_new_text_wasyyr8k"
  title="Your New Text"
  x-objectcode="your_new_text"
  class="lc_ut_designer lc_dt_element lc_dt_text lc_dt_text_editable lc_format_fit_text"
  style=""
  x-fieldname="your_new_text"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}">
  Check Out Today's Weather!
</div>

<div
  id="data_source_text_hf036u5s"
  title=""
  x-objectcode="digital_board_store_Weather1_current_temp_f"
  class="lc_ut_designer lc_dt_data lc_dt_text lc_format_fit_text lc_format_degrees"
  x-placeholder="27"
  x-optional-field="false"
  x-fieldname="Current Temp F"
  data-value="{digital_board.store.Weather1_current_temp_f}"
  x-group-parent-id="LCUID-LF-00b5f4b3-2f31-4fdc-9df2-c82b116b9c51"
  x-element-settings="{}"
  x-element-setting-values="{}">
  {digital_board.store.Weather1_current_temp_f}
</div>

<div
  id="data_source_img_xqrh0mzb"
  title=""
  x-objectcode="digital_board_store_Weather1_current_condition_icon"
  class="lc_ut_designer lc_dt_data lc_dt_image lc_dt_image_center_contain"
  x-placeholder="//cdn.weatherapi.com/weather/64x64/day/122.png"
  x-fieldname="Current Condition Icon"
  style="background-image: url('{digital_board.store.Weather1_current_condition_icon}');"
  data-value="{digital_board.store.Weather1_current_condition_icon}"
  x-group-parent-id="LCUID-LF-00b5f4b3-2f31-4fdc-9df2-c82b116b9c51"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}"></div>

<div
  id="obj_placeholder_transparent_logo_sg66iq84"
  title="Placeholder : Transparent Logo"
  x-objectcode="placeholder_transparent_logo"
  class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image lc_dt_image_center_contain"
  style="background-image: url('https://lucore-bucket-images-prod2.s3.us-east-2.amazonaws.com/5/img_6973be876c6fa_111fd59aa29d9e28d6f2.png');"
  x-fieldname="placeholder_transparent_logo"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}"></div>

<div
  id="obj_rectangle_ylibwh4b"
  title="Rectangle"
  x-objectcode="rectangle"
  class="lc_ut_designer lc_dt_element lc_dt_object"
  style=""
  x-fieldname="rectangle"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}">
  <div></div>
</div>

<div
  id="obj_6_point_star_3y14ko1r"
  title="6-Point Star"
  x-objectcode="6_point_star"
  class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_object_svg"
  style=""
  x-fieldname="6_point_star"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}">
  <svg
    width="100%"
    height="100%"
    viewBox="0 0 1080 1080"
    pointer-events="none">
    <polygon
      points="790.14 107.07 756.55 415.07 1040 540.16 756.47 665.07 789.86
                        973.09 539.92 790 289.86 972.93 323.45 664.93 40 539.84 323.53 414.93 290.14 106.91 540.08 290 790.14 107.07"></polygon>
  </svg>
</div>

#rectangle_default_bg {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: white;
}

#obj_amour_amour_nh4w0t07 {
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  width: 32%;
  height: 43%;
  top: 29%;
  left: 39%;
}

#obj_your_new_text_wasyyr8k {
  white-space: pre-line;
  overflow: visible;
  width: 56.2438%;
  height: 29.8374%;
  top: 12.1337%;
  left: 7.9967%;
  font-family: "Public Sans Thin";
  color: #ffffff;
  rotate: none;
  background: rgba(247, 111, 100, 1);
  border-style: solid;
  border-color: #ffffff;
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
}

#data_source_text_hf036u5s {
  white-space: pre-line;
  overflow: visible;
  width: 23.9105%;
  height: 36.0541%;
  top: 31.973%;
  left: 74.2898%;
  font-family: "Public Sans Thin";
  color: #ffffff;
  rotate: none;
  background: rgba(254, 81, 149, 1);
  border-style: solid;
  border-color: rgba(252, 241, 241, 1);
  border-width: 7px;
  border-radius: 17px;
  padding-top: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
}

#data_source_img_xqrh0mzb {
  width: 26.8154%;
  height: 31.4387%;
  top: 1.7151%;
  left: 73.1831%;
  rotate: none;
}

#obj_placeholder_transparent_logo_sg66iq84 {
  width: 58.5415%;
  height: 47.2469%;
  top: 40.7776%;
  left: 3.3467%;
  rotate: none;
}

#obj_rectangle_ylibwh4b {
  background-color: #333333;
  width: 6.9306%;
  height: 106.3222%;
  top: -4.1963%;
  left: 65.5969%;
  rotate: none;
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
  background: linear-gradient(
    90deg,
    rgba(247, 111, 100, 1) 0%,
    RGBA(247, 109, 103, 1) 100%
  );
}

#obj_6_point_star_3y14ko1r {
  width: 18.8811%;
  height: 29.6625%;
  top: -6.003%;
  left: -3.0782%;
  rotate: none;
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 12;
  fill: rgba(254, 81, 149, 1);
}

Complete Example - Multiple Size

Here is an example for multiple sizes (see Screen Format Reference for all available sizes):

• Vertical (1080x1920)
• Widescreen (1920x1080)
• Median (1000x400)

And the Editor Mode is set to Each Size Independently

The following output should be produced

<div
  id="rectangle_default_bg"
  title=""
  x-objectcode="rectangle"
  class="lc_ut_designer lc_dt_object lc_dt_default_background"
  x-fieldname="rectangle"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}"></div>

<div
  id="obj_amour_amour_nh4w0t07"
  title="Amour Amour"
  x-objectcode="amour_amour"
  class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image_full_size_stretch"
  x-fieldname="amour_amour"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}"></div>

<div
  id="obj_your_new_text_wasyyr8k"
  title="Your New Text"
  x-objectcode="your_new_text"
  class="lc_ut_designer lc_dt_element lc_dt_text lc_dt_text_editable lc_format_fit_text"
  style=""
  x-fieldname="your_new_text"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}">
  Check Out Today's Weather!
</div>

<div
  id="data_source_text_hf036u5s"
  title=""
  x-objectcode="digital_board_store_Weather1_current_temp_f"
  class="lc_ut_designer lc_dt_data lc_dt_text lc_format_fit_text lc_format_degrees"
  x-placeholder="27"
  x-optional-field="false"
  x-fieldname="Current Temp F"
  data-value="{digital_board.store.Weather1_current_temp_f}"
  x-group-parent-id="LCUID-LF-00b5f4b3-2f31-4fdc-9df2-c82b116b9c51"
  x-element-settings="{}"
  x-element-setting-values="{}">
  {digital_board.store.Weather1_current_temp_f}
</div>

<div
  id="data_source_img_xqrh0mzb"
  title=""
  x-objectcode="digital_board_store_Weather1_current_condition_icon"
  class="lc_ut_designer lc_dt_data lc_dt_image lc_dt_image_center_contain"
  x-placeholder="//cdn.weatherapi.com/weather/64x64/day/122.png"
  x-fieldname="Current Condition Icon"
  style="background-image: url('{digital_board.store.Weather1_current_condition_icon}');"
  data-value="{digital_board.store.Weather1_current_condition_icon}"
  x-group-parent-id="LCUID-LF-00b5f4b3-2f31-4fdc-9df2-c82b116b9c51"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}"></div>

<div
  id="obj_placeholder_transparent_logo_sg66iq84"
  title="Placeholder : Transparent Logo"
  x-objectcode="placeholder_transparent_logo"
  class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image lc_dt_image_center_contain"
  style="background-image: url('https://lucore-bucket-images-prod2.s3.us-east-2.amazonaws.com/5/img_6973be876c6fa_111fd59aa29d9e28d6f2.png');"
  x-fieldname="placeholder_transparent_logo"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}"></div>

<div
  id="obj_rectangle_ylibwh4b"
  title="Rectangle"
  x-objectcode="rectangle"
  class="lc_ut_designer lc_dt_element lc_dt_object"
  style=""
  x-fieldname="rectangle"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}">
  <div></div>
</div>

<div
  id="obj_6_point_star_3y14ko1r"
  title="6-Point Star"
  x-objectcode="6_point_star"
  class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_object_svg"
  style=""
  x-fieldname="6_point_star"
  x-optional-field="false"
  x-element-settings="{}"
  x-element-setting-values="{}">
  <svg
    width="100%"
    height="100%"
    viewBox="0 0 1080 1080"
    pointer-events="none">
    <polygon
      points="790.14 107.07 756.55 415.07 1040 540.16 756.47 665.07 789.86
                        973.09 539.92 790 289.86 972.93 323.45 664.93 40 539.84 323.53 414.93 290.14 106.91 540.08 290 790.14 107.07"></polygon>
  </svg>
</div>

When outputting CSS for multiple sizes, clearly label each CSS section with the size name as a heading, for example:

Vertical

#rectangle_default_bg {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: white;
}

#obj_amour_amour_nh4w0t07 {
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  width: 32%;
  height: 43%;
  top: 29%;
  left: 39%;
}

#obj_your_new_text_wasyyr8k {
  white-space: pre-line;
  overflow: visible;
  width: 84.593%;
  height: 16.3666%;
  top: 2.4294%;
  left: 10.3198%;
  font-family: "Public Sans Thin";
  color: #ffffff;
  rotate: none;
  background: rgba(247, 111, 100, 1);
  border-style: solid;
  border-color: #ffffff;
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
}

#data_source_text_hf036u5s {
  white-space: pre-line;
  overflow: visible;
  width: 54.0698%;
  height: 18.0033%;
  top: 25.6956%;
  left: 36.5916%;
  font-family: "Public Sans Thin";
  color: #ffffff;
  rotate: none;
  background: rgba(254, 81, 149, 1);
  border-style: solid;
  border-color: rgba(252, 241, 241, 1);
  border-width: 7px;
  border-radius: 17px;
  padding-top: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
}

#data_source_img_xqrh0mzb {
  width: 26.8078%;
  height: 31.4367%;
  top: 18.9853%;
  left: 8.0578%;
  rotate: none;
}

#obj_placeholder_transparent_logo_sg66iq84 {
  width: 94.7674%;
  height: 41.5124%;
  top: 55.8076%;
  left: 2.4664%;
  rotate: none;
}

#obj_rectangle_ylibwh4b {
  background-color: #333333;
  width: 101.4535%;
  height: 4.2553%;
  top: 50%;
  left: 0.6223%;
  rotate: none;
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
  background: linear-gradient(
    90deg,
    rgba(247, 111, 100, 1) 0%,
    RGBA(247, 109, 103, 1) 100%
  );
}

#obj_6_point_star_3y14ko1r {
  width: 18.8772%;
  height: 29.6619%;
  top: -10.5846%;
  left: -2.4936%;
  rotate: none;
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 12;
  fill: rgba(254, 81, 149, 1);
}

Widescreen

#rectangle_default_bg {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: white;
}

#obj_amour_amour_nh4w0t07 {
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  width: 32%;
  height: 43%;
  top: 29%;
  left: 39%;
}

#obj_your_new_text_wasyyr8k {
  white-space: pre-line;
  overflow: visible;
  width: 56.2438%;
  height: 29.8374%;
  top: 12.1337%;
  left: 7.9967%;
  font-family: "Public Sans Thin";
  color: #ffffff;
  rotate: none;
  background: rgba(247, 111, 100, 1);
  border-style: solid;
  border-color: #ffffff;
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
}

#data_source_text_hf036u5s {
  white-space: pre-line;
  overflow: visible;
  width: 23.9105%;
  height: 36.0541%;
  top: 31.973%;
  left: 74.2898%;
  font-family: "Public Sans Thin";
  color: #ffffff;
  rotate: none;
  background: rgba(254, 81, 149, 1);
  border-style: solid;
  border-color: rgba(252, 241, 241, 1);
  border-width: 7px;
  border-radius: 17px;
  padding-top: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
}

#data_source_img_xqrh0mzb {
  width: 26.8154%;
  height: 31.4387%;
  top: 1.7151%;
  left: 73.1831%;
  rotate: none;
}

#obj_placeholder_transparent_logo_sg66iq84 {
  width: 58.5415%;
  height: 47.2469%;
  top: 40.7776%;
  left: 3.3467%;
  rotate: none;
}

#obj_rectangle_ylibwh4b {
  background-color: #333333;
  width: 6.9306%;
  height: 106.3222%;
  top: -4.1963%;
  left: 65.5969%;
  rotate: none;
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
  background: linear-gradient(
    90deg,
    rgba(247, 111, 100, 1) 0%,
    RGBA(247, 109, 103, 1) 100%
  );
}

#obj_6_point_star_3y14ko1r {
  width: 18.8811%;
  height: 29.6625%;
  top: -6.003%;
  left: -3.0782%;
  rotate: none;
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 12;
  fill: rgba(254, 81, 149, 1);
}

Median

#rectangle_default_bg {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: white;
}

#obj_amour_amour_nh4w0t07 {
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  width: 32%;
  height: 43%;
  top: 29%;
  left: 39%;
}

#obj_your_new_text_wasyyr8k {
  white-space: pre-line;
  overflow: visible;
  width: 56.2438%;
  height: 34.8359%;
  top: 7.1328%;
  left: 7.9967%;
  font-family: "Public Sans Thin";
  color: #ffffff;
  rotate: none;
  background: rgba(247, 111, 100, 1);
  border-style: solid;
  border-color: #ffffff;
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
}

#data_source_text_hf036u5s {
  white-space: pre-line;
  overflow: visible;
  width: 23.9105%;
  height: 36.0508%;
  top: 42%;
  left: 75.2888%;
  font-family: "Public Sans Thin";
  color: #ffffff;
  rotate: none;
  background: rgba(254, 81, 149, 1);
  border-style: solid;
  border-color: rgba(252, 241, 241, 1);
  border-width: 7px;
  border-radius: 17px;
  padding-top: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
}

#data_source_img_xqrh0mzb {
  width: 26.8154%;
  height: 31.4375%;
  top: 3.2148%;
  left: 73.1846%;
  rotate: none;
}

#obj_placeholder_transparent_logo_sg66iq84 {
  width: 37.8606%;
  height: 38.2461%;
  top: 54.7695%;
  left: 9.5405%;
  rotate: none;
}

#obj_rectangle_ylibwh4b {
  background-color: #333333;
  width: 7.3302%;
  height: 106.3203%;
  top: -4.1953%;
  left: 65.1973%;
  rotate: none;
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
  background: linear-gradient(
    90deg,
    rgba(247, 111, 100, 1) 0%,
    RGBA(247, 109, 103, 1) 100%
  );
}

#obj_6_point_star_3y14ko1r {
  width: 18.8811%;
  height: 29.6625%;
  top: -6.003%;
  left: -3.0782%;
  rotate: none;
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.45));
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 12;
  fill: rgba(254, 81, 149, 1);
}