UStackUStack
Make Real icon

Make Real

Make Real es un proyecto de GitHub (archivado) con el tldraw SDK: convierte una UI dibujada en una experiencia funcional. Incluye starter para clonar.

Make Real

¿Qué es Make Real?

Make Real (repositorio: tldraw/make-real) es un proyecto de código abierto asociado al tldraw SDK. Su propósito principal es permitirte “dibujar una UI y hacerla real”, proporcionando un starter y código de soporte para convertir la UI que diseñas en algo funcional en una aplicación.

El repositorio está archivado por su propietario desde el 20 de febrero de 2026, por lo que es de solo lectura. La página también dirige a los lectores a una demo en vivo y a recursos para construir una versión del proyecto y aprender más mediante un post de blog.

Características clave

  • Construido con el tldraw SDK, que proporciona la base para un flujo de trabajo de UI basado en dibujo.
  • Enfoque de repositorio starter: clona el repo para construir tu propia versión de Make Real.
  • Incluye una experiencia de demo (makereal.tldraw.com) referenciada en el readme del repositorio.
  • Estructurado como un codebase TypeScript/Next.js (presencia de next.config.js, archivos TypeScript/TS y package.json).
  • El repositorio incluye archivos de soporte para calidad de código y estilos (por ejemplo, archivos de configuración de ESLint/Prettier y Tailwind).

Cómo usar Make Real

  1. Usa la demo en vivo en makereal.tldraw.com para entender el flujo “dibuja una UI y hazla real”.
  2. Clona el repositorio starter de GitHub (tldraw/make-real) para construir tu propia versión.
  3. Sigue el README del proyecto y los recursos vinculados (incluyendo el post de blog referenciado) para entender cómo funciona la demo y cómo adaptarla.
  4. Comparte lo que construyas a través de la comunidad Discord vinculada en la página del repositorio.

Casos de uso

  • Prototipado de un flujo de interacción de UI: Diseña una UI visualmente y conéctala al comportamiento de la app usando el enfoque del proyecto basado en el tldraw SDK.
  • Construcción de una aplicación “lienzo de UI” personalizada: Usa el repositorio como punto de partida para implementar tu propio flujo de dibujo y renderizado.
  • Exploración de cómo una interfaz dibujada puede impulsar lógica: Aprende de la estructura del código para entender cómo los elementos de UI representados en el entorno de dibujo se traducen en comportamiento funcional de la aplicación.
  • Enseñanza o documentación de interacciones de producto: Usa la demo y el proyecto subyacente para ilustrar cómo una UI diseñada puede convertirse en una experiencia ejecutable.
  • Experimentación con pipelines de UI a app en TypeScript/Next.js: Aprovecha la configuración existente de Next.js + TypeScript como plantilla para prototipos relacionados.

Preguntas frecuentes

  • ¿Está este repositorio mantenido activamente? No. El repositorio fue archivado por su propietario el 20 de febrero de 2026 y ahora es de solo lectura.

  • ¿Dónde puedo probar el proyecto en línea? La página del repositorio apunta a una demo en makereal.tldraw.com.

  • ¿Qué debo clonar si quiero construir mi propia versión? La página indica que puedes clonar el repo starter proporcionado para construir tu propia versión de Make Real.

  • ¿Con qué tecnología está construido? El contenido del repositorio indica que está construido con el tldraw SDK y usa un codebase en TypeScript con configuración de Next.js.

Alternativas

  • Construye tu propia configuración de prototipado de UI con tldraw: En lugar de usar directamente este repo archivado, puedes partir de los conceptos del tldraw SDK e implementar tu propio mapeo de elementos dibujados a comportamiento de aplicación.
  • Usa un enfoque general de prototipado a código: Si tu objetivo es “convertir un diseño de UI en pantallas funcionales”, puedes usar otros flujos de prototipado que se centren en generar o conectar comportamiento de UI, manejando tú mismo la traducción de diseño a lógica.
  • Crea un sistema de UI impulsado por editor: Si quieres un flujo de trabajo similar de “dibuja para impulsar”, considera alternativas que traten la UI como estado editable (por ejemplo, constructores de UI impulsados por estado) en lugar de seguir la estructura específica de este proyecto.
  • Busca constructores de UI mantenidos activamente basados en diagramación/edición de lienzo: Dado que este repo está archivado, herramientas más nuevas en la categoría de “editor de lienzo que impulsa comportamiento de app” pueden ajustarse mejor a proyectos a largo plazo, según tus necesidades exactas.
Make Real | UStack