Claude PRD: 11ty + Shopify + Google UCP

Complete Product Requirements Document for LLM implementation

Download PRD Download LLM Prompt

Document Overview

This Product Requirements Document provides comprehensive specifications for implementing an Eleventy (11ty) static site generator with Shopify Universal Commerce Protocol (UCP) and Google AI integration. The document is specifically designed for Claude (or other LLMs) to implement the complete system.

Architecture Note

Webflow = Design Module only (visual design tool, no runtime)
CI/CD Pipeline = Publishes Webflow designs to dual targets
11ty = Static site with GraphQL data mapping
Shopify Native = Mirror of synced front end

Executive Summary

Project Goal

Build a dual-target e-commerce system where Webflow serves as a Design Module only. A CI/CD pipeline publishes design components to both 11ty (static site with GraphQL data mapping) and Shopify Native (mirrored front end). The system implements OAuth 2.0 identity linking, A2P payment processing, and streams real-time data to Google AI for analytics and personalization.

Key Features

  • Webflow Design Module: Visual design only, no runtime logic
  • CI/CD Design Publish: Automated pipeline to 11ty + Shopify Native
  • Static Site Generation: 11ty-based architecture with GraphQL data mapping
  • Shopify Native Mirror: Synchronized front end for fallback/parity
  • UCP Catalog Integration: Fetch products from Shopify's global catalog
  • OAuth 2.0 Identity: Secure user authentication and session management
  • A2P Payment Processing: Cryptographic payment mandates
  • Real-time Data Streaming: WebSocket connections to Google AI
  • Consent Management: GDPR-compliant user consent tracking

Technical Stack

yaml 
Design Layer:
  - Webflow Design Module (design-time only)
  - Design tokens export
  - Component structure export

CI/CD Pipeline:
  - GitHub Actions workflow
  - Webflow → 11ty template transformation
  - Webflow → Shopify Liquid transformation

Frontend (Dual Target):
  - Eleventy (11ty) v3.x + Nunjucks
  - Shopify Native + Liquid templates
  - Vanilla JavaScript (ES6+)
  - CSS3 (BEM from design tokens)

Backend Services:
  - Shopify UCP Catalog API (GraphQL)
  - OAuth 2.0 Identity Provider
  - A2P Payment Gateway
  - Google AI Data Stream API

Middleware:
  - Xano/n8n for runtime processing
  - WebSocket server

Data Flow:
  - GraphQL (Shopify UCP)
  - WebSocket (real-time streaming)
  - Server-Sent Events (notifications)

Implementation Phases

Phase 1: Webflow Design Module Setup

  1. Configure Webflow project for design exports
  2. Create component library (header, footer, cards, layouts)
  3. Define design tokens (CSS variables, typography, spacing)
  4. Set up Webflow Dev Link or API access
  5. Document design system conventions

Phase 2: CI/CD Pipeline Foundation

  1. Set up GitHub repository structure
  2. Create design export scripts
  3. Build template transformation (Webflow → 11ty/Shopify)
  4. Configure GitHub Actions workflow
  5. Test automated design publish

Phase 3: 11ty + Shopify Native Setup

  1. Initialize 11ty with transformed Webflow templates
  2. Configure Shopify theme with Liquid templates
  3. Implement GraphQL data fetching for both targets
  4. Test parity between 11ty and Shopify Native
  5. Add error handling and fallback content

Phase 4: Runtime Integration

  1. Implement OAuth 2.0 (works on both targets)
  2. Set up A2P payment processing
  3. Configure WebSocket to Google AI
  4. Implement consent management UI
  5. Add real-time personalization

Success Metrics

Metric Target Measurement
Build Time < 30 seconds 11ty build duration
Page Load Speed < 2 seconds Lighthouse Performance score
API Response Time < 500ms UCP Catalog API latency
Payment Success Rate > 95% A2P transaction completion
WebSocket Uptime > 99.5% Connection stability

Security Requirements

  • Authentication: OAuth 2.0 with PKCE extension
  • Authorization: JWT tokens with short expiration (15 min)
  • Data Encryption: TLS 1.3 for all API communications
  • Payment Security: PCI DSS compliant A2P implementation
  • Consent Management: GDPR Article 7 compliance
  • Data Retention: User data deleted after 90 days of inactivity

Download Documentation

Get the complete Product Requirements Document and LLM Implementation Prompt for building this system.

📋 Product Requirements Document

Complete specifications, user stories, API schemas, database models, and implementation checklists.

Download PRD

🤖 LLM Implementation Prompt

Step-by-step prompt for Claude or other LLMs to build the complete system from scratch.

Download LLM Prompt