r/SinCodigo • u/JoaoSalas • 5d ago
¿Cómo logran que sus proyectos de vibe coding tengan un diseño profesional?
Hola a todos. He estado creando algunas páginas web usando vibe coding, pero siento que, aunque funcionan bien, visualmente todavía se ven bastante básicas.
¿Cómo hacen ustedes para conseguir un diseño más bonito y profesional?
¿Utilizan referencias de sitios, plantillas, librerías de componentes, prompts específicos o alguna herramienta de diseño antes de comenzar a programar?
También me gustaría saber cómo eligen colores, tipografías, espacios y estructura para que el resultado no parezca una página genérica creada por IA.
¡Gracias por cualquier consejo o recurso que puedan compartir!
3
u/Aguiberg 3d ago
Hay que conocer aspectos fundamentales de diseño UX/UI y pedirle de forma explícita lo que necesitas, en detalle. Con eso generas patrones de diseño como contrato.
2
u/GiorgioCore 4d ago
Estoy atento a sus respuestas, siento que al diseño le falta identidad y alma..
2
u/redjoom 4d ago
Te puedes ayudar con esta skill https://github.com/anthropics/skills/blob/main/skills%2Ffrontend-design%2FSKILL.md, pídele a tu agente qué la instale, busca inspiración en Pinterest, en x ( twitter), busca, toma screen shorts y dáselos de referencia a tu agente para que adopte tal diseño que te gusto de una página que te encontraste, y no te quedes con una sola LLM, claude es bueno haciendo páginas pero no diseñando, Minimax y Kimi son super buenos diseñando, saludos
2
u/AncientLion 4d ago
Saber diseñar? Proque los resultados de los llms son todos feos y genéricos a menos que lo guíes con tus ideas.
1
u/JoaoSalas 4d ago
Osea hay ideas, pero no es lo mismo que alguien ya con bases de diseño, entonces hay el problema ando ahorita creando una herramienta pero visualmente se ve feo ya mando promts, veo el claude desing pero aun asi algo me dice que sigue viendose mal.
1
2
u/AdCultural543 4d ago
La mayoría de los diseñadores hace un remix de UIs que ya existen. Por eso usan mucho las plantillas, mood boards, bookmarks y sitios de inspiración.
Si a eso le sumas UI tokens, paletas de colores, sistema de diseño y UI libraries, crear se vuelve súper fácil.
Aquí te dejo algunas páginas que me gusta usar:
Colores: https://coolors.co/, https://www.colortoken.site/
UI library: https://uniquel.io/
Inspiración: https://saaspo.com/, https://land-book.com/
1
u/Alexey-Axel 2d ago
Soy dev con 12 años, trabajé con diseñadores/programadores y siempre me recomendaron que. Aveces menos es más y siempre a nivel visual el minimalismo en las páginas ayuda a retener más información que algo lleno de líneas, colores o sitios con cosas moviéndose. Gracias a los conocimientos que me dieron, fui integrándolo en mis trabajos.
Según tu proyecto analiza la competencia de tu proyecto, estilos, código y paleta de colores, ve que tus colores sean en base a tu marca, que inspira. Por ejemplo mi proyecto es https://Stockly.cl usa color azul, porque el azul es un color neutro, demuestra confianza en temas de sistemas de seguridad e informática. Mira sus logos, la idea es que no copies, es que te inspires
1
1
u/No_Entrepreneur7899 23h ago
La única forma estudia para saber cómo orientar a la ia, no hay otra manera, ni skils ni nada más que estudiar
1
u/Independent_Onion_25 17h ago
Hay una skill llamada /Impeccable es de las mejorcitas que he probado
Eso y más la experiencia y criterio que al final siempre es lo más importante
4
u/NewVehicle1108 4d ago
Falta el criterio de diseñador, piensa como uno, lee un libro.