Agentic Website System — V1 PRD

1. Overview

A frontend-first website platform where users edit their site directly on the page using an AI agent, without a traditional CMS UI.

Core principles: - No backend CMS interface - Editing happens on the live frontend - AI is the primary interaction layer - Strict structure + guardrails prevent breakage - Built on Vercel + TypeScript

2. Target User

Client-facing (non-technical or technical users who do not want to manage a CMS).

3. Scope (V1)

• Multi-page marketing site
• Includes simple blog
• No advanced collections (V1)

4. Editing Model

Hybrid editing system: - Inline editing (click-to-edit content) - AI side panel (collapsible)

Behavior: - User selects element (e.g., headline) - Context is passed to AI - AI suggests changes - User approves before apply

5. Module System

5.1 Module Types

Core modules: - Text - Image - Video

Custom modules (per client): - Stats - Testimonials - Service blocks

5.2 Rules

• Modules are structured (defined schema)
• Some modules allow limited flexibility
• Custom modules are stricter

5.3 Layout Control

Users can: - Edit content - Switch module variants (Hero A → Hero B) - Reorder modules (within constraints)

Users cannot: - Break layout hierarchy rules

6. Content Type Rules

Pages

• Flexible module usage (within allowed set)

Blog Posts

• Fully structured
• Fixed layout (e.g., hero → body → media)
• No reordering of core structure

7. Global Elements

• Header (fixed position)
• Footer (fixed position)
• CTA modules (assignable per page)

Modules are scoped by content type.

8. Page Creation

• Blank page start
• Guided onboarding:
• Module picker UI
• Suggested modules

9. Design System

Token-based system: - Colors - Typography

Rules: - Editable within constraints - Cannot violate brand system

10. AI System

10.1 Capabilities (Tiered)

• Tier 1: Content only
• Tier 2: Content + structure
• Tier 3: Content + structure + page creation

Configurable per client.

10.2 Execution Model

Hybrid: - AI generates suggestions (human-readable) - System applies structured changes internally

User never sees system-level data structures.

11. Site Brain (Context Layer)

Per-site configuration layer.

Includes:

11.1 Design Tokens

• Colors
• Typography

11.2 Brand Voice

• Description
• Do/Don’t examples

11.3 Guardrails

• Allowed modules per content type
• Layout constraints
• Required sections (optional)

Defined by agency during build.

12. Versioning

• Auto-save drafts
• Explicit publish action
• Preview before publish
• Basic undo (session-based)

No full version history in V1.

13. Multi-Tenant Architecture

Hybrid model: - Shared platform (codebase + infra) - Per-client isolation: - Content - Configuration

14. Frontend Editing Mode

Light edit mode: - Subtle hover indicators - Click to edit - Collapsible AI panel - Optional edit toggle

15. Tech Stack

• Vercel (hosting)
• TypeScript
• React-based component system

Content structure: - JSON-based module system

16. UX Principles

• No CMS-like interface
• Always feel like the real site
• Minimal UI intrusion
• Clear approvals before changes
• Non-technical, approachable tone

17. Non-Goals (V1)

• Full CMS replacement
• Advanced collections
• Deep version history
• Highly flexible layouts
• User-defined design systems

18. Future Considerations

• Looser blog structures
• AI-driven onboarding
• Usage-based billing
• Expanded capability tiers
• Cross-site updates

End of PRD