diff --git a/client/src/pages/DESIGN_STUDIO.md b/client/src/pages/DESIGN_STUDIO.md
new file mode 100644
index 0000000..4a39125
--- /dev/null
+++ b/client/src/pages/DESIGN_STUDIO.md
@@ -0,0 +1,29 @@
+# Design Studio — Contexto para próximo agente
+
+## O que é
+
+Design Studio é a entrada na sidebar de `/development` (DevelopmentModule.tsx) que abre o `DevCenter.tsx` como painel interno.
+
+## Estado atual (27/03/2026)
+
+O ícone e a navegação estão implementados. O conteúdo renderizado é o `DevCenter.tsx` existente, que já possui 4 abas funcionais:
+
+| Aba | O que faz |
+|-----|-----------|
+| **Design** | Editor de definições de agente (modos: Markdown, TypeScript, Visual-JSON) |
+| **Assemble** | Agentes draft → Blackboard gera o código → polling de status |
+| **Deploy** | Agentes prontos → deploy, re-montar |
+| **Galeria** | Grid de agentes implantados, busca, executar, fork |
+
+## O que FALTA (João tem ideias — perguntar antes de implementar)
+
+- **Visual canvas drag-and-drop** para o modo "Visual" do editor (hoje é um Textarea com JSON manual)
+- **Suporte a UML** no editor de definições
+- O usuário João mencionou ter ideias específicas para o Design Studio — **confirmar com ele antes de implementar qualquer coisa nova aqui**
+
+## Arquivos relacionados
+
+- `client/src/pages/DevCenter.tsx` — componente principal renderizado pelo Design Studio
+- `client/src/pages/DevelopmentModule.tsx` — sidebar onde o item foi adicionado (id: "designstudio", ícone: PenTool)
+- `server/routes/agent-defs.ts` (ou similar) — API de definições de agentes usada pelo DevCenter
+- `migrations/phase6_agent_defs.sql` — schema das tabelas de agent definitions
diff --git a/client/src/pages/DevelopmentModule.tsx b/client/src/pages/DevelopmentModule.tsx
index 8485900..fae97be 100644
--- a/client/src/pages/DevelopmentModule.tsx
+++ b/client/src/pages/DevelopmentModule.tsx
@@ -11,12 +11,12 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
-import { 
+import {
   Code2, Database, Layout, GitBranch, BarChart3, FileText,
   Plus, Settings, Play, Zap, Layers, Puzzle, Palette,
   Terminal, Box, Workflow, PanelLeft, Table2, FormInput,
   ListChecks, PieChart, LineChart, Gauge, Bot, Code, Trash2, Save,
-  Sparkles, Rocket
+  Sparkles, Rocket, PenTool
 } from "lucide-react";
 import { useLocation } from "wouter";
 
@@ -27,8 +27,9 @@ import IDE from "./IDE";
 import DevAgent from "@/components/lowcode/DevAgent";
 import OpenClawPanel from "@/components/OpenClawPanel";
 import AutomationCenter from "./AutomationCenter";
+import DevCenter from "./DevCenter";
 
-type ActiveTool = "home" | "doctypes" | "pages" | "workflows" | "dashboards" | "reports" | "scripts" | "ide" | "agent" | "openclaw" | "automationcenter";
+type ActiveTool = "home" | "doctypes" | "pages" | "workflows" | "dashboards" | "reports" | "scripts" | "ide" | "agent" | "openclaw" | "automationcenter" | "designstudio";
 
 interface Dashboard {
   id: number;
@@ -279,6 +280,15 @@ export default function DevelopmentModule() {
       count: 0,
       category: "dev"
     },
+    {
+      id: "designstudio" as ActiveTool,
+      name: "Design Studio",
+      description: "Projete e monte agentes autônomos",
+      icon: PenTool,
+      color: "bg-purple-600",
+      count: 0,
+      category: "dev"
+    },
   ];
 
   const [, navigate] = useLocation();
@@ -727,6 +737,7 @@ export default function DevelopmentModule() {
         {activeTool === "agent" && <DevAgent />}
         {activeTool === "openclaw" && <OpenClawPanel />}
         {activeTool === "automationcenter" && <AutomationCenter />}
+        {activeTool === "designstudio" && <DevCenter />}
       </div>
 
       <Dialog open={showNewDashboardDialog} onOpenChange={setShowNewDashboardDialog}>