Creador de UI para Roblox
LICENCIAS ANTES QUE NADA. Los iconos provienen de UN paquete de iconos con licencia que tú (el desarrollador) posees; esta habilidad no incluye iconos ni texturas. Lee la licencia de tu paquete: la mayoría de los paquetes de pago permiten su uso en tus propios juegos, pero prohiben la reventa, redistribución, paquetes de assets y entrenamiento de IA (si es así, nunca envíes los PNG del paquete a ningún modelo de imagen). En los repositorios del juego, confirma icons.json + el script de copia, no el paquete, a menos que la licencia lo permita. Las texturas las descargas tú desde https://ui-resources.com (UI_RESOURCES.md); acredita a sus creadores.
Las herramientas de importación de Figma son para diseños que ya existen en Figma; esta habilidad es para diseñar nueva UI (o recrear una captura de pantalla) primero mediante HTML.
El ciclo: referencia -> tokens -> HTML (todos los estados) -> el desarrollador verifica -> aprende -> importa -> verifica.
Lee LESSONS.md antes de tocar nada (todas las reglas aprendidas hasta ahora, con el error detrás de ellas). Prevalece sobre cualquier cosa a continuación que esté en desacuerdo.
Archivos en esta habilidad
| Archivo | Qué es |
|---|---|
LESSONS.md | cada regla + por qué. Léelo primero; escribe la retroalimentación del desarrollador en él (REVIEW_LOOP.md) |
STYLE.md | leer la referencia para obtener tokens; ajustes preestablecidos; token CSS -> tabla de Roblox |
UI_RESOURCES.md | ui-resources.com: qué es, cómo encontrar/descargar, la textura de stud y dónde colocarla |
PATTERNS.md | HUD, tienda, carrete de cajas + probabilidades, toasts, confirmar, carga, tutorial, burbuja, píldora de objetivo, listas |
PIPELINE.md | HTML -> JSON -> Roblox en profundidad: rbx.json, marcadores de exportación, tabla de mapeo, libro de contabilidad, plantillas, copias |
REVIEW_LOOP.md | cómo mostrar pantallas, recibir comentarios, obtener aprobación |
VERIFY.md | renderizado simulado, barrido de propiedades, arnés de modo de edición, clics de prueba de juego, listas de verificación |
ROBLOX_FACTS.md | hechos medidos del motor + herramienta MCP (inset, TextSize, cargas, capturas) |
styles/ | stud.css (preestablecido por defecto), glass.css (preestablecido de simulador oscuro) |
templates/examples/ | un proyecto de UI funcional: build.py, kit.css, icons.json, rbx.json |
templates/luau/ | Builder, UIKit, NumberFormat, Theme, client/UI + Controller, Toasts, UpdateInPlace, PixelRows, ProgressiveReveal, NextGoal, CrateRoll, LoadingScreen, PropertySweep, WorldHitTest |
scripts/ | read_reference, copy_icons, cdp/export/dump, gen, ledger, assets, bundle, mock/mockshot/mockdiff, check_copies, luau_to_rbxmx; remake/ = herramientas de medición 1:1 |
SK=<carpeta de esta habilidad> a continuación (la carpeta donde se encuentra este SKILL.md). Herramientas que necesitas: python3 con PIL + numpy, node 22+, Google Chrome (renderizados headless; la variable de entorno CHROME anula la ruta de macOS), luau-analyze, un panel de navegador o herramienta de automatización de navegador para ver páginas (en Claude Code desktop: mcp__Claude_Browser__*, carga con ToolSearch), un servidor MCP de Studio que pueda ejecutar Luau e importar archivos .rbxmx (esta habilidad fue escrita pensando en el MCP comunitario robloxstudio) y el MCP integrado Roblox_Studio solo para upload_image (ROBLOX_FACTS.md).
1. Resumen, referencias, estilo (requerido: una referencia de estilo)
- Obtén el resumen: qué pantallas, qué hacen, qué datos muestran, PC + teléfono. Enumera cada estado que necesitan.
- Se requiere una imagen de referencia de estilo. Usa la que el desarrollador proporcionó. Si no hay ninguna: pregunta una vez (