Farming Veggies at Home: una tienda WooCommerce diseñada en Figma y construida como block theme

Aviso: esta tienda la he construido yo, y también construyo y opero el plugin que existe para enseñar — Trill AI Chat, publicado por Greensolutions Pioneers Limited. La marca era de un negocio de semillas que tuve. Aquí no hay cliente, así que le he exigido lo mismo que a un trabajo de cliente, incluido lo que no funcionó a la primera.

En resumen

• Situación: necesitaba una tienda WooCommerce pública lo bastante realista para probar en ella un asistente de IA, y lo bastante bien diseñada para servir de prueba de mi propio trabajo de front-end.
• Enfoque: primero un sistema de diseño y pantallas de escritorio y móvil en Figma; después un block theme propio cuyo theme.json se genera desde los tokens de Figma, sobre WordPress 7.1 y WooCommerce 11.1.
• Qué está en vivo: 21 productos, ocho guías de cultivo, un calendario de siembra en cada variedad, un carrito operativo, un checkout en modo test y un cliente demo de un clic con pedidos de muestra, en demo.trillai.io.
• Resultado: una primera pasada de rendimiento llevó la puntuación de rendimiento de Lighthouse de la portada de 92 a 99 en escritorio y de 67 a 77 en móvil — con el móvil aún por debajo de 90.
• Aplicable a: cualquier build de WooCommerce en el que el catálogo tenga que responder preguntas — de un cliente o de un asistente — y no solo listar productos.

La situación

Farming Veggies at Home vendía semillas de hortalizas: una caja de treinta variedades con macetas, marcadores y guantes, con packaging y fotografía de marca propia. El negocio ya no opera, pero el nombre, el logo, el packaging y la fotografía son míos, y también lo que aprendí vendiéndolo.

Por otro lado, construyo Trill AI Chat, un asistente para WooCommerce. Una demo de chatbot que responde preguntas sobre el propio chatbot demuestra muy poco. Para enseñarlo bien necesitaba una tienda con catálogo real, páginas de políticas reales y pedidos que consultar. Y como la misma página es también prueba de mi trabajo, la tienda tenía que estar diseñada, no montada.

Así que el encargo tenía dos trabajos. El asistente necesitaba algo de lo que valiera la pena responder. Y quien entre sin tocar el chat tenía que encontrarse igualmente con una pieza de diseño e ingeniería WooCommerce pensada.

Por qué no servía el enfoque obvio

Lo obvio era resucitar la tienda antigua: tenía la marca y una instalación de WooCommerce funcionando. La audité antes de decidir. Iba sobre Flatsome, un tema comercial, con un child theme cuya hoja de estilos pesaba 303 bytes — vacía a efectos prácticos. La maquetación era de Flatsome, no mía; la mayoría de las páginas publicadas eran el contenido de demostración del propio tema; y el catálogo era un único producto sin variaciones. Reutilizarla habría puesto el lenguaje visual de otro diseñador en la pieza que existe para enseñar el mío. Me quedé con la marca y descarté el build.

Lo segundo obvio era usar datos de ejemplo genéricos: importar unas decenas de productos y soltar al asistente. Eso falla primero al asistente. Un modelo solo merece la pena en una tienda cuando la pregunta exige criterio — ¿qué puedo sembrar en octubre? — y una lista plana de productos con precio y foto no le da nada con lo que razonar. Los datos tenían que llevar las decisiones que de verdad toma quien cultiva.

Lo tercero era el carrito y el checkout de bloques que trae WooCommerce por defecto. Funcionan, pero el carrito que diseñé hace cosas que ellos no exponen — una oferta que hace la cuenta de cambiar tus artículos por la caja, un aviso para llegar al envío gratis — así que esas dos pantallas son plantillas clásicas sobrescritas en el tema, donde controlo el marcado.

Qué hice

¿Por qué el escenario fue antes que el fichero de diseño?

Antes de abrir Figma dejé por escrito qué tenía que hacer posible la tienda, trabajando hacia atrás desde lo que el asistente sabe hacer en código: buscar en el catálogo, responder desde las páginas del sitio, leer el carrito en vivo, consultar un pedido por una ruta autenticada y captar un lead con consentimiento. La regla era sencilla: si un visitante no puede ver una de esas cosas en menos de un minuto, no existe. El catálogo, el contenido, la navegación y el botón de cliente demo salen todos de esa lista.

Un sistema de marca reconstruido desde un logo

De la marca antigua solo sobrevivieron tres cosas, y las medí en vez de suponerlas: el marino y el verde, muestreados del fichero del logo, y Lato, leída de los ajustes del tema viejo.

El verde de marca no pasa como relleno de botón con texto blanco, pero con la etiqueta en marino llega a 5,56:1 — así que el color de marca sigue siendo la acción principal, y el hover aclara en vez de oscurecer, lo que sube el contraste en lugar de bajarlo. Y como el verde es la marca, los colores de estado no lo usan: “en stock” y “pedido completado” van en marino, el stock bajo en un óxido cálido, siempre con palabras, nunca solo con color.

En Figma eso se convirtió en rampas primitivas, una capa de tokens semánticos, estilos de texto, foundations documentadas y pantallas de escritorio y móvil para la portada, la tienda, la ficha de producto, el carrito, el checkout, la cuenta, las guías y la página About.

¿Cómo llega el diseño al tema sin desviarse?

El theme.json del tema se genera desde los tokens de Figma con un script, no se escribe a mano: un color nuevo nace como token en Figma. Encima del build con WordPress Scripts y Sass, unos lints propios vigilan literales de color, valores fuera de la escala de presets y el orden de la cascada, así que un valor escrito a mano rompe el build en vez de esperar a una revisión. Cuando el fichero y el código no coincidían, mandaba el fichero — y cuando el propio fichero tenía un valor fuera de su escala, lo corregí también en Figma en vez de arrastrar la excepción al CSS.

Donde los bloques del núcleo no llegaban, añadí bloques y template parts pequeños en lugar de marcado de page builder: el calendario de siembra, la ventana de siembra en cada tarjeta de producto, los tamaños de sobre como tarjetas seleccionables y “Sown at the same time”, que relaciona variedades por los meses de siembra que comparten.

Un catálogo ordenado por cuándo se siembra

Aquí es donde el negocio antiguo se pagó solo. La gente no compra semilla cuando la siembra; la compra en otoño para la primavera. Así que la tienda se ordena por ventana de siembra: cuatro bolsas de temporada, cada una un subconjunto de la caja para una ventana; un listado que por defecto ordena por temporada de siembra; y filtros por temporada, tipo, familia y situación — bancal, maceta, interior, semisombra. La caja se queda en £12,99 porque ese fue el precio que aguantó frente a Amazon cuando era un producto real, y el resto de la escala de precios se ancla a él.

Cada variedad lleva sus meses de siembra y cosecha, profundidad, marco de plantación, tiempo de germinación, orientación y si sirve para maceta. Ocho guías de cultivo llevan el razonamiento, y cada una enlaza las variedades de las que habla. Esa estructura es lo que recorre quien compra y lo que lee el asistente.

Hacer que una demo se entienda en menos de un minuto

• Una barra fija dice que es una demo, que no se envía nada y que no se cobra. La marca fue un negocio real, así que eso no puede ir en el pie.
• Quien entra por primera vez encuentra tres artículos ya en el carrito, para que haya un carrito sobre el que preguntar.
• Un clic inicia sesión como cliente demo compartido con tres pedidos de muestra, para que ¿dónde está mi pedido? tenga una respuesta real.
• El checkout usa un pago de prueba y la tienda no envía correos; la confirmación queda en el área de cuenta.
• Tres preguntas sugeridas en la portada ponen a prueba cada una una capacidad distinta: consejo, políticas y consulta de pedido.

Lo que no funcionó a la primera

La primera importación de productos rompió los productos variables sin ningún error visible. El importador CSV de WooCommerce separa los valores de atributo con comas; mi fichero usaba una barra vertical, así que “Packet | Value packet” se convirtió en un único tamaño de sobre, el selector salía vacío y no se podía añadir nada al carrito. El log señalaba la tabla de búsqueda de WooCommerce; la causa estaba en los datos. Reparé los términos en su sitio con un script que primero se ejecuta en simulación, y corregí los ficheros de origen para que una reimportación no pueda traer el problema de vuelta.

El resultado

La tienda está en vivo en demo.trillai.io, con el plugin publicado de Trill AI Chat trabajando sobre su propio catálogo y sus páginas. Está fuera de los índices de búsqueda a propósito: es una demo, y los productos de una marca que ya no vende no deberían competir en buscadores como si estuvieran a la venta.

Una primera pasada de rendimiento llevó la puntuación de rendimiento de Lighthouse de la portada de 92 a 99 en escritorio y de 67 a 77 en móvil, ambas medidas con Chrome DevTools el 16 de septiembre de 2026. El escritorio está donde lo quiero. El móvil está más cerca, pero no ha llegado: 77 sigue por debajo del 90 que tomo como suelo, así que el trabajo en móvil sigue y esta cifra se actualizará cuando se mueva.

Lo que este caso de estudio no afirma: cifras de ventas, de conversión ni de uso del asistente. No hay tráfico real que medir, y no voy a publicar números de una tienda que no vende.

Qué aprendí

Escribe lo que la tienda tiene que responder antes de dibujarla. Las decisiones que aguantaron — ordenar por ventana de siembra, un calendario en cada producto, guías ligadas a variedades — salieron del escenario, no de un moodboard, y sirven igual de bien a quien recorre la tienda que a un asistente que la lee. En un proyecto de cliente las preguntas salen de los clientes y de los tickets de soporte, no del código de un plugin, pero el orden es el mismo: primero las preguntas, después la estructura del catálogo, después las pantallas.

Lo que puedes comprobar en un par de minutos

• Abre demo.trillai.io y hazle al asistente una de las preguntas sugeridas.
• Abre cualquier variedad — el calendario, los datos de cultivo y las variedades relacionadas salen de los datos del producto, no del copy.
• Ve al carrito, lee la cuenta de la oferta de cambio y haz el checkout de prueba.
• Entra como cliente demo y pregunta dónde está un pedido.
• Lee el caso de estudio de TrillAI Chat para ver cómo está construido el propio asistente.