Skip to main content

​
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:
ApproachBest ForComplexity
Copy Existing PageSimilar pages, quick duplication⭐ Easiest
From Templates & PatternsBuilding from design system⭐⭐ Moderate
From Copy Doc / Creative BriefContent-first creation⭐⭐⭐ Moderate
From Figma DesignDesign-to-production⭐⭐⭐⭐ Advanced

​
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 AEM environment 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: 
Create a new page at location /content/mysite/en/news/2025/new-article
Use /content/mysite/en/news/2025/existing-article as the reference structure
Update the content with the following:
- Title: [New Title]
- Body content: [New content]
- Hero image: [New image path]
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 AEM 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: 
Create a new page at location /content/mysite/en/products/new-product
Use the Product Detail Design Patterns
Include the following sections:
- Product Hero Banner
- Product Features Grid
- Product Specifications Table
- Related Products Carousel
Step 3: Provide Content Requirements Give the agent the content for each pattern: 
Hero Banner:
- Headline: "Introducing Product X"
- Subheadline: "The next generation of innovation"
- CTA: "Learn More" linking to /content/mysite/en/contact

Features Grid:
- Feature 1: Title, description, icon
- Feature 2: Title, description, icon
[etc.]
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 an AEM page.

​
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 AEM components
  • Create a digital copy doc (page blueprint) with:
    • Specific AEM 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 in AEM Click Back to Task and select Generate in AEM. Gradial will:
  • Create the new page directly in AEM
  • 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 AEM page.

​
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 AEM components
  • 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 AEM components
  • Layout structure is accurately represented
  • Content extracted correctly from the design
Step 6: Generate in AEM Once satisfied with the digital copy doc, click Generate in AEM to create the production page.

​
Best Practices for Figma-to-AEM

Design Alignment: Ensure your Figma design uses visual patterns that correspond to actual AEM components. 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-AEM often requires iteration. Review the initial output carefully and provide feedback to refine the mapping.

​
Choosing the Right Approach

┌─────────────────────────────────────────────────────────────────┐
│                    Which approach should I use?                  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
              ┌───────────────────────────────┐
              │ Do you have a similar         │
              │ existing page to copy?        │
              └───────────────────────────────┘
                     │              │
                    YES            NO
                     │              │
                     ▼              ▼
        ┌────────────────┐    ┌──────────────────────────┐
        │ Copy Existing  │    │ Do you have a Figma      │
        │ Page           │    │ design to implement?     │
        └────────────────┘    └──────────────────────────┘
                                    │              │
                                   YES            NO
                                    │              │
                                    ▼              ▼
                        ┌────────────────┐   ┌─────────────────────┐
                        │ From Figma     │   │ Do you have written │
                        │ Design         │   │ content/brief?      │
                        └────────────────┘   └─────────────────────┘
                                                   │              │
                                                  YES            NO
                                                   │              │
                                                   ▼              ▼
                                       ┌────────────────┐  ┌────────────────┐
                                       │ From Copy Doc  │  │ From Templates │
                                       │ / Brief        │  │ & Patterns     │
                                       └────────────────┘  └────────────────┘

​
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 AEM
  6. Finalize → Review in AEM, publish via standard workflow