Desarrolladores · Herramientas

Herramientas

Los archivos de su tema viven en un espacio de trabajo de nuestro lado. El editor del navegador, la CLI y Claude leen y escriben esos mismos archivos, así que puede cambiar de uno a otro a mitad de un cambio.

Elegir

Tres formas de trabajar

Elija por dónde le guste escribir. Nada de lo que haga en una queda atrapado ahí.

	Editor del navegador	CLI en cualquier editor	Claude
Instalación	Nada	Node.js, y un comando de npm	Un plan de Claude, más un conector
Dónde edita	Árbol de archivos y editor de código en app.whizzycommerce.com	VS Code o cualquier editor, en su propio disco	claude.ai, Claude Code, o VS Code con la extensión Claude Code
Vista previa	Junto al código	whizzy-theme dev la abre y la recarga al guardar	preview_theme devuelve un enlace; screenshot_page le enseña el resultado a Claude
Git y CI	No	Sí, con un WHIZZY_TOKEN	A través de Claude Code en su repositorio
IA	Asistente opcional con su propia clave de la API de Anthropic	Lo que ya use	Su plan de Claude o su clave de API
Bueno para	Un arreglo rápido, o no instalar nada	El trabajo diario, el control de versiones, los equipos	Bocetar secciones, tareas pesadas, dejar una versión lista

Terminal

La CLI

whizzy-theme ejecuta en su máquina el mismo validador del instalador, así que una pasada limpia en local es un envío limpio. Inicia sesión en su cuenta de desarrollador, no en una tienda.

npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
whizzy-theme login
whizzy-theme init harbour
cd harbour
whizzy-theme dev --page=home

Comando	Qué hace
`whizzy-theme login`	Abre el navegador para entrar en su cuenta de desarrollador, y guarda un token en esta máquina.
`whizzy-theme logout`	Olvida el token guardado.
`whizzy-theme whoami`	Imprime la cuenta de desarrollador y la persona con la que tiene la sesión iniciada.
`whizzy-theme init <slug> [dir]`	Crea un espacio de trabajo desde el tema de referencia, o desde la versión publicada cuando el identificador es uno de sus temas listados, y escribe sus archivos en una carpeta.
`whizzy-theme pull <slug> [dir]`	Descarga los archivos actuales de un espacio de trabajo, por ejemplo en otro ordenador.
`whizzy-theme push [dir]`	Sube la carpeta a su espacio de trabajo. Se niega si el espacio cambió desde su último pull.
`whizzy-theme dev [dir] --page=product`	Sube en cada guardado y monta el borrador en la tienda propia del tema, con una vista previa al lado. La opción no es obligatoria.
`whizzy-theme validate [dir]`	Ejecuta en local el validador del instalador e imprime todo lo que descartaría.
`whizzy-theme submit [dir] -m "changelog"`	Envía los archivos del espacio de trabajo a revisión con ese registro de cambios. Haga push antes si cambió algo en local.
`whizzy-theme status [slug]`	Muestra el estado de revisión de cada versión y las notas del revisor.
`whizzy-theme reset [dir] --yes`	Tira todos los cambios sin enviar y empieza otra vez desde la versión publicada, luego hace pull de ella.
`whizzy-theme schema [file]`	Imprime o escribe el JSON Schema del tema para el autocompletado del editor.

validate sale con 0 cuando no se descartaría nada, con 2 cuando el tema instala pero se descartaría algo, y con 1 cuando no instala. WHIZZY_ORIGIN apunta la CLI a otra dirección de la plataforma, que solo necesita si le pedimos que pruebe contra el entorno de pruebas.

Autocompletado en el editor. La carpeta que escribe init ya lleva "$schema" al principio de theme.json, así que VS Code completa y explica cada campo sin ninguna extensión. También escribe AGENTS.md con las reglas de rendimiento, que los asistentes de código leen por su cuenta.

Automatización

CI con un token

En CI no hay navegador con el que iniciar sesión. Cree un token en Desarrollador › Tokens y guárdelo como un secreto llamado WHIZZY_TOKEN. Cuando esa variable existe, la CLI la usa en lugar del login.

Este flujo de GitHub Actions valida y sube cada commit de main a su espacio de trabajo, y envía una versión cuando publica una etiqueta que empieza por v. Suba version en theme.json antes de etiquetar.

name: theme
on:
  push:
    branches: [main]
    tags: ["v*"]

jobs:
  ship:
    runs-on: ubuntu-latest
    env:
      WHIZZY_TOKEN: ${{ secrets.WHIZZY_TOKEN }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
      - run: whizzy-theme validate .
      - run: whizzy-theme push .
      - run: whizzy-theme submit . -m "${{ github.ref_name }}: see CHANGELOG.md"
        if: startsWith(github.ref, 'refs/tags/v')

Los tokens son de una cuenta de desarrollador. Un token puede editar y enviar sus temas. No ve ingresos ni pagos, y no llega a la tienda de ningún comerciante. Revóquelo en Desarrollador › Tokens si se filtra.

Claude

Claude a través del conector de desarrollador

El conector le da a su propio Claude las herramientas para leer, escribir, comprobar, previsualizar y enviar sus temas. Claude corre en su plan. Nuestro servidor solo ejecuta las llamadas a herramientas.

claude.ai

En el navegador

Abra Ajustes › Conectores y elija Añadir conector personalizado.
Llámelo whizzy-developer, y pegue https://app.whizzycommerce.com/mcp/dev.
Pulse Conectar, entre en WhizzyCommerce y apruebe el acceso a su cuenta de desarrollador.
En un chat nuevo, encienda el conector desde el menú de herramientas.

Terminal

Claude Code

claude mcp add --transport http whizzy-developer https://app.whizzycommerce.com/mcp/dev

Luego ejecute /mcp dentro de Claude Code e inicie sesión. Claude Code en la web funciona igual con el repositorio de su tema.

VS Code

Con la extensión Claude Code

Instale la extensión Claude Code, ejecute el mismo comando claude mcp add en la terminal integrada, y abra la carpeta de su tema. Claude edita archivos por el conector, o en disco con la CLI al lado.

Herramienta	Qué hace
`list_themes`	Lista los temas de su cuenta de desarrollador, con su revisión y si cada uno está ya en el catálogo.
`create_theme`	Crea un espacio de trabajo desde el tema de referencia o desde uno en blanco.
`read_theme_file`	Lee un archivo con la revisión actual del tema, o lista todos los archivos cuando la ruta está vacía.
`write_theme_files`	Escribe varios archivos a la vez. Si el tema cambió desde la última lectura de Claude, no se escribe nada y Claude lo vuelve a leer.
`delete_theme_file`	Borra un archivo. theme.json no se puede borrar.
`validate_theme`	Ejecuta las comprobaciones de publicación sobre los archivos actuales: si instala, qué CSS se descarta, si la versión es más nueva, colisiones de clases, plugins.
`preview_theme`	Monta los archivos como borrador en la tienda propia del tema y devuelve una vista previa de la página y un enlace que pone un navegador sobre el borrador.
`screenshot_page`	Devuelve una captura de una página a un ancho de entre 320 y 1920 píxeles, para que Claude vea lo que ha construido.
`submit_release`	Envía los archivos actuales a revisión con un registro de cambios. Claude le pide confirmación antes.
`reset_theme`	Empieza otra vez la copia de trabajo desde la versión publicada. Claude le pide confirmación antes.
`get_release_status`	Devuelve las últimas versiones enviadas con su estado de revisión y las notas del revisor.

Una conversación que acaba en un envío es así.

Usted
Añade una sección de lookbook a harbour: una foto grande con tres tarjetas de producto al lado, apiladas en el móvil.
Claude
read_theme_file, write_theme_files
Lee theme.json y una sección existente para coger las convenciones, escribe sections/lookbook.json, y la añade a templates/home.json.
Claude
validate_theme
El validador descarta una propiedad CSS. Claude la sustituye por una que el sanitizador conserva.
Claude
preview_theme, screenshot_page
Previsualiza la portada en la tienda propia del tema a 390 y 1440 píxeles, se da cuenta de que las tarjetas se desbordan en el móvil, y arregla la cuadrícula.
Usted
Buena pinta. Ponlo en 1.3.0 y envíalo.
Claude
write_theme_files, submit_release
Sube la versión, escribe el registro de cambios a partir de lo que cambió, y le pide confirmación antes de enviar.
Claude
get_release_status
Informa de que todas las comprobaciones han pasado y de que la versión espera revisión.

Sin instalar nada

El editor del navegador

Desarrollador › Temas › su tema › Editor. Un árbol de archivos, un editor de código que valida mientras escribe, una vista previa del borrador en la tienda propia del tema y un botón de Enviar.

El editor tiene un panel de asistente opcional. Se queda apagado hasta que pegue en él su propia clave de la API de Anthropic. La clave se comprueba con Anthropic, se sella en reposo, se guarda solo en ese espacio de trabajo, y puede quitarla cuando quiera. Cada petición que hace el asistente la factura Anthropic a esa clave.

Claramente

Quién paga la IA

Usted, directamente, y solo lo que use.

WhizzyCommerce nunca ejecuta IA con su propia clave para desarrolladores. Su plan de Claude o su clave de la API de Anthropic pagan su uso del modelo. Nuestros servidores solo ejecutan las llamadas a herramientas que recibe el conector, que son gratis. No revendemos, no medimos ni encarecemos tokens.

Por qué no hay terminal alojada. Una terminal en nuestra app significaría ejecutar una máquina aislada por desarrollador, y ejecutar su sesión de Claude en nuestros servidores. Claude Code en la web ya es esa terminal: corre contra su repositorio, Anthropic lo mantiene, y su plan lo paga. Añada ahí el conector y tiene todo lo que le daría una terminal alojada. Para lo demás, vea Primeros pasos.

SiguienteConectar Claude →