​
Why This Is Slow Today

A landing page for next month’s launch shouldn’t take three weeks. But the path from approved design to live URL runs through a queue: the brief goes to a web producer, the producer opens the CMS, finds the closest existing page, copies it, then re-enters every headline, every body paragraph, every CTA and every image reference by hand — checking against the Figma file as they go. Then the design review comes back. The hero crops wrong on mobile, the third section uses a component that isn’t approved for this template, and the disclaimer is missing. Each fix is another pass through the same queue. Multiply that by the number of pages a campaign actually needs — a hub, three regional variants, two product pages — and page creation becomes the reason launches slip. Gradial builds the page from whatever you already have: a design file, a brief, a reference page, or a description. It uses the component patterns your site already uses, so what comes out fits the environment instead of needing to be reworked into it.

​
Overview

Creating new pages is one of the core workflows in Gradial. Depending on your starting point and requirements, you can choose from several approaches:

​
Where this works

Page creation is native in every connected CMS: Adobe AEM (6.5 and Cloud Service), SitecoreAI CMS (XM Cloud), Sitecore XP, Contentful, Contentstack, Sanity, Drupal, WordPress, and Gradial ACI. The mechanics differ by platform — what a template is called, where drafts live, how staging and publishing work — and Gradial uses each platform’s own model. Content paths in the examples below use AEM-style paths; substitute the equivalent for your platform. See Integrations for the current list of connected platforms.

​
Option 1: New Page from Existing Reference Page (Copy Page)

When to Use: You need to create a page similar to one that already exists. This is the most common and fastest approach.

​
Why This Works Best

Most new pages are variations of existing ones. Rather than starting from scratch, copying an existing page gives you a proven structure with all the correct components already in place. You simply update the content.

​
How It Works

Step 1: Identify Your Reference Page Find an existing page in your CMS that closely matches what you need. This becomes your template. Step 2: Create the Task From your Gradial project dashboard, click New Task and select the new page option. Provide a task title and select the appropriate brand. Step 3: Reference the Existing Page In your prompt, specify the reference page location and the new page details:
Step 4: Generate and Review The agent will create a new page with the same component structure as your reference, populated with your new content.

​
Tips for Success

  • Choose a reference page that matches your desired layout as closely as possible
  • The reference page should use the same template type as your target
  • Provide clear content for each section you want updated

​
Option 2: New Page from Templates & Patterns

When to Use: You want to build a page from your design system’s established patterns rather than copying a specific existing page.

​
Understanding Design Systems & Patterns

Design Systems in Gradial organize your CMS components into reusable patterns grouped by page type. For example, you might have different pattern sets for Homepage, Blog Article, Product Detail, and Landing Page templates. Each Design System contains the specific component patterns available for that page type, giving the agent a clear reference for what building blocks are available.

​
Prerequisites

Before using this approach, you’ll need:
  1. Golden Pages created for your template types — see the Golden Pages Guide
  2. Design System patterns ingested from those Golden Pages — see Design Pattern Ingestion

​
How It Works

Step 1: Create the Task From your Gradial project dashboard, click New Task. Provide a task title and select the appropriate brand and page template. Step 2: Specify the Design System In your prompt, reference the specific Design System to use:
Step 3: Provide Content Requirements Give the agent the content for each pattern:
Step 4: Generate in Gradial Studio Navigate to Gradial Studio and click “Draft with AI.” The agent will select appropriate patterns from your Design System and populate them with your content.

​
Pattern Selection Best Practices

  • Select only the patterns needed for your specific page to avoid overloading agent context
  • Alternatively, specify the Design System name directly in your prompt
  • Use unique, descriptive pattern names to avoid confusion between similar layouts

​
Option 3: New Page from Copy Doc or Creative Brief

When to Use: You have written content (Word document, Google Doc, creative brief, or transcript) that needs to be structured into a page in your CMS.

​
Supported Source Types

  • Word documents (.docx)
  • PDF documents
  • Google Docs (shared link)
  • Creative briefs
  • Content transcripts

​
How It Works

Step 1: Create the Task From your Gradial project dashboard, click New Task and select the new page option. Provide a task title and select the appropriate brand and page template. Step 2: Attach Your Content Source Upload or link your document. Gradial will analyze the content structure. Step 3: Create the Task Click Create as Draft to initialize the page creation task. Step 4: Generate in Gradial Studio Navigate to Gradial Studio and click “Draft with AI.” The agent will:
  • Analyze your document’s content structure
  • Map content to appropriate components from your Design System
  • Create a digital copy doc (page blueprint) with:
    • Specific components selected for your content
    • Content formatted and laid out appropriately
    • Suggested image/video/media placements
Step 5: Review and Refine Review the generated digital copy doc in Gradial Studio. Adjust component selections or content placement as needed. Step 6: Generate the Page Click Back to Task and select Start. Gradial will:
  • Create the new page directly in your CMS
  • Upload assets to your DAM
  • Configure components as specified
  • Ensure consistent formatting

​
Tips for Document Preparation

  • Use clear headings in your document to help the agent identify content sections
  • Include notes about desired layout or component preferences
  • Provide image references or paths where visuals should appear

​
Option 4: New Page from Figma Design

When to Use: You have a Figma design file that needs to be translated into a production page in your CMS.

​
Prerequisites

  • Figma design that visually aligns with your production components
  • Design uses components/patterns that exist in your Design System
  • Proper Figma access permissions configured

​
How It Works

Step 1: Create the Task From your Gradial project dashboard, click New Task. Provide a task title, select the brand and page template. Step 2: Select Figma as Your Source Choose the Figma Design option and provide:
  • Figma file URL
  • Specific frame or artboard to convert
Step 3: Create the Task Click Create as Draft to initialize the task. Step 4: Generate in Gradial Studio Click “Draft with AI.” The agent will:
  • Analyze the Figma design visually
  • Map design elements to production components in your CMS
  • Extract content (text, image references)
  • Create a digital copy doc matching the design intent
Step 5: Review Component Mapping This step is critical. Verify that:
  • Design elements mapped to the correct components in your CMS
  • Layout structure is accurately represented
  • Content extracted correctly from the design
Step 6: Generate the Page Once satisfied with the digital copy doc, click Start to create the production page.

​
Best Practices for Figma-to-CMS

Design Alignment: Ensure your Figma design uses visual patterns that correspond to actual components in your CMS. Custom designs that don’t match existing components will require additional development. Component Recognition: The agent maps designs based on visual similarity to ingested patterns. Use consistent design patterns that match your Design System. Content Extraction: Text and image placeholders in Figma will be extracted. Use realistic content in your designs for best results. Iteration: Figma-to-CMS often requires iteration. Review the initial output carefully and provide feedback to refine the mapping.

​
Choosing the Right Approach

​
Common Workflow: Starting the Task

Regardless of which approach you choose, all new page tasks follow this general flow:
  1. Create Task → New Task from project dashboard
  2. Configure → Set title, brand, template, source
  3. Draft → Generate in Gradial Studio with AI
  4. Review → Verify digital copy doc
  5. Generate → Create page in your CMS
  6. Finalize → Review in your CMS, publish via standard workflow

​
Who this is for

​
How this maps to your function

Your launch calendar assumes a page build takes a known amount of time, and it usually doesn’t — so either the date slips or the scope does. When page creation runs from the brief you already wrote, you can plan the campaign you actually want: a hub plus regional variants plus the product pages, rather than whichever subset fits the production window.
Building a page from a design file is mostly transcription — and transcription is where the errors are. Gradial does that pass and leaves you the judgment: is this the right component for this section, does the hierarchy read correctly, is anything missing. You review a built page instead of building it.
The gap between the Figma file and the published page is where design intent goes missing — usually not through disagreement but through a hundred small interpretation calls made under time pressure. Gradial reads the design directly and populates it into your approved component structures, so what ships is closer to what was designed, and brand and accessibility checks run on the output either way.