50 aplicaciones populares reconstruidas en especificaciones de diseño legibles por Claude: Patrones clave para clonar interfaces de usuario
u/meliwat pasó semanas realizando ingeniería inversa de 50 aplicaciones populares para convertirlas en especificaciones de diseño estructuradas en markdown y se las dio a Claude para reconstruir las interfaces. La diferencia entre clones casi perfectos y salidas que se desviaban se redujo a unas pocas prácticas concretas observadas a gran escala.
Lo que hizo que Claude lograra clones de UI
- Valores exactos, no rangos.
#1A1A1Afunciona. "gris oscuro" produce cinco grises diferentes en cinco pantallas. - Cobertura de estados por adelantado. Listar cada estado (vacío, cargando, error, lleno) evitó que Claude inventara los suyos propios.
- Espaciado como escala, no píxeles por elemento. Un sistema de espaciado 4/8/16/24 produjo diseños más consistentes que anotar cada espacio.
- Navegación como gráfico. Las transiciones explícitas entre pantallas eliminaron las suposiciones sobre "¿a dónde va este botón?".
Lo que no ayudó
La prosa extensa. Más allá de cierto punto, más palabras empeoraron la salida, no la mejoraron. Mantén las especificaciones concisas.
Recursos disponibles
La colección completa es de código abierto en GitHub en github.com/Meliwat/awesome-ios-design-md. Cada aplicación incluye 3 niveles de especificación: referencia rápida, compilación estándar o clon a nivel de píxel completo. Todo en markdown, licencia MIT, sin dependencias.
Pregunta a la comunidad
El autor pregunta: si has hecho clonación de UI con Claude, ¿qué patrones has encontrado que falten en esta lista? ¿Qué aplicaciones vale la pena agregar a continuación?
📖 Lee la fuente completa: r/ClaudeAI
👀 Ver también
Contexto Lean: El Complemento de Código Claude Convierte Documentación Detallada en Archivos Optimizados para Agentes
Un complemento gratuito y de código abierto para Claude Code llamado Lean Context escanea la documentación del proyecto y elimina el contenido que los agentes de IA pueden descubrir mediante búsquedas, conservando solo los comandos esenciales no obvios, las trampas y las peculiaridades del entorno. En una prueba con un proyecto de comercio electrónico .NET, redujo 8 documentos con un total de 1.263 líneas a solo 23 líneas.
Servidor MCP de Shipshots: Claude diseña capturas de pantalla de la App Store y videos de vista previa
Shipshots es un editor visual con un servidor MCP que permite a Claude diseñar materiales de marketing mediante llamadas a herramientas. Genera capturas de pantalla para tiendas de aplicaciones, videos de vista previa animados y gráficos para redes sociales basados en descripciones de texto.
Gerente de Producto Comparte Más de 70 Habilidades de Claude para Automatizar Flujos de Trabajo de Gestión de Productos
Un director de producto con 20 años de experiencia ha creado más de 70 habilidades para Claude que automatizan tareas comunes de gestión de productos, incluyendo generación de PRD, análisis de entrevistas con usuarios, perfiles competitivos y creación de hojas de ruta. Las habilidades están disponibles como archivos .md descargables para Claude Code.
free-claude-code añade soporte para GLM-5 a través de NVIDIA NIM y se expande a OpenRouter y Discord.
free-claude-code ahora admite GLM-5 a través del nivel gratuito de NVIDIA NIM (40 solicitudes/min) y agrega integración con OpenRouter, soporte para bot de Discord y compatibilidad con el proveedor local LMStudio. La herramienta convierte las solicitudes de API de Anthropic de Claude Code para funcionar con backends de modelos alternativos.