1. Describe la tarea
Claude puede construir herramientas interactivas personalizadas adaptadas a tus metas individuales. Describe la experiencia e interfaz que quieres y Claude diseña una aplicación personalizada con las características y la sensación que tienes en mente.
Dile a Claude qué quieres rastrear, organizar o construir, y cómo quieres que se vea y se sienta.
Quiero crear un "creador de lista de deseos" interactivo que se sienta como navegar por una hermosa boutique de alta gama, pero para experiencias de vida en lugar de productos.
El concepto: Transformar "debería hacer una lista de metas futuras" en algo más alegre. En lugar de solo una lista normal, quiero una experiencia.
Diseño: Esto necesita verse como una aplicación de iOS de clase mundial. Diseño gráfico limpio e intencional. Cada detalle (tipografía, espaciado, jerarquía) debe sentirse curado y bien pensado. El resultado final debe ser impresionante.
Incluir: Experiencias por categoría; guardar ciertas experiencias en "Mi Lista"; alternar entre navegar y ver los elementos guardados, interacciones satisfactorias al seleccionar elementos.
Llénalo con hermosas experiencias de vida para explorar. Luego, ¡agrega algunas sorpresas divertidas adicionales!
2. Dale contexto a Claude
Claude puede construir aplicaciones interactivas directamente en la conversación. Para diseños más sofisticados, darle a Claude dirección sobre la estética que quieres produce resultados dramáticamente mejores.
Contexto requerido
No se necesitan cargas ni herramientas externas.
3. Lo que Claude crea
Claude construye una aplicación completamente interactiva que coincide con tus especificaciones, navegable, clicable y con el estilo de tus estándares de diseño.
He creado tu creador de lista de deseos con esa sensación de boutique de alta gama. Esto es lo que construí:
Enfoque de diseño: Estética limpia al estilo iOS con sensibilidad tipográfica SF Pro, espacio en blanco generoso y sutiles cambios de elevación al pasar el cursor. La paleta de colores se mantiene neutral (#1C1C1E, #8E8E93, #F2F2F7) para que las descripciones de las experiencias se conviertan en el color, a través de la imaginación.
Características:
- Filtrado por categoría entre Asombro, Aventura, Artesanía y Logro
- Alternar entre las vistas Explorar y Mi Lista, cada tarjeta de experiencia muestra el plazo y el costo relativo, y estados de hover suaves e interacciones de guardado satisfactorias
- Varias experiencias curadas, desde las Auroras Boreales hasta las ceremonias japonesas del té
Haz clic en cualquier tarjeta para agregarla a tu lista. El conteo guardado se actualiza automáticamente. Prueba filtrando por categoría, luego cambia a Mi Lista para ver tu colección curada.
¿Quieres que ajuste el estilo, agregue más experiencias o cambie cómo funcionan las categorías?
4. Indicaciones de seguimiento
Continúa la conversación con Claude para refinar, expandir o explorar más.
Convierte los sueños en planes
Haz que la aplicación sea una plataforma de lanzamiento, no solo una lista. Agrega un botón que genere una indicación lista para usar en una futura conversación con Claude, prellenada con contexto sobre la experiencia que quieres perseguir.
Agrega un botón de 'Hacer esto realidad' en cada tarjeta guardada. Cuando hago clic en él, muéstrame una indicación que pueda copiar en un nuevo chat de Claude. La indicación debe incluir el nombre de la experiencia y mi descripción, y luego pedirle a Claude que me ayude a investigar para lograrlo.
Recibe sugerencias sobre qué sigue
Incorpora la inteligencia de Claude directamente en tu aplicación. Los artifacts pueden llamar a Claude para analizar tus elecciones y generar recomendaciones nuevas sobre la marcha. Esto no es lógica estática: es Claude pensando dentro de tu herramienta.
Agrega un botón de 'Sorpréndeme con algo nuevo'. Cuando lo toco, haz que la aplicación envíe mis experiencias guardadas a Claude y le pida que sugiera una que no haya considerado, algo que encaje con los patrones de lo que he elegido, y muestra el razonamiento de Claude.
Agrega animación y personalización
El movimiento y los pequeños toques personales marcan la diferencia entre un prototipo y algo que quieres usar. Pide animaciones de introducción, efectos de hover o una pantalla de configuración que adapte la experiencia a ti.
Agrega una configuración inicial que pregunte mi nombre y fecha de nacimiento. Usa mi nombre en el encabezado y calcula mi edad en algún lugar sutil. Cuando marco algo como completado, anima la tarjeta para que explote en cientos de partículas diminutas y disolventes que conserven los colores de la tarjeta. Hazlo satisfactorio.
5. Trucos, consejos y solución de problemas
Usa imágenes como referencias rápidas
Sube una captura de pantalla de una aplicación que te encante. "Hazlo sentir como esto" le da a Claude más con qué trabajar que describir la estética desde cero. También puedes tomar una captura de pantalla de tu artifact y marcar algo específico: "Esta parte. Arregla esto."
Tu artifact puede pensar
Los artifacts pueden llamar a Claude directamente, no solo mostrar contenido estático. Esto significa que tu aplicación puede analizar lo que has guardado, generar sugerencias personalizadas, escribir texto personalizado o responder a lo que estás haciendo. Pídele a Claude que "incorpore IA en la aplicación" o "haga que la aplicación llame a Claude" cuando quieras que tu herramienta razone, no solo muestre.
Reutiliza lo que funciona
Una vez que tengas una estética que te guste, pídele a Claude que la aplique en otro lugar. "Usa este mismo sistema de diseño para un rastreador de lista de lectura" o "Hazme una aplicación de ideas de regalos con este mismo estilo visual exacto." Ya has hecho el trabajo difícil de definir la sensación.
6. ¿Listo para probarlo tú mismo?
Crea herramientas interactivas con interfaces personalizadas, adaptadas a cómo te gusta explorar y aprender. Describe y refina tus ideas con Claude para hacer herramientas útiles para ti.