Platphorm Design
Open Editor
v0.0.1 - Launch Ready

Platphorm Design Documentation

The AI-first design tool for the Platphorm News network. Create, collaborate, and ship designs with intelligent assistance and seamless integrations.

Get Started Open Editor
API ReferenceMCP ProtocolRoadmap
Canvas Engine
SVG-based vector canvas with pan, zoom, touch support, and real-time shape preview.
AI Assistant
Human-in-the-loop AI that suggests improvements and generates designs.
Export & Save
Multi-format export with social presets. Save directly to docs.platphormnews.com.
Integrations
Connect to SVG, Docs, Sheets, Emoji, and Claws MCP services.

Architecture Overview

┌─────────────────────────────────────────────────────────────────┐
│                     PLATPHORM DESIGN                            │
├─────────────────────────────────────────────────────────────────┤
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────────────┐ │
│  │  Canvas  │  │    AI    │  │  Export  │  │   Integrations   │ │
│  │  Engine  │  │ Assistant│  │  System  │  │      Panel       │ │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘  └────────┬─────────┘ │
│       │             │             │                  │          │
│  ┌────┴─────────────┴─────────────┴──────────────────┴────────┐ │
│  │                    State Management                        │ │
│  │              (IndexedDB + React State)                     │ │
│  └────────────────────────────┬───────────────────────────────┘ │
│                               │                                  │
├───────────────────────────────┼──────────────────────────────────┤
│                          API Layer                               │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────────────┐ │
│  │ /api/v1/ │  │ /api/mcp │  │/api/docs │  │   /api/health    │ │
│  │ designs  │  │          │  │          │  │                  │ │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘  └────────┬─────────┘ │
│       │             │             │                  │          │
├───────┴─────────────┴─────────────┴──────────────────┴──────────┤
│                    Platphorm Network                             │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────────────┐ │
│  │   SVG    │  │   Docs   │  │  Sheets  │  │      Emoji       │ │
│  │ Service  │  │ Service  │  │ Service  │  │     Service      │ │
│  └──────────┘  └──────────┘  └──────────┘  └──────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

Key Concepts

Design Elements

All visual objects on the canvas are represented as typed design elements. Each element has properties like position, size, rotation, fill, stroke, and element-specific attributes.

interface DesignElement {
  id: string
  type: "rectangle" | "ellipse" | "line" | "text" | "image" | "path"
  x: number
  y: number
  width?: number
  height?: number
  fill?: string
  stroke?: string
  strokeWidth?: number
  rotation?: number
  opacity?: number
  locked?: boolean
  metadata?: Record<string, unknown>
}

AI Suggestions

The AI assistant provides design suggestions that require human approval. Each suggestion includes the proposed changes and can be accepted, modified, or rejected.

interface AISuggestion {
  id: string
  type: "layout" | "color" | "typography" | "content"
  description: string
  changes: ElementChange[]
  status: "pending" | "applied" | "rejected"
  confidence: number
}

Part of the Platphorm Network

Phorm is one discovered PlatPhormNews site in the Platphorm News network, providing AI-first tools for content creation, development, and collaboration.

phorm.platphormnews.comsvg.platphormnews.comdocs.platphormnews.comsheets.platphormnews.comemoji.platphormnews.comcodex.platphormnews.com