WireframeStudio convierte una descripción JSON compacta en una maqueta viva, recoge tu feedback y compila un contrato de implementación listo para un agente de código. Converge el diseño en JSON barato e impleméntalo una sola vez.
Sin dependencias · 100% offline · API real en /api/validate y /api/design-tokens
Generar y regenerar código de UI en cada ronda de feedback quema tokens. WireframeStudio itera el diseño en una representación JSON compacta y deja la implementación para el final — una sola vez, con un contrato preciso.
Cuatro pasos: del wireframe barato al código real.
Pantallas y componentes como JSON compacto, no como HTML/CSS completo.
Maqueta viva con Inspector: marca qué cambiar o eliminar sobre cada elemento.
Compila un prompt óptimo para que la IA devuelva el JSON modificado. Iteras.
barato en tokens ↻Wireframe + tokens DESIGN.md → un agente construye la UI real una sola vez.
listo para implementarMenos coste, más fidelidad, sin fricción.
Iterar sobre JSON compacto cuesta una fracción de regenerar componentes de UI en cada vuelta.
El wireframe es la fuente de verdad: layout, jerarquía, navegación y contenido, sin ambigüedad.
Exporta tokens en formato DESIGN.md (google-labs-code/design.md): el agente aplica colores y tipografía, no valores inventados.
Acota el contrato a una sola pantalla para construir incrementalmente y abaratar cada entrega.
Solo JS vanilla y módulos nativos; iconos y fuentes vendorizados. Cero CDNs en runtime.
Publica Agent Skills vía llms.txt con índice firmado y endpoints reales que un agente puede llamar.
El sitio implementa el RFC
llms-txt-skills:
publica skills descubribles en /llms.txt, con un índice firmado ed25519
(integridad + autenticidad). Dos de ellas están respaldadas por endpoints reales.
Valida un wireframe JSON vía POST /api/validate: errores estructurales y avisos de tipos desconocidos.
Devuelve los tokens de un tema como DESIGN.md o JSON vía GET /api/design-tokens.
Cómo escribir un wireframe JSON válido (pantallas + tipos de componente) que la app renderiza.
SKILL.md →Estructura, ids únicos, componentes con type. Devuelve { valid, errors, warnings }.
# 422 si el wireframe está mal formado
curl -sX POST https://wireframe-studio.pages.dev/api/validate \
-H 'Content-Type: application/json' \
-d '{"screens":[{"id":"a","components":[{"type":"card"}]}]}'Un DESIGN.md (o JSON) con colores, tipografía y espaciado del tema.
# DESIGN.md del tema slate
curl -s "https://wireframe-studio.pages.dev/api/design-tokens?theme=slate"
# tokens crudos en JSON
curl -s ".../api/design-tokens?theme=slate&format=json"Abre el editor, elige una plantilla y genera tu primer contrato de implementación en minutos.
Abrir la app