rodnye · Sep 4, 2026 · Sep 4, 2026 · Sep 4, 2026 · Sep 4, 2026
diff --git a/.github/workflows/deploy-website.yml → .github/workflows/deploy-docs.yml b/.github/workflows/deploy-website.yml → .github/workflows/deploy-docs.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches: [main]
     paths:
-      - 'website/**'
+      - 'docs/**'
       - 'package.json'
       - 'pnpm-lock.yaml'
       - 'pnpm-workspace.yaml'
@@ -23,7 +23,7 @@ concurrency:
 
 jobs:
   build:
-    name: Build Docusaurus
+    name: Build Vitepress
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -56,7 +56,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: website/build
+          path: docs/.vitepress/dist
 
   deploy:
     name: Deploy to GitHub Pages

diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 > **Stop copying files into ChatGPT one by one...**
 
 <div align="center">
-  <img src="https://raw.githubusercontent.com/rodnye/codepicker/refs/heads/main/website/static/img/logo.png" width="200">
+  <img src="https://raw.githubusercontent.com/rodnye/codepicker/refs/heads/main/docs/assets/logo.png" width="200">
 
   <h1>codepicker 👌🏻</h1>
 </div>

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -0,0 +1,61 @@
+import { defineConfig } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'Codepicker Docs',
+  base: process.env.BASE_URL ?? '/',
+  description:
+    'Pick code into Markdown. Apply Markdown to code. Built for LLMs and quick backups.',
+  locales: {
+    es: { label: 'Español', lang: 'es' },
+  },
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/es' },
+      { text: 'Guías', link: '/es/getting-started' },
+    ],
+    sidebar: {
+      '/es/': [
+        {
+          text: 'Introducción',
+          items: [
+            { text: '¿Qué es esto?', link: '/es/01_intro' },
+            { text: 'Primeros Pasos', link: '/es/02_getting-started' },
+            { text: 'Uso Básico', link: '/es/03_usage' },
+            { text: 'Ejemplo Práctico', link: '/es/usage-example' },
+            { text: 'Preguntas Frecuentes', link: '/es/faq' },
+            { text: 'Contribuir', link: '/es/contributing' },
+          ],
+        },
+        {
+          text: 'Comandos',
+          items: [
+            { text: 'Pick', link: '/es/commands/pick' },
+            { text: 'Apply', link: '/es/commands/apply' },
+          ],
+        },
+        {
+          text: 'Conceptos',
+          items: [
+            { text: 'Formato Codepick', link: '/es/concepts/codepick-format' },
+          ],
+        },
+        {
+          text: 'Guías Avanzadas',
+          items: [
+            { text: 'Opciones Avanzadas', link: '/es/guides/advanced-options' },
+            {
+              text: 'Flujo de Trabajo con LLMs',
+              link: '/es/guides/llm-workflow',
+            },
+            { text: 'Scripting e instalación', link: '/es/installation' },
+          ],
+        },
+      ],
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/rodnye/codepicker' },
+    ],
+  },
+});
diff --git a/docs/assets/copy_deepseek_response.jpg b/docs/assets/copy_deepseek_response.jpg
diff --git a/website/static/img/logo.png → docs/assets/logo.png b/website/static/img/logo.png → docs/assets/logo.png
diff --git a/docs/assets/waiting_deepseek_response.png b/docs/assets/waiting_deepseek_response.png
diff --git a/.../docusaurus-plugin-content-docs/intro.mdx → docs/es/01_intro.md b/.../docusaurus-plugin-content-docs/intro.mdx → docs/es/01_intro.md
@@ -1,13 +1,19 @@
----
-sidebar_position: 1
-slug: /intro
----
-
 # Introducción a Codepicker
 
-**Codepicker** es una herramienta CLI bidireccional que transforma tu base de código en Markdown estructurado, y viceversa. Está diseñada específicamente para hacer que trabajar con Modelos de Lenguaje Grande (LLMs) en proyectos reales sea **rápido, predecible y sin fricciones**.
+**Codepicker** es una poderosa herramienta CLI bidireccional que transforma tu código fuente en Markdown estructurado, y viceversa. Está diseñada específicamente para hacer que trabajar con Modelos de Lenguaje Grande (LLMs) en proyectos reales sea **rápido, predecible y sin límites**.
+
+> Puedes hechar un vistazo a este [Ejemplo rápido](./usage-example)
+
+## Características
 
-## ¿Por qué Codepicker?
+- ⚡ **Contexto Instantáneo**: Copia secciones completas del proyecto con el flag `-c`.
+- 🔄 **Flujo Bidireccional**: El comando `apply` convierte Markdown de vuelta a archivos en tu disco.
+- 🧠 **Tolerante al Ruido**: Ignora explicaciones y texto extra, manteniendo solo el código válido.
+- 🛡️ **Envoltorio Inteligente**: Previene bloques de código rotos ajustando el número de comillas invertidas.
+- 🎯 **Controles de Precisión**: Limita líneas, añade números, usa rutas absolutas.
+- 📄 **Modo Documentación (`-D`)**: Ayuda a los LLMs a seguir el formato Codepick correctamente.
+- 📦 **Seguro con Binarios**: Evita volcar contenido ilegible de archivos binarios.
+- 🙈 **Consciente de `.gitignore`**: Respeta tu repositorio por defecto.
 
 Trabajar con chats de LLMs en bases de código existentes suele ser un proceso tedioso:
 
@@ -19,16 +25,15 @@ Trabajar con chats de LLMs en bases de código existentes suele ser un proceso t
 
 Incluso con agentes de IDE, a menudo estás limitado a su flujo de trabajo específico. **Codepicker** elimina esta fricción, permitiéndote mover el contexto dentro y fuera de tu proyecto con un par de comandos.
 
-## Características Principales
+## ¿Por qué dices "Bidireccional"?
 
-- ⚡ **Contexto Instantáneo**: Copia secciones completas del proyecto con el flag `-c`.
-- 🔄 **Flujo Bidireccional**: El comando `apply` convierte Markdown de vuelta a archivos en tu disco.
-- 🧠 **Tolerante al Ruido**: Ignora explicaciones y texto extra, manteniendo solo el código válido.
-- 🛡️ **Envoltorio Inteligente**: Previene bloques de código rotos ajustando el número de comillas invertidas.
-- 🎯 **Controles de Precisión**: Limita líneas, añade números, usa rutas absolutas.
-- 📄 **Modo Documentación (`-D`)**: Ayuda a los LLMs a seguir el formato Codepick correctamente.
-- 📦 **Seguro con Binarios**: Evita volcar contenido ilegible de archivos binarios.
-- 🙈 **Consciente de `.gitignore`**: Respeta tu repositorio por defecto.
+Esta no es la primera herramienta que permite recolectar contexto para la IA. Un ejemplo popular es [Repomix](https://repomix.com) que hace algo similar,
+exporta todo tu proyecto a un archivo `repomix-output.xml` y luego... ya?
+
+Ese archivo puedes subirlo a ChatGPT y pedirle "Revisa que problemas puede tener mi código". Pero imagina que ChatGPT te sugiera algunos cambios,
+tendrías que aplicarlos manualmente.
+
+Esto no ocurre con CODEPICKER, cuando la IA te dice el contenido a cambiar de un archivo, puedes insertarlo automaticamente con un solo comando!
 
 ## ¿Cómo funciona?
 
@@ -43,4 +48,4 @@ console.log('Hola Mundo');
 
 Este formato es perfectamente parseable y, a diferencia de los diffs o formatos de respuesta tradicionales, empaqueta el contenido completo del archivo, eliminando ambigüedades.
 
-Todo en orden? Dirígete a la sección de [Primeros Pasos](/docs/getting-started).
+Todo en orden? Dirígete a la sección de [Primeros Pasos](./02_getting-started).
diff --git a/...s-plugin-content-docs/getting-started.mdx → docs/es/02_getting-started.md b/...s-plugin-content-docs/getting-started.mdx → docs/es/02_getting-started.md
@@ -1,8 +1,3 @@
----
-sidebar_position: 2
-slug: /getting-started
----
-
 # Primeros Pasos
 
 Instalar y configurar Codepicker es extremadamente sencillo. Sigue estos pasos para empezar a optimizar tu flujo de trabajo con LLMs.
@@ -46,6 +41,7 @@ Esto buscará todos los archivos `.ts` en la carpeta `src`, los convertirá al f
 
 ## Siguientes Pasos
 
-- Aprende a usar el comando [Pick](/docs/commands/pick) en detalle.
-- Descubre cómo aplicar los cambios con [Apply](/docs/commands/apply).
-- Entiende el [Formato Codepick](/docs/concepts/codepick-format).
+- ¿Aprender rápido a usar esto? Mira este [Ejemplo práctico](./usage-example.md)
+- Aprende a usar el comando [Pick](./commands/pick) en detalle.
+- Descubre cómo aplicar los cambios con [Apply](./commands/apply).
+- Entiende el [Formato Codepick](./concepts/codepick-format).
diff --git a/...s/docusaurus-plugin-content-docs/usage.md → docs/es/03_usage.md b/...s/docusaurus-plugin-content-docs/usage.md → docs/es/03_usage.md
@@ -1,9 +1,3 @@
----
-sidebar_position: 3
-title: Uso básico
-description: Aprende a extraer y aplicar código con Codepicker.
----
-
 # Uso básico
 
 Codepicker se divide en dos comandos principales:

diff --git a/...us-plugin-content-docs/commands/apply.mdx → docs/es/commands/apply.md b/...us-plugin-content-docs/commands/apply.mdx → docs/es/commands/apply.md
@@ -1,8 +1,3 @@
----
-sidebar_position: 4
-slug: /commands/apply
----
-
 # Comando Apply
 
 El comando `apply` toma un documento Markdown (o el contenido del portapapeles) y extrae los bloques de código para escribirlos o actualizarlos en tu sistema de archivos.
@@ -31,6 +26,8 @@ codepicker apply [opciones] [archivo-dump]
    codep apply -c
    ```
 
+> Puedes hechar un vistazo a este [Ejemplo práctico](../usage-example)
+
 ## Ejemplos Prácticos
 
 ### Aplicar desde el Portapapeles

diff --git a/...rus-plugin-content-docs/commands/pick.mdx → docs/es/commands/pick.md b/...rus-plugin-content-docs/commands/pick.mdx → docs/es/commands/pick.md
diff --git a/...content-docs/concepts/codepick-format.mdx → docs/es/concepts/codepick-format.md b/...content-docs/concepts/codepick-format.mdx → docs/es/concepts/codepick-format.md
@@ -1,39 +1,123 @@
----
-sidebar_position: 5
-slug: /concepts/codepick-format
----
-
 # Formato Codepick
 
 El **Formato Codepick** es una sintaxis estructurada de Markdown diseñada para incrustar contenido de archivos junto con sus rutas de destino.
 
 Este formato es el núcleo de cómo Codepicker se comunica con los LLMs, garantizando que el contexto se preserve y se pueda aplicar de vuelta al sistema de archivos sin ambigüedades.
 
+## Ejemplo
+
+::: code-group
+
+````markdown [codepick-output.md]
+```ts
+// src/index.ts
+console.log('Hola');
+```
+
+```json
+// config.json
+{
+  "name": "mi-app"
+}
+```
+````
+
+:::
+
 ## Estructura
 
 Cada archivo se representa como un bloque de código donde:
 
 1. **Etiqueta de apertura**: 3 o más comillas invertidas seguidas de una extensión de lenguaje opcional.
+
+::: code-group
+
+````markdown [codepick-output.md]
+// [!code ++]
+
+```ts
+// src/index.ts
+console.log('Hola');
+```
+
+// [!code ++]
+
+```json
+// config.json
+{
+  "name": "mi-app"
+}
+```
+````
+
+:::
+
 2. **Primera línea interna**: `// ruta/del/archivo.ext` (la ruta del sistema de archivos destino).
+
+::: code-group
+
+````markdown [codepick-output.md]
+```ts
+// [!code ++]
+// src/index.ts
+console.log('Hola');
+```
+
+```json
+// [!code ++]
+// config.json
+{
+  "name": "mi-app"
+}
+```
+````
+
+:::
+
 3. **Contenido**: El contenido real del archivo (cualquier texto).
+
+::: code-group
+
+````markdown [codepick-output.md]
+```ts
+// src/index.ts
+// [!code ++]
+console.log('Hola');
+```
+
+```json
+// config.json
+// [!code ++:3]
+{
+  "name": "mi-app"
+}
+```
+````
+
+:::
+
 4. **Etiqueta de cierre**: El mismo número de comillas invertidas que en la apertura.
 
-## Ejemplo
+::: code-group
 
-````markdown
+````markdown [codepick-output.md]
 ```ts
 // src/index.ts
 console.log('Hola');
+// [!code ++]
 ```
 
 ```json
 // config.json
 {
   "name": "mi-app"
 }
+// [!code ++]
 ```
 ````
 
+:::
+
 ## Reglas del Formato
 
 - Las rutas deben comenzar con `// ` (con un espacio después de las barras).

diff --git a/...aurus-plugin-content-docs/contributing.md → docs/es/contributing.md b/...aurus-plugin-content-docs/contributing.md → docs/es/contributing.md
@@ -1,9 +1,3 @@
----
-sidebar_position: 5
-title: Contribuir
-description: Cómo contribuir al desarrollo de Codepicker.
----
-
 # Contribuir
 
 ¡Gracias por tu interés en contribuir a Codepicker! Apreciamos cualquier tipo de contribución, ya sea reportando errores, mejorando la documentación o enviando código. El poder del Open Source :)

diff --git a/.../es/docusaurus-plugin-content-docs/faq.md → docs/es/faq.md b/.../es/docusaurus-plugin-content-docs/faq.md → docs/es/faq.md
@@ -1,9 +1,3 @@
----
-sidebar_position: 6
-title: Preguntas frecuentes
-description: Respuestas a las dudas más comunes sobre Codepicker.
----
-
 # Preguntas frecuentes
 
 ## ¿Qué es el formato Codepick?

diff --git a/...-content-docs/guides/advanced-options.mdx → docs/es/guides/advanced-options.md b/...-content-docs/guides/advanced-options.mdx → docs/es/guides/advanced-options.md
@@ -1,8 +1,3 @@
----
-sidebar_position: 7
-slug: /guides/advanced-options
----
-
 # Opciones Avanzadas
 
 Codepicker ofrece una variedad de opciones avanzadas para adaptar su comportamiento a las necesidades específicas de tu proyecto y tu flujo de trabajo.

diff --git a/...aurus-plugin-content-docs/installation.md → docs/es/guides/installation.md b/...aurus-plugin-content-docs/installation.md → docs/es/guides/installation.md
@@ -1,10 +1,4 @@
----
-sidebar_position: 2
-title: Instalación
-description: Cómo instalar Codepicker en tu sistema.
----
-
-# Instalación
+# Más opciones de Instalación
 
 ## Requisitos previos
 
@@ -48,8 +42,8 @@ Luego puedes agregar scripts en tu `package.json`:
 ```json
 {
   "scripts": {
-    "pick-tests": "codepicker pick 'tests/**'",
-    "pick-src": "codepicker pick 'src/**' '!**.svg'"
+    "pick:tests": "codepicker pick 'tests/**'",
+    "pick:src": "codepicker pick 'src/**' '!**.svg'"
   }
 }
 ```
@@ -66,4 +60,4 @@ O si usas `npx`, siempre obtendrás la última versión disponible.
 
 ## Solución de problemas
 
-Para más ayuda, consulta las [preguntas frecuentes](./faq.md).
+Para más ayuda, consulta las [preguntas frecuentes](../faq).