Automated creative generation is easy to describe and harder to make reliable. A system can fill a template with new copy and image datasets, but producing a usable result at scale also requires the system to know what each element means, what may change, what must stay fixed, how elements relate, and how the design should behave when its dimensions or content change.
That is where structured design data becomes useful. A JSON record can represent a design in a form software can inspect, validate, modify, and render. But JSON itself is not the design model. The schema is what gives the record meaning.
The practical distinction is simple: JSON is the container; the design schema is the contract. The schema defines elements, semantic roles, variables, relationships, constraints, assets, versions, and rendering behavior. Two systems can both use JSON while representing graphic design in completely different ways.
This article explains how to build and evaluate JSON template datasets for creative automation, how to connect structured records to rendered outputs, how to represent responsive behavior, how to validate designs beyond JSON syntax, and how buyers can assess portability and production readiness. It also explains when JSON is the wrong representation and how to avoid confusing record volume with actual structural coverage.
Table of contents:
- ● What is a JSON Template Dataset?
- ● JSON is a format, not the design model
- ● Why structured design data matters in creative automation
- ● Structured template vs. rendered image
- ● What a Production Design Schema Should Represent
- ● Hard Constraints and Soft Layout Preferences
- ● Responsive Templates: Represent Rules, Not Just Two Images
- ● The Renderer is Part of the Data Contract
What is a JSON Template Dataset?
A JSON template dataset is a collection of machine - readable design records stored in JSON or a JSON - compatible representation. A record can describe the canvas, components, semantic roles, styles, replaceable content, asset references, layout relationships, constraints, and metadata needed to reproduce or modify a creative.
• Canvas dimensions, units, aspect ratio, and safe areas
• Elements such as text, images, vectors, groups, logos, and backgrounds
• Semantic roles such as headline, product, price, CTA, or disclaimer
• Variables and rules for replaceable content
• Asset references and dependency versions
• Geometry, hierarchy, relationships, and constraints
• Schema, template, dataset, and renderer versions
There is no universal JSON schema for automated graphic design. A practical programmatic design dataset is best understood as an application - specific representation of visual compositions that software can inspect, modify, analyze, or render. That terminology should not be presented as an industry - standard taxonomy.
JSON is a format, not the design model

This is the central technical distinction for structured creative automation. JSON defines a serialization format; it does not define what a field such as headline, anchor, safe_area, group, or constraint means.
Consider these two records:
{ "image": "poster.png"}
and:
{ "elements": [ { "id": "headline_01", "type": "text", "role": "headline", "content": "{{headline}}" } ]}
Both records are valid JSON. Only the second exposes structured information that a renderer or automation engine could use for semantic editing. The editability comes from the schema and its renderer, not from the .json extension.
The same principle applies to other representations. HTML/CSS, SVG, scene graphs, XML, databases, and proprietary scene formats can all represent structured design. Recent research reinforces that point: DesignAsCode uses HTML/CSS as a code - native representation for editable graphic design, while other systems use JSON - like layer specifications or hierarchical component structures. The representation matters more than the serialization syntax.
Why structured design data matters in creative automation
Creative automation is the programmatic production of visual assets from templates, structured inputs, or rules. Current commercial systems commonly use dynamic layers, placeholders, structured data sources, and rendering engines to produce personalized or multi - format outputs.
The engineering problem is not merely producing more images. It is producing valid variations without losing the design decisions that make the template datasets useful.
• Replace product or campaign content without rebuilding the layout
• Localize copy while respecting text limits and typography rules
• Resize a design for new aspect ratios without breaking hierarchy
• Swap approved assets while preserving protected brand elements
• Generate controlled variants from a common template family
• Validate structural and visual requirements before release
Structured creative data can therefore be useful before any model training takes place. It can drive deterministic template filling, localization, resizing, batch production, rendering, and quality assurance. AI can be added later, but the data contract does not depend on a foundation model.
Structured template vs. rendered image

The two representations answer different questions. An image directly records appearance. A structured record can explicitly encode the composition that produced that appearance, but only when the schema is sufficiently expressive.
Property | Rendered Image | Structured Template Record |
|---|---|---|
Appearance | Directly represented | Usually obtained through rendering |
Element identity | Usually inferred | Can be explicit |
Coordinates | Usually inferred | Can be explicit |
Semantic roles | Usually inferred | Can be explicit |
Relationships | Mostly implicit | Can be explicit |
Variables | Not inherent | Can be represented |
Constraints | Not inherent | Can be represented |
Editability | Limited at source level | Depends on schema + renderer |
Structural supervision | Indirect | Depends on representation depth |
Programmatic modification | Difficult from pixels alone | Possible when the system exposes edit operations |
Neither representation is universally superior. Image data is the right evidence for appearance, visual similarity, or aesthetic assessment. Structured data is more useful when the task depends on editable structure, relationships, controllability, or programmatic rendering. For multimodal tasks, pairing structure with rendered output can provide complementary evidence rather than making a claim that one representation should replace the other.
What a Production Design Schema Should Represent

A production - oriented schema needs to explain what the objects are, how they relate, what can change, and what must remain valid. Coordinates alone are rarely enough.
Template Identity and Versioning
Keep at least four version concepts distinct: dataset release, template version, schema version, and renderer version. They solve different problems.
dataset_release = 2026.08
schema_version = 3.1
template_version = 7
renderer_version = 5.4
Schema evolution needs explicit migration rules. If a field changes from `font_weight: 700` to `font: { weight: 700 }`, old records may no longer be understood by a new parser. Document backwards compatibility, deprecated fields, required - field changes, and enum changes instead of relying on implicit behavior.
Canvas and Coordinate Semantics
Coordinates are interpretable only when the coordinate system and transformation semantics are defined. A schema should state the origin, units, coordinate space, transforms, anchoring, clipping, z - order, intrinsic size, and responsive behavior that affect position.
"coordinate_system": {
"origin": "top_left",
"units": "px"
}
"layout": {
"x": 80,
"y": 90,
"rotation_deg": 0,
"z_index": 4,
"anchor": "top_left"
}
These field names are illustrative. The requirement is consistent meaning, not a universal vocabulary.
Elements, Hierarchy, and Semantic Roles
Each element should have a stable identifier and a defined type. Typical types include text, image, vector, shape, logo, group, and background.
Semantic roles make a geometry - only representation more useful. A text box labeled headline is different from one labeled disclaimer, even when both have the same dimensions. Useful roles can include headline, subheadline, body, CTA, logo, product, price, badge, disclaimer, navigation, footer, and decorative element.
A useful mental model is: coordinates answer where; semantic roles answer what; relationships answer how elements interact; constraints answer what must remain valid when the design changes.
Variables and Valid Values
A placeholder identifies what may change. A variable specification defines which changes are valid. For production automation, fields may need type, required status, locale, maximum characters or lines, formatting, fallback behavior, ranges, currency, and asset type.
"price": {
"type": "number",
"currency": "EUR",
"min": 0
},
"headline": {
"type": "text",
"locale": "en - IE",
"max_lines": 2
}
This is more useful than treating every variable as generic text.
Assets and Dependencies
Stable asset references support reuse, replacement, deduplication, and licensing tracking. A bare asset ID is not necessarily reproducible if the same ID can point to a different file later.
For important assets, track an ID plus a stable version or checksum. Depending on the workflow, also record MIME type, dimensions, licensing reference, and provenance. Fonts deserve the same treatment because font availability and metrics can change the visual output.
Relationships and Constraints
A structured design should represent more than a list of absolute rectangles. Useful relationship forms include alignment, relative placement, grouping, anchoring, spacing, proportional sizing, and parent - child containment.
below(headline)
aligned_left(headline, body)
gap(headline, body) >= 24
child_of(card_01)
anchor(right_edge)
The exact rule language is application - specific. The point is to encode design logic that can survive changes instead of storing only one finished state.
Hard Constraints and Soft Layout Preferences
Not every design rule should be enforced with the same strength.
Hard constraints must hold. Examples include keeping a disclaimer inside the canvas, preserving a required logo, maintaining a minimum safe margin, or preventing text overflow.
Soft preferences are desirable but negotiable. Examples include keeping a CTA near a headline, preserving preferred whitespace, maintaining an image scale, or aligning to a recommended grid.
Treating every rule as mandatory can make generation rigid. Treating every rule as optional can make generation unsafe or invalid. A useful schema lets the renderer or generation system distinguish the two.
Responsive Templates: Represent Rules, Not Just Two Images
Responsive behavior is one of the strongest reasons to represent design structure. A square creative and a story creative may be two outputs from one template family, but storing the two images does not explain how the transformation works.
A responsive representation may need to encode:
• target canvas or breakpoint
• anchoring and alignment behavior
• reflow or stacking rules
• minimum and maximum dimensions
• image crop behavior
• hidden or visible states
• font scaling and line limits
• group rearrangement
The distinction between state and rule is useful here. A state says, "the headline is at x=80, y=90." A rule says, "the headline stays aligned to the content column with an 80 - pixel margin." The second is more reusable because it describes how the composition can change.
A single template may therefore be parameterized, responsive, component - based, localization - ready, and brand - constrained at the same time. These are capabilities of the representation, not mutually exclusive template categories.
The Renderer is Part of the Data Contract


Jen Togonon
