ProductOSDesign

Documentation

Learn how to build products faster with AI-powered design and development.

Quick Start

5 min#

Get your first AI-powered project running in just a few steps.

1

Create a New Project

Start by describing your project idea. Be specific about features, tech stack preferences, and any constraints.

"Build a task management app with user authentication,
real-time updates, and a clean dashboard interface."
2

Review the Generated Plan

Our AI agents will analyze your requirements and create a development plan including architecture, components, and timeline.

3

Watch the Magic Happen

AI agents collaborate to write code, create components, and set up your project structure.

Project Structure
my-app/
├── src/
│   ├── app/
│   │   ├── (auth)/
│   │   ├── (dashboard)/
│   │   └── api/
│   ├── components/
│   ├── lib/
│   └── hooks/
├── prisma/
└── package.json
4

Deploy & Iterate

Export your code, deploy to your favorite platform, and continue iterating with AI assistance.

Installation

#

ProductOS Design works entirely in your browser — no installation required. You can also set up the CLI for advanced workflows.

Browser (Recommended)

Start building immediately without any setup.

Open Dashboard

CLI (Advanced)

For power users who prefer the command line.

npm install -g @productos/cli

Projects

#

Projects are the foundation of ProductOS Design. Each project contains your code, configurations, and AI context.

Project Structure

Organized file structure following modern best practices and conventions.

AI Context

Your project maintains context across sessions for consistent AI assistance.

Version History

Track all changes with built-in version control and rollback capabilities.

AI Agents

#

ProductOS Design uses specialized AI agents that work together to build your projects.

UI Planner

Analyzes requirements and creates plans for your UI and product

  • Requirement analysis
  • Architecture decisions
  • Task breakdown

UI Agent

Builds screens, components, and production-quality UI

  • Component generation
  • API implementation
  • Testing & debugging

Code Generation

#

AI-powered code generation that follows best practices and your project's conventions.

task-card.tsx
// Generated component example
"use client";

import { useState } from "react";
import { motion } from "framer-motion";

export function TaskCard({ task, onComplete }: TaskCardProps) {
  const [isCompleting, setIsCompleting] = useState(false);

  return (
    <motion.div layout initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
      <div className="rounded-xl border p-4 hover:shadow-md transition-shadow">
        <h3 className="font-medium">{task.title}</h3>
        <p className="text-sm text-muted-foreground">{task.description}</p>
        <button onClick={() => onComplete(task.id)} disabled={isCompleting}>
          {isCompleting ? "Completing..." : "Complete"}
        </button>
      </div>
    </motion.div>
  );
}

Agentic Development

New#

Experience a new paradigm where AI agents collaborate to build your vision.

How It Works

1

Describe

Tell us what you want to build

2

Plan

AI creates a development roadmap

3

Build

Agents collaborate to write code

API Reference

#

Integrate ProductOS Design into your workflow with our REST API.

POST

/api/projects

Create a new project

curl -X POST https://develop.productos.dev/api/projects \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name":"my-app","description":"A task management application","template":"nextjs-starter"}'
GET

/api/projects/:id

Get project details and status

curl https://develop.productos.dev/api/projects/proj_123 \
  -H "Authorization: Bearer YOUR_API_KEY"

Webhooks

#

Receive real-time notifications about your project's progress.

project.created

Fired when a new project is created

generation.completed

Fired when code generation finishes

build.success

Fired when a build completes successfully

build.failed

Fired when a build fails

Configuration

#

Customize your project with configuration options.

productos.config.js
// productos.config.js
export default {
  name: "my-app",
  framework: "nextjs",
  ai: {
    model: "gpt-4",
    temperature: 0.7,
    maxTokens: 4000,
  },
  style: {
    typescript: true,
    eslint: true,
    prettier: true,
    tailwind: true,
  },
  components: {
    library: "shadcn-ui",
    icons: "lucide",
  },
};

Need Help?

Join our community or reach out to support for assistance.

GitHubContact Support