# Shape Shape es un IDE de escritorio que reúne edición de código, flujos de trabajo locales, inspección visual del diseño, herramientas de Git y chat con IA para diseñadores y programadores. - Findings24: - Sitio web: - Precios: Freemium - Categorías: Herramientas IA Dev ## ¿Qué es Shape? Shape es un IDE de escritorio para trabajar en proyectos web con código, diseño visual, desarrollo local, Git y asistencia de IA en un único entorno de trabajo. Puedes abrir una carpeta existente o clonar un repositorio, inspeccionar los archivos del proyecto, instalar dependencias, ejecutar scripts de paquetes y previsualizar una aplicación local en una pestaña Browser integrada. Su propósito principal es permitir que diseñadores y programadores pasen de los archivos fuente a una página local en ejecución, los diagnósticos del proyecto, los cambios del control de versiones y la edición asistida por IA sin cambiar de entorno de desarrollo. El flujo de trabajo documentado prioriza el uso local: los proyectos se ejecutan mediante el gestor de paquetes y el servidor de desarrollo del usuario, mientras Shape proporciona las superficies de edición, previsualización, inspección del diseño y chat. ## ¿Qué puede hacer Shape? ### Acceso a proyectos y repositorios Abre una carpeta que contenga un proyecto web existente o clona un repositorio desde una URL de Git. Las herramientas Explorer, apertura rápida y búsqueda del proyecto permiten navegar por el código. ### Terminal integrada y ejecución de scripts Instala dependencias con npm, pnpm, yarn o bun y ejecuta scripts del proyecto desde la terminal o el menú Scripts de la barra de título. Un servidor de desarrollo local puede exponer la aplicación para su previsualización. ### Previsualización en Browser con modo de diseño Abre una URL local en la pestaña Browser integrada y usa el modo de diseño para inspeccionar la página activa. Puedes usar la paleta y los controles de diseño para aplicar cambios de disposición o color al código fuente. ### Chat con IA con modos Ask y Code El modo Ask ofrece respuestas de solo lectura sobre el proyecto abierto. En el modo Code, el agente puede buscar, editar y ejecutar comprobaciones; puedes adjuntar archivos, carpetas, el código base o una selección, y revisar las ediciones con Keep o Undo. ### Edición de código y diagnósticos Edita y guarda archivos del proyecto con comandos conocidos de navegación y búsqueda, y consulta los informes de TypeScript o ESLint en el panel Problems. La guía de inicio rápido también documenta el formato al guardar y la configuración del editor. ### Herramientas para el flujo de trabajo de Git Prepara fragmentos individuales de un diff desde una pestaña de diferencias y usa Git Manager para solicitudes de incorporación de cambios y comprobaciones, manteniendo las tareas habituales del repositorio junto con la edición y la previsualización. ## Casos de uso ### Modificar un proyecto web existente Abre una carpeta o un repositorio clonado, instala sus dependencias, inicia el script de desarrollo y realiza un pequeño cambio en el código fuente mientras ves el resultado en la pestaña Browser. ### Inspeccionar un código base con IA antes de editar Usa el modo Ask para preguntar qué hace un archivo de entrada u otra parte del proyecto y recibir una respuesta sin aplicar cambios. Esto resulta útil para comprender código desconocido antes de modificarlo. ### Ajustar visualmente una página mientras trabajas en el código fuente Ejecuta el proyecto localmente, abre su URL local en Browser y usa el modo de diseño para inspeccionar la página renderizada y aplicar cambios de disposición o color compatibles al código fuente subyacente. ### Revisar cambios de código generados por IA Usa el modo Code para buscar en el proyecto, realizar ediciones y ejecutar comprobaciones en una misma conversación; después, revisa los cambios propuestos con Keep o Undo antes de conservarlos. ### Preparar y revisar cambios del repositorio Usa el editor y los diagnósticos durante el desarrollo; después, prepara fragmentos seleccionados del diff y accede a Git Manager para gestionar solicitudes de incorporación de cambios y comprobaciones. ## Preguntas frecuentes ### ¿Qué tipo de aplicación es Shape? Shape es un IDE de escritorio para diseñadores y programadores. Combina edición de código, desarrollo local, inspección visual del diseño, herramientas de Git y chat con IA. ### ¿Cómo inicio un proyecto en Shape? Desde la pantalla de bienvenida, elige Open Project o File → Open Folder y selecciona una carpeta que contenga el proyecto. También puedes elegir Clone Repository, pegar una URL de Git y seleccionar una carpeta principal. ### ¿Puede Shape ejecutar un proyecto web local? Sí. Abre la terminal, instala las dependencias con el gestor de paquetes que requiera el proyecto y ejecuta un script como npm run dev. Introduce la URL local resultante en la pestaña Browser de Shape. ### ¿Puede la IA hacer cambios en mis archivos? Sí. En el modo Code, el agente puede buscar, editar y ejecutar comprobaciones en el mismo hilo. Puedes revisar las ediciones propuestas con Keep o Undo. El modo Ask es de solo lectura y no aplica ediciones. ### ¿Qué planes ofrece Shape? La página de precios muestra los planes Free, Plus, Pro y Max. Free incluye el modelo Auto, una reserva mensual de tokens Auto y un editor de escritorio que prioriza el uso local; los planes de pago indican créditos mensuales, acceso a todos los modelos y beneficios adicionales específicos de cada plan. ## Datos rápidos - **Categoría**: Herramienta para desarrolladores; herramienta de diseño; chat con IA - **Plataforma**: IDE de escritorio - **Usuarios principales**: Diseñadores y programadores - **Flujo de trabajo principal**: Abrir o clonar un proyecto, ejecutarlo localmente, editar el código fuente, previsualizarlo y usar el chat con IA - **Planes**: Free, Plus, Pro y Max - **Dominio de origen**: useshape.org