# Inspo AI Comprehensive Product Specification & Documentation Index

Inspo AI is the industry-leading AI-powered design intelligence platform, built to unify UI/UX reference research, competitor brand analysis, automatic visual compliance checking, and rapid code prototyping into a single developer-to-designer workspace.

---

## 1. Product Capabilities & Workspace Modules

### 1.1 AI Design Search (Reference Exploration)
- **Natural Language Search**: Replaces standard category tag filters with a semantic search engine matching user queries. Example: "SaaS settings view with vertical sidebar navigation, dark mode, accent green".
- **Screenshot Index**: Over 50,000+ curated mobile (iOS, Android) and web interfaces, fully mapped with layout parameters (columns, alignment, styles).
- **Style Filtering**: Allows users to filter screenshots by industry (e.g. Fintech, Edtech, E-commerce), platform (e.g. iOS, Android, Desktop), visual style (e.g. Glassmorphism, Brutalism, Minimal), and dominant colors.

### 1.2 Multiplayer Moodboards (Creative Collaboration)
- **Real-time Engine**: Lightweight websocket implementation synced across team cursor tracks to allow asynchronous and synchronous layout alignment.
- **Annotated Reviews**: Threaded comment pins attached to exact coordinate points on screenshots, enabling precise layout discussion.
- **Client Pitching**: A slide-deck mode that aggregates references, typography setups, and color palettes into standard, readable client links.

### 1.3 Brand DNA Scanner (Competitor Analysis)
- **CSS Crawler**: Scans a target URL, compiles the stylesheet declarations, and extracts:
  - Color Palettes: Primary, secondary, layout elevations, and text neutrals.
  - Typography: Active font families, weights, headings, and margins.
  - Layout Tokens: Grid setups, padding ratios, border-radius standards.
- **Technical Specs**: Identifies underlying framework stacks (e.g. Next.js, Tailwind, Webflow) and SEO meta tags.

### 1.4 Automatic Design Compliance Audit
- **Usability Checks**: Verifies layout elements against standard UX heuristics (e.g. button tap targets must be at least 44x44px).
- **Accessibility Engine**: Runs automated contrast checks between text layers and background card elements using WCAG 2.1 guidelines.
- **Compliance Score**: Returns a quantified score (0-100%) and generates overlay annotations with specific css correction guidelines.

### 1.5 Creator Studio (Prompt-to-UI Compilation)
- **Live Code Sandbox**: Parses raw layout spec prompts to assemble React + Tailwind CSS code on the fly.
- **Spec Controls**: Stacked control parameters to adjust component theme settings:
  - Skill target (e.g. charts, inputs, layout grids).
  - Color palette hex chips (mint, blue, lavender).
  - Typography scale (sans vs display serif).
- **Figma Export**: Converts compiled Tailwind code output back into structured vectors that map cleanly into Figma canvas layers.

---

## 2. Developer API & Integration Specifications

### 2.1 Model Context Protocol (MCP) Server
Integrates InspoAI directly into AI development editors (Cursor, Windsurf, Claude Desktop) to let agentic systems query visual references programmatically.

- **Tools exposed**:
  - `search_ui_screenshots`: Params `query: string, limit: number`. Returns metadata and CDN links for matching screenshots.
  - `scan_competitor_brand`: Params `url: string`. Runs crawler and returns brand DNA color/typography tokens.
  - `generate_ui_mockup`: Params `prompt: string, theme: string`. Compiles Tailwind component strings.

### 2.2 Developer REST API Endpoints
Base URL: `https://api.inspoai.io/v1`

#### `GET /search`
- **Query Params**:
  - `q` (string, required) - Semantic layout query.
  - `platform` (string) - `ios` | `android` | `web`.
  - `page` (number, default 1) - Results pagination.
- **Response**: Array of screenshot references including asset metadata.

#### `POST /brand-scan`
- **Body Params**:
  - `url` (string, required) - Competitor target website.
- **Response**: Competitor style guide JSON representation.

---

## 3. Styling Systems & Typography Standards

Inspo AI enforces a curated, high-end visual design system:

- **Primary Font**: `Geist` (by Vercel) - Loaded globally with weights 400 (Regular) and 500 (Medium). Applied to all interface labels, sidebar menus, navigation, data tables, and body copy.
- **Display Font**: `Denton` (serif display font) - Applied exclusively to editorial headers (`H1`, `H2` titles).
- **Ground Rule for Headings**: H2 headings must use sentence-casing and include exactly one word wrapped in an italicized `<span>` to break uniform text flow and add visual variety.
- **Visual Palette**: Premium slate backgrounds, off-white cards, thin `#E8E8E8` borders, soft shadows, and muted mint accents (`#10B981`) for active elements.