
Galería de vista previa
Skills similares
Ver todas las SkillsLo que obtienes
- Un único archivo web autónomo que se abre en cualquier navegador y funciona sin conexión, con fuentes e imágenes incluidas; una adaptación a tu propio proyecto con framework si lo tienes.
- Casos de estudio que combinan cada foto de producto con una foto de uso, además de un estimador de alcance, planes mensuales y trimestrales, pestañas de proceso y un brief de contacto validado.
- Los titulares en rotulador, el retrato en mancha, las pegatinas y las tarjetas de servicios en color característicos, en un ejemplo de 21 páginas con 16 imágenes.
Ideal para
- Diseñadores independientes de marca y packaging que quieren mostrar su personalidad en la página.
- Fotógrafos e ilustradores que pueden usar Trabajos para sus encargos y vender paquetes como servicios.
- Panaderías y productores de alimentos que pueden convertir Trabajos en su catálogo y Proceso en cómo elaboran sus productos.
No es para
- Envío real de formularios o pagos; el brief de contacto y el estimador solo muestran resultados de demostración honestos.
- Marcas que buscan un estilo tranquilo, minimalista o corporativo en lugar de tipografía de rotulador y pegatinas.
- Presentar a la ficticia Juno Halvorsen, sus clientes o sus citas como trabajo real.
Identidad de marca y sistemas visualesDiseño web y experiencias digitalesCrear sitio de agenciaEstilo fijadoResultado editableDoodleHeroServicioTrabajos
Acerca de esta Skill

Estudio de marca con garabatos de rotulador crea un sitio web llamativo, cálido y dibujado a mano para un diseñador independiente de marca o packaging: papel cálido, texto en tinta y tres colores de rotulador (cobalto, rojo tomate y amarillo girasol), titulares en rotulador de punta biselada, un retrato recortado y sonriente en una mancha cobalto, tarjetas de servicios en bloques de color y fotografía real de packaging. El ejemplo es la diseñadora ficticia Juno Halvorsen, con 21 páginas conectadas.

Lo que obtienes
- Un único archivo web autónomo que se abre en cualquier navegador y funciona sin conexión, con las fuentes y las imágenes incluidas. Si ya tienes un proyecto con un framework, el diseño se traslada a él.
- Un sitio de estudio completo: un índice de trabajos con filtros, búsqueda y ordenación, cuatro casos de estudio con fotos de producto y en contexto y muestras de color copiables, servicios con cuatro páginas de detalle, sobre mí, artículos con cuatro entradas, proceso, contacto, privacidad y una página de no encontrado.
- Un estimador de alcance que calcula un precio inicial y un plazo y rellena el formulario de contacto, además de planes con selector mensual y trimestral.
- Un brief de contacto validado con estados de carga y de éxito, pestañas de proceso con un gráfico de cronograma y una barra de progreso de lectura en los artículos.
- Una entrada única del Hero, un subrayado rojo que se dibuja, ojos saltones que siguen al puntero y una cinta de clientes que se detiene al pasar el cursor, todo tranquilo con la configuración de movimiento reducido.

Cómo usarlo
- Comparte tu nombre, qué diseñas, tus proyectos con clientes y resultados, servicios con precios reales y tus datos de contacto. Los textos que falten se redactan como marcadores de posición verosímiles y se enumeran para que los confirmes.
- Envía un retrato recortado sobre fondo blanco y un retrato cuadrado en blanco y negro, además de fotos de producto y de uso para cada proyecto, o deja que el agente las genere con el mismo estilo.
- Abre cada página en escritorio y móvil, prueba los filtros, el estimador y el formulario de contacto, y pide cambios.

La tipografía usa Permanent Marker, Bricolage Grotesque y Kalam, incrustadas en el archivo. Las imágenes nuevas salen de la propia herramienta de imagen de tu agente y pueden tener costos de uso.
Lo que necesitas antes de empezar
- Tú aportas
- Tu nombre, qué diseñas y una breve presentación · Proyectos con cliente, año y resultado, además de servicios con precios reales y datos de contacto · Un retrato recortado y fotos de proyectos, o tu aprobación para generar imágenes provisionales
- Dependencias
- Node.js 18 o superior en la máquina de tu agente, para ejecutar el script incluido que genera el archivo único sin conexión · Acceso a internet mientras se genera el archivo, para descargar las fuentes una vez e incrustarlas · Una herramienta de imagen en tu agente, o tus propias fotos, para retratos, fotos de producto y fotos de uso
- Costos externos
- Las nuevas fotos de producto, fotos de uso y retratos se generan con la propia herramienta de imagen de tu agente, que puede cobrar por uso. Si no tienes una, aporta tus propias fotos; las imágenes del estudio, del proceso y las pegatinas pueden quedarse. Ver el ejemplo no cuesta nada.
- Última prueba
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Reseñas de usuarios
Cargando reseñas…









