Skip to content · Saltar al contenido
ドキュメント

Documentación completa

Toda la documentación de Pcreative Studio, en una página. Instala, crea tu primer proyecto y conoce cada pieza.

DescargarCaracterísticas
概要

01Qué es Pcreative Studio

Pcreative Studio es una app de escritorio (PyQt6) que automatiza la parte aburrida de empezar un proyecto de plantilla web para vender en marketplaces (ThemeForest, CodeCanyon, Gumroad…), dirigida de principio a fin por agentes de IA.

  • Hace el scaffold de 84 stacks modernos con el CLI oficial de cada uno y defaults al día.
  • Suelta un CLAUDE.md/AGENTS.md con el contexto, para que cualquier agente entienda el objetivo desde el primer mensaje.
  • Abre una ventana por proyecto con preview embebido, terminal, logs y el agente listo para chatear.
  • Empaqueta, valida y despliega de cara al marketplace sin salir de la app.

Pcreative Studio NO genera el código de tus plantillas — eso lo hace el agente. Prepara el terreno para que el agente arranque con el máximo contexto y el mínimo boilerplate.

要件

02Requisitos

  • Linux (Arch / CachyOS / Manjaro / EndeavourOS recomendado; probado en KDE Plasma 6 Wayland; funciona en otros DEs).
  • Python 3.11+ y PyQt6 6.6+ (incluye QtWebEngine para el navegador embebido).
  • Node.js 20+ y npm (terminal embebida, CLIs de IA y la mayoría de scaffolds).
  • Git 2.40+.
  • Opcional: Docker (stacks WordPress/e-commerce), Composer + PHP 8.3+ (Laravel/WP), GitHub CLI (botón de GitHub).

Para los agentes necesitas al menos uno: claude · codex · gemini · opencode. Se invocan como procesos externos; Pcreative Studio no los incluye.

インストール

03Instalación

Se distribuye como proyecto Python que clonas y arrancas con launch.sh.

bash
# Arch / CachyOS
sudo pacman -S --needed python python-pyqt6 python-pyqt6-webengine

# Debian / Ubuntu
sudo apt install python3 python3-pyqt6 python3-pyqt6.qtwebengine

git clone https://github.com/pcreativedev/pcreative-studio.git
cd pcreative-studio
cd terminal && npm install && cd ..   # servidor de terminal embebida (Node)
./launch.sh

Alternativa: copia o enlaza un .desktop a ~/.local/share/applications/ apuntando a tu launch.sh para tener entrada en el menú.

クイックスタート

04Tu primer proyecto

  • Lanza Pcreative Studio y rellena el formulario: Nombre, Stack (p. ej. Next.js + Tailwind), Tipo y Proveedor de IA.
  • Deja el modo en «Desde cero» y pulsa «Crear proyecto y lanzar agente».
  • Se ejecuta el scaffold oficial, se copian los MDs de contexto y se genera el CLAUDE.md con metadata, análisis de mercado y requisitos.
  • Se abre la ventana del proyecto con preview, terminal y el agente cargado.

Consejo: dile al agente «Lee CLAUDE.md y dime qué entiendes antes de tocar nada» para confirmar el contexto. Cuando estés listo, pulsa ▶ Start preview para levantar el dev server en el navegador embebido.

モード

05Modos de creación

Desde cero (scratch)

Greenfield puro: ejecuta el scaffolder del stack y te deja un proyecto limpio. Ideal para ideas nuevas sin referencia.

Recrear referencia (recreate)

Apuntas a una carpeta, ZIP o URL de referencia. Se deja en reference/ (gitignored) y el CLAUDE.md incluye reglas anti-copia estrictas: el agente reimplementa cada línea desde cero con tu marca.

Adoptar local (adopt)

Tienes una plantilla en una carpeta y quieres trabajarla in-place. Copia el contenido al proyecto y añade el contexto encima, sin alterar tu código. Detecta mono-repos automáticamente.

Repo existente (existing)

Apuntas a un repo de GitHub (owner/name): lo clona, detecta el stack, añade el contexto y abre la ventana del proyecto.

スタック

06Stacks soportados (84)

La lista completa vive en stacks.py. Cada stack tiene su comando de scaffold oficial, sus skills, su perfil de preview (comando + puerto) y notas específicas.

  • Frontend: Next.js (Tailwind/shadcn/Mantine/HeroUI), Astro, Remix, Nuxt, SvelteKit, Qwik, SolidStart, React-Vite, Vue 3, Angular, HTML+Tailwind/Bootstrap.
  • WordPress (×6): block, bricks, elementor, divi, breakdance, plugin — con WP+MariaDB en Docker autoprovisionado, autologin, free pack y MCP de WordPress.
  • Shopify (×7): liquid (Dawn), hydrogen, polaris-app, liquid-blank, functions, storefront-webcomponents, checkout-extension.
  • E-commerce (×17, categoría unificada): Medusa, Saleor, Vendure, Magento Hyvä, BigCommerce, PrestaShop, OpenCart, Sylius, ForgeCommerce…
  • Backend: Hono, NestJS+Prisma, FastAPI, Django, Phoenix, Rails, Spring Boot, Ktor, Go-Fiber, Rust-Axum.
  • Móvil: Flutter, Expo/React Native, Ionic+Capacitor, Kotlin+Compose. Escritorio: Tauri, Electron. Juegos: Phaser, PixiJS, React Three Fiber.
エージェント

07Proveedores de IA

Pcreative Studio invoca CLIs de agentes externos como subprocesos. Tú eliges cuál dirige cada proyecto.

  • Claude (claude · Anthropic) · Codex (codex · OpenAI) · Gemini (gemini · Google) · OpenCode (opencode).
  • API keys: panel de Ajustes → se guardan en ~/.config/pcreative-studio/keys.json con permisos 0600; nunca se loguean, solo se muestran como set/unset.
  • autoskills: instala skills técnicas del stack (Next.js, WordPress, Shopify…) en el agente.
  • UI/UX Pro Max (uipro): design system — reglas de razonamiento, estilos UI, paletas y combos tipográficos para el lado visual.
デザイン

08Inteligencia de diseño (UI pro)

Para cada proyecto React, Pcreative Studio cablea una capa visual sobre autoskills/uipro para que las webs queden a nivel de estudio: instala framer-motion y escribe dos guías (UI-MOTION.md y STACK-PREMIUM.md) que el agente lee antes de tocar la UI.

  • 21st.dev / Magic (MCP, con TWENTYFIRST_API_KEY): bloques y secciones pro vía /ui.
  • React Bits (MCP, sin key): el «wow» animado — fondos aurora/partículas, texto animado, efectos.
  • shadcn (MCP) + registros (Animate UI, SmoothUI, Cult UI…) y, por stack, Chakra UI / HeroUI.
  • Uiverse y Preline: micro-elementos y bloques Tailwind (solo contexto, sin MCP).
  • Animación: framer-motion para el día a día, GSAP (ScrollTrigger/SplitText) para lo cinematográfico.
  • 3D/WebGL: r3f + drei + postprocessing, solo cuando el nicho lo pide, con reglas de rendimiento (lazy, poster, reduced-motion).

Todo se invoca en runtime (MCPs por npx, paquetes npm en tu proyecto), nunca se empaqueta en Pcreative Studio; todas las fuentes son MIT/Apache-2.0.

分析

09Análisis de referencia (conversacional)

En modo recrear o adoptar, el botón 🔍 Analizar con IA escanea la referencia (detecta build-system, estructura de marketplace, mono-repos) y lanza al agente con un prompt adecuado (reglas anti-copia para plantillas comerciales, o modo design-export si parece una exportación de Figma/Claude Design).

  • Conversa de verdad: respondes y el agente refina el análisis (stack, mercado, gaps, plan) turno a turno.
  • Al guardar, la conversación completa se inyecta en el CLAUDE.md del proyecto.
  • El agente arranca ya consciente de tu análisis y confirma lo que entendió antes de tocar código.
ワークショップ

10La ventana del proyecto

Cada proyecto abre una ventana propia con preview embebido (multipestaña), terminales embebidas y logs del dev server en vivo.

  • Preview: QTabWidget de vistas web cableadas al dev server; barra de URL compartida, recarga, 🚀 abrir en navegador externo, 📸 screenshot, 🔧 DevTools.
  • Presets de viewport: 360, iPhone 14, Tablet, 1280, 1920, Full — para QA responsive sin abrir otro navegador.
  • Mono-repo: si hay varios stacks, aparece un selector de Sub-proyecto que cambia el perfil de preview/puerto.
  • Terminales (xterm.js + node-pty): Setup, Shell y una por agente, con el CLI ya cargado; cambias de pestaña con el agente corriendo.
  • ▶ Start / ■ Stop preview: ejecuta el perfil del stack; para perfiles detached (wp-env, docker) Stop sigue activo.
検査

11Pre-flight checker (13 comprobaciones)

Botón 🔬 que verifica que el proyecto está listo para subir a marketplace (Envato, Gumroad…). Rápido: solo filesystem + grep.

  • README presente · LICENSE/licensing.txt · documentation/ HTML · screenshots/ (≥3).
  • Sin jQuery 1.x/2.x ni Bootstrap 3/4 legacy · sin trackers hardcodeados (GA, FB Pixel, Hotjar).
  • prefers-reduced-motion respetado · .env fuera de git · tamaño del proyecto (<50 MB ideal).
  • Placeholders del scaffold sustituidos (__SLUG__, YOUR_DOMAIN…) · Lighthouse / html-validate (info).

Veredicto: ✓ listo · ⚠ con warnings · ✗ con fallos bloqueantes (probable rechazo del marketplace). Cada ítem se expande con la pista de cómo arreglarlo.

梱包

12Empaquetar para el marketplace (ZIP)

Botón 📦 que empaqueta el proyecto en un ZIP listo para subir, excluyendo agresivamente el ruido de desarrollo.

  • Excluye node_modules, .git, .next/.nuxt/dist/build, caches, .vscode/.idea/.cursor, vendor, target…
  • Excluye .env*, CLAUDE.md, AGENTS.md, GEMINI.md, MEMORY.md, *.log, *.bak…
  • Opciones: incluir documentation/, screenshots/, source/ (PSDs/Figma).
  • Salida en ~/Proyectos/themes-builds/<slug>-<fecha>.zip, envuelto en una carpeta <slug>/ (convención de marketplace).
公開

13Demo deploy

Botón 🚀 que construye y despliega a un host público para compartir un preview con cliente o revisor.

  • Targets: Netlify, Vercel, Cloudflare Pages, Surge (la primera vez abren navegador para OAuth).
  • Detecta el stack (Next export, Astro/Vite, SvelteKit, Gatsby, CRA, Angular, Nuxt, Hugo, Jekyll, HTML) y pre-rellena build + dist.
  • Muestra logs de build y deploy en vivo; al terminar copia la URL al portapapeles.
  • Stacks server-rendered (Laravel, WordPress…) no aplican: para esos usa el ZIP + un host con runtime.
コスト

15Cost tracker

La pestaña 💰 Coste IA agrega tokens y coste de cada proveedor leyendo SOLO ficheros locales de tu home — no contacta con ninguna API.

  • Scanners: Claude Code (sesiones .jsonl, robusto), Codex (best-effort). Gemini/OpenCode enlazan a su panel.
  • Pricing embebido por modelo; coste = input + output + cache write/read.
  • Gráficas: donut por proveedor, top 10 proyectos, 30 días apilados. Tablas por modelo/proveedor/proyecto.
  • Pulsa ↻ Re-escanear tras usar los agentes (no auto-refresca mientras trabajas).
比較

16Comparar agentes

La pestaña 🤝 Comparar lanza el mismo prompt en varios CLIs en paralelo y muestra las salidas lado a lado en paneles redimensionables.

  • Streaming por panel con estado, TTFT (time-to-first-token) y tiempo total.
  • Casos de uso: elegir el mejor agente para una tarea, detectar prompts ambiguos (si divergen) o generar soluciones competidoras para mezclar.
  • 📋 copia la salida de un panel; ■ cancela todos; 🧹 limpia.
ギットハブ

17Integración con GitHub

El botón 📦 GitHub descubre repos existentes y ofrece actualizar o crear.

  • Verifica gh instalado y autenticado; busca repos que coincidan con el nombre del proyecto (tu usuario + la org configurada).
  • Sanea el índice: asegura que .gitignore bloquea node_modules, .next, dist, .env*, etc., y untrackea lo que se hubiera colado.
  • Actualiza (push) o crea el repo privado y hace push, mostrando la URL al terminar.
テーマ

18Temas de la app

La propia UI de Pcreative Studio es temable: 8 temas integrados (Dark, Light, Dracula, Nord, Tokyo Night, Brutalism, Linear, Soft UI), editor visual y un importador DTCG de Figma.

  • Cada tema expone ~50 tokens (color, tipografía, espaciado, forma, variantes de componente).
  • El editor visual aplica los cambios al instante (la app es el preview en vivo) y guarda en ~/.config/pcreative-studio/themes/.
  • La Web UI (dentro de QtWebEngine) trae sus propios temas: Neo-Tokyo, Matrix y Kawaii.
バイブ

19Vibe scaffolder

Describe lo que quieres en lenguaje natural y la IA pre-rellena stack, tipo, tema y un prompt de ~200 palabras para el agente.

Ejemplo: «Landing premium para clínica dental en Madrid, paleta cálida» → Stack: Next.js · Tipo: Landing · Tema: Soft UI, con un brief listo para que el agente lo monte.

MCP

20Servidores MCP

Pcreative Studio se expone como servidor MCP (otros agentes pueden usar sus herramientas: list_stacks, create_project…) y, además, pre-configura un .mcp.json en cada proyecto nuevo.

  • Siempre: filesystem, fetch, memory, github, el MCP del propio Pcreative Studio.
  • Web frontend: playwright, chrome-devtools, figma-context, browsermcp + los UI (magic, magicui, shadcn, reactbits).
  • Por stack: chakra-ui/heroui, shopify-dev, postgres…
  • Todo MIT/Apache-2.0; nunca se empaqueta el código del MCP — el cliente lo descarga en runtime vía npx/uvx/docker.
モバイル

21Motor remoto / móvil

Un gateway FastAPI (JSON-RPC + WebSocket) expone el motor de Pcreative Studio como API, y una PWA reimplementa la UI sobre ella para dirigir el motor desde el móvil en tu red.

Pensado para lanzar misiones, ver progreso y revisar resultados sin estar delante del escritorio.

オペレーター

22Operator (Hermes) — misiones autónomas

Modo opcional (requiere Hermes Agent): describe un objetivo y el agente itera SOLO — planifica, hace el scaffold, edita y pasa QA — con preview en vivo y un chat para guiarlo.

  • Mission Control: lanza misiones, ve el plan y el progreso, e interviene por chat.
  • Cerebro (OpenRouter) + mano (Codex): separa el razonamiento de la ejecución.
  • Aprende por proyecto en un .hermes.md y mejora misión a misión.
  • 🚀 desde la Galería o la ventana del proyecto, también sobre proyectos que ya tienes.
ライセンス

23Sistema de licencias (opcional, BYO)

Pcreative Studio puede inyectar el CLIENTE de verificación de licencias en cada theme que generes (wizard de setup + middleware + cliente HTTP). NO incluye el backend: tú traes el tuyo o apuntas a un servicio (Lemon Squeezy, Polar, Paddle, Gumroad…).

  • Las URLs salen de tu ~/.config/pcreative-studio/licensing.json (placeholders YOUR_DOMAIN si no hay config).
  • Por stack se generan los ficheros adecuados (Next.js, Laravel, WordPress, Express…).
  • Si no vendes con licencias, deja la casilla apagada y no se añade nada.
トラブル

24Solución de problemas

  • El preview no carga: confirma que el dev server arrancó (logs abajo) y que el puerto coincide con el asignado en ~/.config/pcreative-studio/ports.json.
  • El agente no responde: revisa que su CLI está en el PATH y que la API key está configurada en Ajustes.
  • Scaffold falla: instala el runtime del stack (Node/PHP/Composer/Docker…) que pida el asistente de dependencias.
  • Stacks WordPress/e-commerce: necesitan Docker corriendo para autoprovisionar la BD.