Claude tiene una nueva función llamada Design.
Claude Design es una vista previa de investigación lanzada por Anthropic el 17 de abril, parte de la línea de productos Anthropic Labs, que se ejecuta en su modelo de visión más potente actual, Opus 4.7. Está diseñado para crear borradores visuales con Claude: prototipos web, presentaciones PPT, pitch decks, landing pages, one-pagers y más están dentro de su alcance. Puede leer tu repositorio de código y archivos de diseño existentes, aplicar tu sistema de diseño a la salida, para que el estilo coincida con tus proyectos existentes.
La mejor parte es el resultado final: además de exportar PDF/PPTX/HTML o enviar a Canva, también puede empaquetar todo en un handoff bundle y pasarlo a Claude Code local para continuar modificando el código del proyecto.
Tan pronto como salió, afectó las acciones de Figma, cerrando con una caída del 6.89%.
Una breve introducción a Figma: una empresa que crea herramientas de diseño colaborativo en línea, compitiendo con Adobe y Canva. Decenas de millones de diseñadores en todo el mundo lo usan para crear diseños. En realidad, ya existía un MCP que permitía usar IA para controlar Figma, pero como mi sentido estético es demasiado básico y mi mente está en blanco sin ideas, nunca usé ese producto.
Por qué realmente lo necesitaba
¿Recuerdas el plugin de Obsidian que hice para enviar contenido a WeChat Official Accounts?
Hasta ahora, en todos los canales, he vendido un total de 0 copias. Qué encantador (TAT).
Por supuesto, es posible—y no estoy presumiendo—que esto tenga que ver con mi gusto básico por el diseño.
Echa un vistazo a cómo se veía la interfaz de mi plugin original:
Dos filas de barras de herramientas, 9 botones apretados en una fila. Formato, cuenta, nombre de cuenta preestablecido, configuración de cuenta, activación de compra, guía de usuario, actualizar renderizado, copiar HTML, pegar en WeChat Official Account, publicar borrador… todo apilado en el lugar más destacado.
Todas las funciones están ahí, pero es agotador solo mirarlo.
Debajo de eso, hay un mensaje super largo: ‘Haz clic en el botón de abajo para seleccionar una imagen de tu computadora; déjalo en blanco para usar una portada de marcador de posición; si se ha establecido una portada predeterminada, usa la portada predeterminada.’ Un amigo lo vio y dijo: ‘¿Para quién es esto? ¿Una descripción de campo de base de datos?’
Así que cuando vi que salía Claude Design, lo probé de inmediato. Veamos cómo funcionó realmente.
Cómo usarlo
Primero, abre la versión web de Claude, haz clic en Design a la izquierda para entrar. En la parte superior, hay un cuadro de entrada llamado ‘New prototype’, solo completa el nombre del proyecto.
Puedes elegir Wireframe (baja fidelidad) o High fidelity (alta fidelidad con activos de marca). Elegí baja fidelidad porque al principio solo se trata de conceptos aproximados, no hay necesidad de alta fidelidad. En realidad, después de terminar, se actualizará automáticamente por ti.
A continuación, indícale la ruta de la carpeta del programa y envíale una captura de pantalla de la página que deseas modificar.
Primero te hará algunas preguntas: qué cambiar, qué mantener, cuál es la acción principal, cuál es la acción secundaria. Confesé honestamente: lo que más quería destacar era ‘Publish Draft’ y ‘Switch Account’, el resto se puede colapsar.
Después de preguntar, comenzó a funcionar por sí solo.
Presentó 4 opciones
Poco después, me entregó una página de comparación wireframes.html.
Lo primero fue una comparación: enumeró los ‘pecados’ de mi interfaz actual uno por uno en texto rojo:
- ‘Dos filas de barras apretando la vista previa’
- ‘9 botones’
- ‘Mezcla de chino/inglés + descripciones de símbolos confusas’
Esta función realmente me sorprendió. Pensé que solo me ayudaría a modificar cosas, pero en realidad vio el contenido y señaló los problemas. Se sintió como un diseñador real comunicándose cara a cara, no una IA fría.
Luego vinieron las 4 opciones:
- Opción A: Fila única minimalista, botón principal ‘Publish Draft’ + cápsula de cuenta, resto iconos + menú
⋯ - Opción B: Migas de pan en tarjeta + cajón, mantener entrada para editar metainformación
- Opción C: Barra lateral (como VSCode), barra superior solo título
- Opción D: Tarjeta de publicación flotante en la parte inferior derecha, acción principal más prominente
La más interesante fue la Opción D. Dibujó una nota adhesiva con ‘Common Design Rules’ y ‘Recommended Order’:
A → Mayor ahorro de espacio, bajo costo de aprendizaje D → Visualmente más bonita, acción principal más satisfactoria C → Amigable para usuarios avanzados (biblioteca de iconos) B → Segura, conserva la edición de metainformación
Esto no es solo ‘aquí hay algunas opciones’, es ‘aquí hay algunas opciones + decirte para quién es cada una’. He estado haciendo plugins durante mucho tiempo, y nadie me ha dicho seriamente ‘dónde debería ir este botón’.
Puedes seguir iterando
Después de elegir una dirección, puedes seguir comunicándote. A la izquierda hay un cuadro de chat, a la derecha haz clic en Edit para seleccionar elementos directamente y modificar (pero los ajustes allí eran demasiado profesionales, no los entendí, así que lo omití). Haz clic en Draw para dibujar círculos y flechas en la vista previa y decirle ‘Quiero mover esto aquí’:
Creo que la función Draw es increíble. Dibujé una flecha muy tosca desde un botón hasta la parte inferior derecha, y realmente lo entendió, probablemente relacionado con la gran actualización en el reconocimiento visual de Opus 4.7 (como se mencionó anteriormente, aumentó la precisión del reconocimiento de imágenes a 3.75 megapíxeles).
De la barra de herramientas al diseño
Después de modificar la barra de menú, le pedí que creara varios estilos de diseño de artículos—después de todo, el trabajo principal de mi plugin es formatear Markdown en algo publicable en WeChat Official Accounts.
Abrió una nueva página con el título ‘Format Markdown into a WeChat article worth reading’. En la parte superior derecha, hay un botón Tweaks que, al hacer clic, te permite ajustar el tamaño de fuente, peso, color, interlineado, etc., como en Figma:
Ten en cuenta que esta es una página realmente cliqueable y conmutable, no una falsa. Esta interacción es mucho mejor que hacerlo en Claude Code en la terminal. Con Claude Code, tienes que esperar a que termine para ver el efecto, luego pedirle que modifique. Aquí, obtienes una vista previa en tiempo real.
Después de finalizar, haz clic en Export en la parte superior derecha. Ofrece varias opciones: descargar PPT, exportar PDF, exportar HTML independiente, o—la última—‘Handoff to Claude Code’, que envía todo el archivo de diseño a Claude Code local para continuar codificando.
Esta es la mejor parte de toda la cadena.
Después de diseñar en la web, genera un comando para ti. Cópialo y pégalo en la terminal, y Claude Code local toma el control:
> Fetch this design file, read its readme,
and implement the relevant aspects of the design.
Implement: option-b-hifi.html
Luego comienza a leer el paquete de diseño, mirando el código actual, entendiendo qué archivos modificar, y finalmente cambia directamente todo el código fuente de mi plugin. La página de diseño proporcionó option-b-hifi.html (terminé eligiendo la versión de alta fidelidad de la Opción B), y Claude Code lee colores, tamaños de fuente, espaciado del archivo de diseño y los aplica a mi código React.
No escribí ni una sola línea de código en todo el proceso.
El resultado final
De todos modos, creo que se ve mucho mejor que mi original. Aunque un diseñador real podría haberlo hecho aún mejor, para un plugin personal es más que suficiente (en comparación con mi diseño original).
Título + metainformación colapsados en una fila, la cuenta se convierte en una cápsula (con un punto verde activo), la acción principal es solo un botón púrpura ‘Publish Draft’ a la derecha, todo lo demás está escondido en el menú ⋯.
Resulta que mi montón de ‘funciones’ no carecía de sentido del diseño, sino que nadie me ayudó a hacer concesiones.
Agregar un botón es fácil, pero eliminar uno de la interfaz es contraintuitivo para un desarrollador—siempre piensas ‘¿y si alguien lo necesita?’. Pero un diseñador tomará esa decisión por ti: ‘Pon esto en un menú secundario, los usuarios no volverán a hacer clic después de la primera vez.’
Esta vez, Claude Design tomó esa decisión por mí.
El costo
Consume muchos recursos
En los planes de suscripción de Claude, Design tiene su propia cuota (tengo que decir que las cuotas separadas de Claude realmente se están acumulando).
Hacer este conjunto—4 comparaciones de opciones + 5 temas de artículos + implementación de alta fidelidad—consumió el 36% de mi cuota diaria. Tengo una cuenta 5x Max; para una cuenta Pro, eso agotaría toda la cuota del día.
Un amigo mío tiene una cuenta Pro. Anoche, usó Design para hacer un PPT de 30 páginas y su cuota diaria se agotó por completo.
Fallos ocasionales
A veces, en medio del trabajo, puedes encontrarte con una situación: envías un mensaje y responde con <empty>. Envías de nuevo, sigue <empty>:
La solución es actualizar la página y decirle ‘por favor continúa’, y generalmente retoma. Pero pierdes un poco de contexto. Si estás en medio de iteraciones de diseño críticas, recuerda tomar capturas de pantalla como respaldo de vez en cuando, para no tener que empezar de nuevo si falla en el último paso.
Reflexiones finales
Mi plugin de Obsidian con su diseño básico finalmente parece un producto adecuado.
Pero para ser honesto, cuando me senté frente a mi computadora y hice clic en ‘Publish Draft’, no estaba completamente emocionado. Tengo muy claro una cosa: si alguien como yo sin formación en diseño puede hacer una interfaz decente en dos horas, entonces aquellos que se ganan la vida con lo ‘decente’ van a pasar un par de años difíciles.
Solía preocuparme de que la IA hiciera que los escritores perdieran un interlocutor con gusto literario. Esta vez es al revés—los diseñadores están a punto de perder la parte más gruesa del mercado: el rango de principiante a intermedio.
Cada vez que la IA da un paso adelante, algunas personas aplauden y otras se van en silencio. Esta vez soy yo quien aplaude, pero puedo escuchar ese suspiro detrás de mí.
Recientemente he gastado mucho tiempo y dinero en IA, preocupado de que un día pueda reemplazarme, pero hasta ahora no he encontrado una salida. Ayuda con mi trabajo diario, pero ningún cambio fundamental. Lo más importante, no he ganado dinero con ello.
Si también tienes un pequeño producto, plugin o sitio web acumulando polvo como el mío—prueba Claude Design.
Puede que no consiga tu primera venta, pero al menos hará que se vea más presentable. Y eso, en sí mismo, es una gran mejora.