tinycorn-studio/agent-skills

Vista previa de UI primero (Estándar de TinyCorn Studio)

Regla: todo cambio de interfaz debe tener una imagen de previsualización que el usuario apruebe antes de aplicar al código.

Flujo de trabajo

1. Escribe un script de renderizado fuera de pantalla en tools/preview_<nombre>.swift — no es necesario ejecutar la app, renderiza directamente a PNG 2x.

2. Ejecuta y abre la imagen para el usuario:

   swift tools/preview_<nombre>.swift ~/Desktop/<App>-<Nombre>-Preview.png
   open ~/Desktop/<App>-<Nombre>-Preview.png
   

3. Pide aprobación — si hay múltiples opciones de diseño, renderiza 2–4 variantes lado a lado y pide al usuario que elija (A/B/C/D).

4. Solo aplica después de que el usuario OK. Incluye el script de previsualización en el commit de la funcionalidad.

5. Si el usuario solicita cambios: modifica el script, renderiza de nuevo, repite hasta que sea aprobado.

Esqueleto de código (SwiftUI, macOS)

import AppKit
import SwiftUI

struct PreviewRoot: View {
    var body: some View {
        // Construye una UI simulada usando los mismos componentes/colores de la app
        VStack { /* ... */ }
            .frame(width: 900, height: 600)
            .background(Color(nsColor: .windowBackgroundColor))
    }
}

let host = NSHostingView(rootView: PreviewRoot())
host.frame = NSRect(x: 0, y: 0, width: 900, height: 600)
host.layoutSubtreeIfNeeded()

let rep = host.bitmapImageRepForCachingDisplay(in: host.bounds)!
host.cacheDisplay(in: host.bounds, to: rep)

let png = rep.representation(using: .png, properties: [:])!
let out = CommandLine.arguments.count > 1
    ? CommandLine.arguments[1]
    : "preview.png"
try! png.write(to: URL(fileURLWithPath: out))
print("Escrito \(out)")

Errores comunes (ya ocurridos)

• No usar nombres de variables globales que coincidan con modificadores/vistas de SwiftUI (ej. border) → error de sobrecarga. Usa borderColor.
• Los encabezados se comparten entre métodos, por lo que no deben declararse duplicados en otro lugar del mismo archivo.
• Renderizado 2x: establece rep.size o usa bitmapImageRepForCachingDisplay + cacheDisplay como se indica; no olvides layoutSubtreeIfNeeded() antes de cachear.
• No uses screencapture/AppleScript para capturar la app — la máquina a menudo carece de permisos de Grabación de Pantalla (-1743). El renderizado fuera de pantalla es la única forma fiable.
• Tema oscuro de la app: usa los mismos Color(nsColor:) y assets de la app para que la previsualización coincida con la realidad.
• Guarda la imagen en ~/Desktop/ para que el usuario la encuentre fácilmente, con nombre tipo <App>-<Feature>-Preview.png.

Fuera de SwiftUI

• Web: abre un HTML mockup con el navegador y captúralo, o usa Playwright para hacer una captura de pantalla.
• CLI/TUI: renderiza con ANSI en la terminal o describe texto con colores.

El principio general no cambia: imagen primero, código después, el usuario aprueba y luego se aplica.