Le pasas a Claude un brief, unas fotos y tu paleta. One-Shoot elige una dirección de arte para ese negocio, escoge entre los 211+ componentes de React Bits, la construye, la revisa en un iPhone y la publica en Vercel.
Tú, en Claude Code
/oneshot Crea una landing para mi hamburguesería de Algemesí. Brief en brief.md, 3 fotos, un vídeo y esta paleta: #FFE8D6 #FF8360 #9C2B1B.
Antes de escribir código, Claude escribe un brief de diseño: qué dirección de arte encaja con este negocio, su paleta y sus fotos, cuál es el momento que se recordará, qué composición de hero usa y qué componente cubre cada papel. Un historial guarda las webs anteriores: la siguiente usa otra dirección y al menos la mitad de componentes distintos. Por eso no salen todas iguales.
Cada dirección fija tipografías, color, motivos, ritmo de animación y componentes candidatos. Léelas todas en el repo.
Webs reales, en producción. Pasa el ratón por el acordeón o entra en cada una.
N.º 01 · Rótulo de barrio
Hamburguesería take-away · Algemesí
Brief en Markdown, 3 fotos, un vídeo y una paleta de 5 colores.
mesquebo-web.vercel.appComponentes de React Bits
N.º 02 · Rótulo de barrio
Alquiler de trasteros · Aldaia
Sin fotos de producto: el hero es una ilustración de la nave hecha con CSS y una calculadora de tamaño.
trasteros-aldaia-web.vercel.appComponentes de React Bits
N.º 03 · Neón nocturno
Herramienta open source · landing de producto
Un ojo que sigue al cursor como momento firma. Lighthouse móvil 95 · 100 · 100 · 100.
eyes-on-claude.vercel.appComponentes de React Bits
No hay un set de favoritos. Para cada papel de la web, Claude busca en todo el catálogo de React Bits, lee las props y los avisos de rendimiento de los candidatos y se queda con el que mejor cuenta este negocio. Los añade con dependencias compatibles con React 18, sin colores de demo, a tamaño de su contenedor y con los parches que ya conocemos para que no rompan el build ni el scroll.
| Titular del hero | SplitText, BlurText, TextType, DecryptedText, TextPressure… |
|---|---|
| Fondo del hero | CSS propio, Waves, DotGrid, Silk, LightRays… |
| Galería | Stack, CardSwap, Masonry, AccordionGallery, CircularGallery… |
| Servicios | MagicBento, SpotlightCard, FlipCard, Folder… |
| Transiciones | ScrollVelocity, LogoLoop, CurvedLoop, GradualBlur… |
| CTA | Magnet, ClickSpark, StarBorder, SlideCommit… |
Se entrega a la primera: sin «versión base para iterar». Esto es lo que hace Claude entre tu prompt y la URL.
PRD, cada foto (qué muestra, fondo, encuadre) y la paleta. Si falta un dato, no lo inventa: lo apunta como pendiente.
Dirección de arte, momento firma, composición del hero, tipografías y un componente por papel, con su porqué.
Qué dirección y qué componentes usó la web anterior, para que esta no se le parezca.
Busca en los 211+ componentes, lee sus props y avisos, y añade 8-14 con dependencias compatibles.
WebP, vídeo mp4 + webm con póster, sin recortar tus fotos: dimensiona según su ratio real.
Next.js 14 + Tailwind + motion. Curvas, duraciones y :active de Emil Kowalski; reduced-motion respetado.
Desbordes, capturas, FPS de scroll y errores de consola en móvil y escritorio, sobre el build de producción.
¿Se entiende en 3 segundos? ¿Tiene momento firma? ¿Si tapas el logo, podría ser de otro negocio?
Vercel y Lighthouse móvil: objetivo 90+ de rendimiento, 100 en el resto, CLS 0.
Registra la web en el historial y guarda cada fallo nuevo para no repetirlo.
Horarios, reseñas, años, premios, precios o cifras que no estén en tu brief se omiten, no se rellenan. Al final te lista lo que falta.
Entradas en CSS antes de hidratar, LCP sin animar opacity, bucles pausados fuera de pantalla, CLS 0, sin scroll horizontal en 390 px.
La filosofía de Emil Kowalski manda: ease-out rápido, nada desde scale(0), :active en todo lo pulsable, stagger corto y reduced-motion.
curl -fsSL https://raw.githubusercontent.com/dfadify-web/One-Shoot/main/install.sh | bashCopia la skill a ~/.claude/skills/oneshot, instala las dependencias de los scripts y precarga React Bits. Reinicia Claude Code al terminar.
Luego, en Claude Code
«Crea una landing para mi negocio. Brief en ~/Downloads/brief.md, assets en ~/Desktop/assets-cliente, color principal #FFB79A y esta paleta: #FFE8D6 #FF8360 #9C2B1B.»
Ejemplo del README. Puedes añadir el tono: «algo editorial», «más canalla»…
Necesitas
¿Te ha servido? Dale una estrella.
One-Shoot es gratis y de código abierto. Una estrella en GitHub ayuda a que más gente la encuentre, y cada web nueva la mejora: los fallos se quedan apuntados para no repetirlos.
Dale una estrella en GitHub