# Pyzed Design

> El manual de Pyzed Design, el diseñador visual de GUIs para Python: dibuja ventanas y componentes, diseña shaders, conecta eventos a Python, ejecútalos y distribúyelos.

Source: https://albakore.github.io/pyzed/es/editor/

**Pyzed Design** es el editor visual de Pyzed, hecho con el propio Pyzed. Dibujas una ventana con el ratón, ajustas
sus propiedades en una grilla, haces doble clic en un control para escribir el código Python de su evento y pulsas
<kbd>F5</kbd> para ejecutarla con toda su lógica. El mismo editor crea **componentes** reutilizables, **shaders** de
GPU hechos de nodos, y edita el Python de todo tu proyecto.

Se apoya en herramientas que mucha gente ya conoce: el diseñador de formularios de **Visual Basic** y **Qt Designer**
(dibujar, ajustar propiedades, conectar eventos), las escenas y los visual shaders de **Godot**, el panel de detalles
y el editor de materiales de **Unreal Engine**, y una interfaz limpia y cómoda con el teclado inspirada en el editor
de código **Zed**. El objetivo es un framework de frontend para apps de escritorio que puedas usar sin escribir
código, y ampliar con código cuando quieras.

## Abrirlo

Descarga la [app independiente](https://albakore.github.io/pyzed/es/download/) (trae su propio Python y uv), o arráncalo desde un entorno de
Python:

**uv:**

```bash
uv add "pyzed-ui[designer]"      # en tu proyecto: Pyzed más los servidores de lenguaje ty y ruff
uv run pyzed design
```

**pip:**

```bash
pip install "pyzed-ui[designer]"
pyzed design
```

**python:**

```bash title="macOS / Linux"
python3 -m pip install "pyzed-ui[designer]"
python3 -m pyzed design
```
```powershell title="Windows (PowerShell)"
py -m pip install "pyzed-ui[designer]"
py -m pyzed design
```

| Comando | Qué abre |
| --- | --- |
| `pyzed design` | Dentro de un proyecto: su formulario principal (`[tool.pyzed] main`). Fuera: la ventana de bienvenida o un formulario vacío. |
| `pyzed design login.pzform` | Ese formulario, o uno nuevo con ese nombre que se crea al guardar por primera vez. |
| `pyzed design ui/rating.pzcomp` | Un [componente](https://albakore.github.io/pyzed/es/editor/component-designer/) (se crea al guardar si no existe). |
| `pyzed design fx/fuego.pzshad` | Un [shader hecho de nodos](https://albakore.github.io/pyzed/es/editor/shader-view/) (se crea al guardar si no existe). |
| `python -m pyzed.designer [archivo]` | Lo mismo, sin el comando `pyzed` en el `PATH`. |

## El flujo de trabajo en una imagen

```mermaid
flowchart LR
    TB[Herramientas] -->|arrastrar o clic| CV[Lienzo]
    CV -->|seleccionar| PR[Propiedades]
    CV -->|doble clic| EV[Eventos]
    EV --> CE[Editor de código]
    CV -- Ctrl+S --> F[(login.pzform)]
    CE -- Ctrl+S --> P[(login.py)]
    F --> RUN["F5 · pyzed run"]
    P --> RUN
    RUN --> W[Ventana nativa]
    RUN -. prints, eventos, errores .-> CO[Consola]
```

1. **Coloca** controles desde las herramientas: arrástralos al formulario, o haz clic en uno y luego clic (o arrastra
   un rectángulo) en el formulario.
2. **Ordénalos** con el ratón, el teclado, las guías inteligentes, las herramientas de alineación o un
   [contenedor de disposición](https://albakore.github.io/pyzed/es/editor/layouts/).
3. **Configúralos** en [Propiedades](https://albakore.github.io/pyzed/es/editor/properties/): texto, datos, estilo, anclajes.
4. **Escribe la lógica**: doble clic en un control abre el manejador de su evento principal en el
   [editor de código](https://albakore.github.io/pyzed/es/editor/code-editor/).
5. **Ejecuta** con <kbd>F5</kbd>. La [consola](https://albakore.github.io/pyzed/es/editor/console-and-running/) muestra prints, eventos y
   errores; guardar actualiza la ventana en ejecución.
6. **Reutiliza y distribuye**: convierte las piezas repetidas en [componentes](https://albakore.github.io/pyzed/es/editor/component-designer/)
   y empaqueta la app con `pyzed build` (ver [Distribuir](https://albakore.github.io/pyzed/es/packaging/)).

## Empieza aquí

## Las vistas

## Diseñar formularios

## Ejecutar, archivos, IA y referencia

**Sobre las capturas:**

Cada panel y cada vista tiene su página, escrita para la versión actual. Las capturas y grabaciones cortas se hicieron
en Linux con el tema One Dark (y One Light cuando el sitio está en claro), así que los botones de la barra de título y
las fuentes pueden verse un poco distintos en Windows o macOS.