agile-templates
You are an expert full-stack AI agent specialized in generating production-ready document templates for large-scale insurance systems (like TATA AIG). Your task is to convert design inputs (Figma / Adobe) into complete, deployable template packages. 🎯 Objective Given: Figma / Adobe design file (JSON / API extract / images) Reference templates (HTML + Handlebars + CSS + Joi schemas) Generate: Fully functional HTML + Handlebars template Modular, clean CSS Required assets (images, icons, QR, barcodes placeholders) Accurate Joi validation schema Folder structure aligned with existing system 🧠 Core Capabilities Design → Code Translation Convert layouts into pixel-accurate HTML/CSS Support: Multi-page documents Tables, grids, sections Typography, spacing, alignment Ensure responsiveness where applicable Handlebars Logic Generation Add dynamic constructs: {{#if}}, {{#each}}, helpers Map UI elements to data fields intelligently Handle: Conditional sections (e.g., optional riders) Dynamic tables (e.g., coverage lists) Reusable partials Schema Generation (Joi) Infer schema from design + references Define: Required vs optional fields Types (string, number, date, array, object) Validations (regex, ranges, enums) Learning from Existing Templates Follow: Naming conventions Folder structure CSS patterns (Bootstrap + custom) Helper usage patterns Reuse patterns instead of reinventing Complex Rendering Support Barcodes / QR placeholders Watermarks Page breaks Print-friendly layouts 📁 Output Structure template-name/ ├── template.hbs ├── styles.css ├── schema.js ├── assets/ │ ├── images/ │ ├── icons/ ├── helpers/ │ ├── formatDate.js │ ├── currency.js 🎨 UI Requirements (for platform) If generating UI components: Modern, minimal, clean design Use: Card-based layouts Soft shadows, rounded corners Clear typography hierarchy Include: File upload (Figma/API JSON) Template preview (live render) Side-by-side diff (design vs output) Iteration feedback panel ⚙️ Engineering Constraints Output must be: Production-ready Readable and modular Minimal (no unnecessary code) Follow: Clean naming conventions Separation of concerns (HTML vs CSS vs logic) No hardcoding dynamic values Ensure reusability and scalability 🔍 Validation Checklist (Strict) Before final output, verify: Design Fidelity Matches layout, spacing, fonts, alignment Handlebars Correctness No broken loops/conditions Proper data binding Schema Accuracy Matches all dynamic fields Covers edge cases Consistency Matches reference templates Edge Case Handling Empty data Long text Missing optional fields Render Safety No HTML/CSS breaking scenarios 🔁 Iteration Mode Accept feedback like: “Fix alignment” “Update table logic” “Add conditional section” Apply minimal diffs only Preserve working code 🚫 Avoid Over-engineering Inline styles unless necessary Hardcoded values Ignoring reference patterns ✅ Success Criteria Pixel-perfect template Correct dynamic rendering Accurate schema Matches production standards Generated within minutes If design input is ambiguous: Infer intelligently from references Default to scalable patterns Document assumptions briefly we need the following High accuracy Low iteration cost Production deployment readines
Comments (0)
Sign in to leave a comment
System Requirements
System Requirements Document (SRD)
Project Name: agile-templates
1. Introduction
The agile-templates project is designed to streamline the generation of production-ready document templates for large-scale insurance systems, such as TATA AIG. This document outlines the system requirements for creating a single proof-of-concept (POC) template that demonstrates the project's capabilities in design-to-code translation, dynamic rendering, and schema generation.
The goal is to ensure high accuracy, low iteration cost, and production deployment readiness for the generated templates.
2. System Overview
The agile-templates system will convert design inputs (Figma/Adobe files) into deployable template packages. The POC template will showcase the following capabilities:
- Design-to-Code Translation: Pixel-perfect HTML/CSS generation based on provided layouts.
- Dynamic Rendering: Handlebars logic for conditional sections and reusable partials.
- Schema Generation: Accurate Joi validation schema inferred from design and reference templates.
- Output Structure: Organized folder structure for scalability and reusability.
This POC will serve as a foundation for scaling the system to handle multi-page documents, complex rendering scenarios, and iterative feedback loops.
3. Functional Requirements
As story points:
- As a User, I should be able to upload Figma/Adobe design files to generate templates.
- As a User, I should be able to preview the generated template in real-time.
- As a User, I should be able to view side-by-side comparisons of the design and the output template.
- As a User, I should be able to provide feedback for iterations directly within the platform.
- As a Developer, I should be able to generate Handlebars templates with dynamic constructs like
{{#if}}and{{#each}}. - As a Developer, I should be able to infer Joi schemas from the design files and reference templates.
- As a Developer, I should be able to ensure responsiveness and print-friendly layouts for the generated templates.
4. User Personas
1. User
- Role: Insurance system operator or designer.
- Goals: Upload design files, preview templates, and provide feedback for iterations.
- Pain Points: Time-consuming manual template creation, lack of design fidelity in outputs.
2. Developer
- Role: Full-stack engineer responsible for template generation.
- Goals: Generate accurate, scalable templates with minimal iteration cost.
- Pain Points: Ensuring dynamic rendering and schema accuracy while meeting production standards.
5. Visuals Colors and Theme
Color Palette:
The agile-templates project will use a modern, clean, and professional color palette:
- Background:
#F5F7FA(soft gray for a clean workspace) - Surface:
#FFFFFF(pure white for content areas) - Text:
#333333(dark gray for readability) - Accent:
#007BFF(vivid blue for interactive elements) - Muted Tones:
#B0BEC5(light gray for secondary elements)
6. Signature Design Concept
Concept: Interactive Blueprint Landing Page
The homepage will resemble an architectural blueprint, with pencil-sketch animations of insurance documents dynamically forming as the user scrolls.
- Animations: Sections of the blueprint will "draw" themselves in real-time, showcasing grids, tables, and typography.
- Transitions: Smooth zoom-in effects as users hover over sections, revealing detailed views.
- Interaction: Users can click on elements (e.g., a table or a rider section) to see live previews of the generated template.
- Color Shifts: The blueprint will subtly transition between muted blue tones and vibrant accents to guide user focus.
- Micro-interactions: Hover effects will include tooltips explaining each section's functionality.
This concept will make the platform visually engaging while emphasizing precision and structure.
7. Non-Functional Requirements
- Performance: The system must generate templates within 5 seconds of file upload.
- Scalability: The architecture should support multi-page documents and complex rendering scenarios.
- Security: Ensure secure handling of uploaded design files.
- Usability: Provide an intuitive interface for both users and developers.
- Maintainability: Follow clean coding practices for easy updates and scalability.
8. Tech Stack
Frontend:
- React for web-based UI.
Backend:
- Python with FastAPI for API development.
Database:
- MySQL for relational data storage, using Alembic for migrations.
AI Models:
- GPT 5.4 for user-friendly responses.
- Claude 4.6 Opas for coding assistance.
AI Tools:
- Langchain for dynamic logic.
Orchestration:
- Docker for local development.
- Kubernetes for server-side orchestration.
9. Assumptions and Constraints
Assumptions:
- The uploaded design files will be in a compatible format (e.g., JSON, API extract, or images).
- The POC template will focus on a single document type (e.g., policy summary).
Constraints:
- The system must adhere to existing insurance system standards (e.g., TATA AIG).
- The generated templates must be print-friendly and responsive.
10. Glossary
- Figma/Adobe Design Files: Digital design files used as input for template generation.
- Handlebars: A templating engine for dynamic rendering.
- Joi Schema: A JavaScript library for data validation.
- POC: Proof-of-concept, a preliminary version of the system.
- Dynamic Rendering: The ability to adjust template content based on input data.
This document provides a comprehensive overview of the agile-templates project's requirements, ensuring alignment with user needs and technical standards.
No comments yet. Be the first!