Desarrollo en Plone CMS 6 y Volto con Inteligencia Artificial

Copyright (c) 2026 Leonardo J. Caballero G.

Esta obra está sujeta a la licencia Reconocimiento-CompartirIgual 3.0 Venezuela de Creative Commons. Para ver una copia de esta licencia, visite la siguiente dirección URL: http://creativecommons.org/licenses/by-sa/3.0/ve/

Este material es la charla "Desarrollo en Plone 6/Volto con Inteligencia Artificial", el cual explica: Introducción al desarrollo de Plone CMS 6 y Volto, presentaré los diversos enfoques para usar temas en Plone como punto de partida para un proyecto Plone, hay varios temas disponibles en Github, desde el frontend "Volto", además de explicar, herramientas de Inteligencia Artificial para exportar el diseño desde Figma al código fuente de Volto, mostraré algunas herramientas y instrucciones (promts) útiles para que el LLM te haga ser más productivo en proyectos Plone.

Licencia: Reconocimiento-CompartirIgual 3.0 Venezuela de Creative Commons.
Formato: LibreOffice.org Impress .
Duración: Minimó 20 minutos, Máximo 30 minutos.
Dictada en: World Plone Day 2026.
Última actualización: 16/04/2026.
Lugar: Madrid, España

Autor: Ing. Leonardo J. Caballero G.
Correo electrónico: leonardoc at plone.org, leonardocaballero at gmail.com
Domicilio web: https://github.com/macgua
Visualiza y descarga vía: https://www.slideshare.net/lcaballero / https://speakerdeck.com/macagua
Video en Youtube: https://www.youtube.com/watch?v=dtl-u0mxVTE

Transcript

1. Desarrollo en Plone 6/Volto con Inteligencia Artificial
3. Leonardo J. Caballero G. Plone Developer desde 2008 Embajador de la Fundación Plone para habla hispana Autor de publicaciones sobre Plone Traductor al Español de Plone Miembro de la Fundación Plone
4. Desarrollo en Plone 6 / Volto • Backend en XML/Python. • Base de datos con ZODB. • Integración vía API Rest. • Frontend desacoplado con Volto en Javascript.
5. ¿Qué es Plone CMS?
6. Plone, es el más longevo, flexible, robusto y seguro CMS escrito en Python.
7. ¿Qué es un CMS? De Ingles, Content Managment System – CMS. En Español, Sistema de administración de contenidos. Permite la redacción y publicación de contenidos de forma fácil en la Web.
8. Código abierto Distribuido bajo la Licencia GPL, al igual que Linux.
9. Construido en Zope https://www.zope.dev/
10. Escrito en Python https://www.python.org/
11. Prueba el sabor clásico https://classic.demo.plone.org
12. Volto, el Frontend de Plone
13. • La interfaz basada en React para Plone CMS. • Es la interfaz predeterminada a partir de la versión Plone 6. • Integración con el mundo moderno del desarrollo frontend de React.
14. https://github.com/plone/volto
15. Prueba el sabor Plone https://demo.plone.org
16. Instalar stack de Plone CMS https://6.docs.plone.org/install/create-project-cookieplone.html
17. Design System
18. Design System • Los Design Systems han revolucionado la forma en que abordamos el diseño UX/UI. • Proporcionan un marco para crear productos digitales cohesivos y consistentes. • Mejorando tanto el UX como la eficiencia de los equipos de diseño.
19. Design System para Plone
20. Light theme Design System
21. Light theme Design System • Demo en linea: https://light-theme.kitconcept.io/ • Kit UI en Figma: https://www.figma.com/file/eYUCbivnNrnjXjBDUizSVX/Vo lto-Light-Theme • Storybook: https://plone-components.netlify.app/ • Repositorios Github: • https://github.com/kitconcept/volto-light-theme • https://github.com/kitconcept/kitconcept.voltolighttheme • https://github.com/rohberg/even-lighter-theme-customizations • https://github.com/plonegovbr/volto-brasil-theme
22. https://www.dlr.de/en
23. https://github.com/plone/2024.ploneconf.org
24. https://github.com/plone/plone.de
25. https://github.com/plone/demo.plone.org
26. io-Comune Design System
27. io-Comune Design System • Demo en linea: https://comuni.designers.italia.it/ • Documentación: https://designers.italia.it/modelli/comuni/ • Kit UI en Figma: https://www.figma.com/@designersitalia • Repositorios Github: • https://github.com/RedTurtle/design-comuni-plone-theme • https://github.com/RedTurtle/design.plone.contenttypes • https://github.com/RedTurtle/iocomune-backend
28. European Environment Agency Design System
29. European Environment Agency Design System • Demo en linea: https://www.eea.europa.eu/en • Documentación: https://eea.github.io/volto-eea-design-system/ • Storybook: https://eea.github.io/eea-storybook/ • Repositorios Github: • https://github.com/eea/volto-eea-website-theme • https://github.com/eea/volto-eea-kitkat • https://github.com/eea/eea.kitkat
30. https://github.com/eea/volto-sustainability-theme
31. https://github.com/eea/volto-ims-theme
32. https://github.com/eea/volto-forests-theme
33. https://github.com/eea/volto-energy-theme
34. New South Wales Design System
35. New South Wales Design System • Demo en linea: https://digitalnsw.pretagov.com.au/ • Documentación: https://digitalnsw.github.io/nsw-design-system/ • Kit UI en Figma: https://digitalnsw.github.io/nsw-design-system/docs/content/de sign/figma-ui-kit.html • Repositorios Github: • https://github.com/digitalnsw/nsw-design-system/ • https://github.com/pretagov/nsw-design-system-plone6 • https://github.com/pretagov/nswdesignsystem.plone6
36. LLMs con Habilidades especificas
37. https://skills.sh/?q=Plone
38. https://skills.sh/?q=figma
39. Contexto de documentación
40. https://context7.com/?q=Plone+Volto
41. Desde Figma a codigo fuente
42. Bocetos (Sketch) Prototipo (Prototype) Wireframes Diseño visual (Mock-up) ¿Cual es el flujo de trabajo?
43. Diseñadores vs. Programadores http://www.flickr.com/photos/a_ninjamonkey/3565672226/
44. MCP server • Paso 1: Inicia sesión y configura tu token de API de Figma • Paso 2: Agrega la dirección del servidor MCP a tu archivo de configuración del entorno de desarrollo • Paso 3: Proporciona el enlace a tu archivo, marco o grupo de Figma en tu herramienta de IA • Paso 4: Pide al agente de IA que implemente el diseño o recupere metadatos • Paso 5: El agente de IA utiliza los datos recuperados para generar código o realizar tareas de diseño.
45. • Usando la ventana chat de tu IA usando algunas de sus utilidades puedes indicar: • get_design_context Genera mi componente seleccionado en Figma, y exportarlo en directorio `components/Blocks` creando una carpeta llamada `Weater` • https://github.com/figma/mcp-server-guide/ MCP server
46. MCP server
47. Desarrollo e implementación http://desarmo.blogspot.com/2007/06/as-time-goes-by.html • Investigación y pruebas de productos (Add-ons). • Probar calidad de productos y su integración al desarrollo. • Diseño de portadas y diagramación de contenidos. • Usabilidad y funcionalidad.
48. Conclusiones • Usa ‘Volto Light Theme’ como design system para tus proyectos UX en Figma. • Configura en tu proyecto los SKILLs necesarios para Plone, Volto, Figma, etc. • Configura tu Figma MCP Server para exportar tu diseño a código fuente Volto. • Usa las utilidades de cada MCP Server • Contextualiza tu prompt con documentación, código fuente ejemplos del core de Volto, ‘Volto Light Theme’, otros ‘Design Theme’. • Aprende Javascript, React y Volto en el proceso.
50. Lecturas recomendadas • Rediseño de Portal Web para la Comunidad Scrum Latam https://www.behance.net/gallery/181011581/Rediseno-de-Portal-Web-para-la-Comunidad-Scrum-Latam • Manual de Usuario de Volto • https://6.docs.plone.org/volto/user-manual/index.html • Frontend • https://6.docs.plone.org/volto/index.html • Theming del Frontend • https://6.docs.plone.org/volto/theming/index.html • Desarrollo del Frontend • https://6.docs.plone.org/volto/development/index.html
51. Lecturas recomendadas • Volto Hands-On - Plone Training documentation https://training.plone.org/voltohandson/index.html • Volto Add-ons Development - Plone Training https://training.plone.org/voltoaddons/index.html • Frontend — Plone Documentation v6.0 https://training.plone.org/voltoaddons/index.html • Awesome Volto Themes https://github.com/collective/awesome-volto#themes
52. ¿Preguntas? leonardoc@plone.org @macagua / @ploneve https://www.flickr.com/photos/sparetomato/2641110677/
53. Copyright (c) 2026 Copyright (c) 2026 Leonardo J. Caballero G Leonardo J. Caballero G. Esta obra está sujeta a la licencia Esta obra está sujeta a la licencia Reconocimiento- Reconocimiento- CompartirIgual 3.0 Venezuela de Creative Commons CompartirIgual 3.0 Venezuela de Creative Commons. . Para ver una copia de esta licencia, visite la siguiente Para ver una copia de esta licencia, visite la siguiente dirección URL: dirección URL: • http://creativecommons.org/licenses/by-sa/3.0/ve/ http://creativecommons.org/licenses/by-sa/3.0/ve/ Bajo los siguientes términos: Bajo los siguientes términos: • Reconocimiento - Usted debe dar el crédito apropiado, Reconocimiento - Usted debe dar el crédito apropiado, proporcionar un enlace a la licencia, y de indicar si se han proporcionar un enlace a la licencia, y de indicar si se han realizado cambios. Usted puede hacerlo de cualquier realizado cambios. Usted puede hacerlo de cualquier manera razonable, pero no en una manera que sugiere el manera razonable, pero no en una manera que sugiere el licenciante a usted o que apruebe su utilización. licenciante a usted o que apruebe su utilización. • CompartirIgual - Si usted mezcla, transforma o crea nuevo CompartirIgual - Si usted mezcla, transforma o crea nuevo material a partir de esta obra, usted podrá distribuir su material a partir de esta obra, usted podrá distribuir su contribución siempre que utilice la misma licencia que la contribución siempre que utilice la misma licencia que la obra original. obra original. Licenciamiento