Diseño de las rutas con taste-skill (anti-slop)

Fecha: 2026-09-19 · Proyecto: ~/nef/estado_turismo Commit: 0009d0a · Deploy: las 5 rutas

Skill usada

• Fuente: https://github.com/Leonxlnx/taste-skill (MIT)
• Skills relevantes: design-taste-frontend (por defecto), redesign-existing-projects, high-end-visual-design (soft)
• Instalada localmente en ~/.config/opencode/skill/taste-skill/:
  • SKILL.md (design-taste-frontend)
  • redesign.md, soft.md, minimalist.md (referencia)

Design read (según la skill)

Rediseño preserve de un explorador de rutas para viajeros con criterio: lenguaje editorial cálido + soft-structuralism, un solo acento, con Motion moderado y densidad media (es UI de lista/detalle, no marketing).

Cambios aplicados (vanilla CSS, sin romper nada)

• Superficies: papel cálido #F7F4EE, ink espresso-teal #14231F, hairline cálida #E8E2D6, superficies elevadas blancas, sombras tintadas.
• Color: un solo acento (teal #0E7C7B); los colores por categoría se conservan solo donde son funcionales (chips/leyenda/mapa).
• Doble bisel (soft-skill) en hero y fotos: hairline interior + highlight.
• Tipografía: Bricolage Grotesque (display) + Atkinson Hyperlegible (body); tracking negativo en titulares, text-wrap: balance/pretty, tabular-nums en datos, labels en small-caps con letter-spacing.
• Estados: hover/active con cubic-bezier y curva spring, focus-visible.
• Micro-motion: entrada escalonada de la lista (--i), hover de fotos, transiciones de vista con spring. Todo con transform/opacity.
• Grano: overlay SVG sutil (pointer-events none) dentro del panel.
• Mapa: controles y atribución a juego con la paleta.

Guardrails respetados

• prefers-reduced-motion desactiva animaciones.
• Sin backdrop-filter en contenedores que scrollean (evita jank en móvil).
• Mobile-first intacto (barra contenida + scroll, ver 2026-09-19-mobile-first-rutas.md).

Verificación

Playwright desktop (1280×800) y iPhone 12: hero con foto, 3 fotos, miniaturas has-photo, fondo rgb(247,244,238), sin errores de consola. Deploy de las 5.

Cómo volver a aplicarlo

Cargar la skill taste-skill y pedir un pase de diseño; la dirección ya está fijada en los tokens de places-panel.css (y los tokens de index.html).