Communitygithub.com

Roblox UI Maker

Erstelle Roblox-Spieloberflächen komplett von Ende zu Ende: Lies den Stil des Entwicklers, beziehe Texturen von ui-resources.com, nutze nur ein lizenziertes Icon-Paket, baue jeden Bildschirm in HTML/CSS mit allen Zuständen, lass es prüfen und freigeben, exportiere nach JSON, lade Bilder hoch, generiere und baue ein echtes ScreenGui in Studio und verifiziere alles.

Was ist Roblox UI Maker?

Diese Fähigkeit (Skill) ermöglicht es, vollständige Roblox-Benutzeroberflächen (UI) von Grund auf zu entwerfen, zu entwickeln und in Roblox Studio zu importieren. Der gesamte Workflow ist in HTML/CSS verankert: Nachdem ein Style-Referenzbild vom Entwickler eingeholt wurde, werden daraus Design-Tokens (Farbpalette, Abstände, Texturen) extrahiert. Icons stammen aus einem einzigen, lizenzierten Vektor-Icon-Paket des Entwicklers; Texturen werden von ui-resources.com bezogen. Jeder Bildschirm wird zuerst in HTML/CSS mit allen interaktiven Zuständen umgesetzt und vom Entwickler visuell geprüft. Erst nach Freigabe erfolgt der Export in ein JSON-Layout, der Upload der Bild-Assets in Roblox und die Generierung eines echten `ScreenGui` in Studio. Die Fähigkeit enthält umfangreiche Templates, Skripte und eine `LESSONS.md`, die alle gelernten Regeln dokumentiert. Sie wird typischerweise mit Claude Code (Desktop) und einem Studio-MCP-Server (z. B. `robloxstudio`) genutzt. Unterstützt werden alle Arten von Roblox-UI: HUDs, Shops, Menüs, Popups, Tutorial-Karten, Crate/RNG-Räder und Icon-Anfragen.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/zriptic/roclicks-skills/tree/HEAD/roblox-ui-maker
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht Roblox UI Maker?

LIZENZEN ZUERST. Icons stammen aus EINEM lizenzierten Icon-Paket, das du (der Entwickler) besitzt; dieser Skill liefert keine Icons und keine Texturen. Lies die Lizenz deines Pakets: Die meisten kostenpflichtigen Pakete erlauben die Nutzung in deinen eigenen Spielen, verbieten jedoch Weiterverkauf, Weiterverteilung, Asset-Pakete und KI-Training (falls ja, sende die PNGs des Pakets niemals an ein Bildmodell). In Spiel-Repos committe icons.json + das Kopierskript, nicht das Paket, es sei denn, die Lizenz erlaubt es. Texturen werden von dir von https://ui-resources.com heruntergeladen (UI_RESOURCES.md); gib die Urheber an.

Figma-Import-Tools sind für Designs, die bereits in Figma existieren; dieser Skill dient zum Entwerfen neuer UI (oder zum Nachbauen eines Screenshots) zuerst über HTML.

Der Kreislauf: Referenz -> Tokens -> HTML (alle Zustände) -> der Entwickler prüft -> lernen -> importieren -> verifizieren. Lies LESSONS.md, bevor du irgendetwas anfasst (jede bisher gelernte Regel mit dem dahinterstehenden Bug). Sie hat Vorrang vor allem, was unten widerspricht.

Dateien in diesem Skill

DateiZweck
LESSONS.mdjede Regel + warum. Zuerst lesen; schreibe das Feedback des Entwicklers hier hinein (REVIEW_LOOP.md)
STYLE.mdReferenz in Tokens einlesen; Voreinstellungen; CSS-Token -> Roblox-Tabelle
UI_RESOURCES.mdui-resources.com: was es ist, finden/herunterladen, die Stud-Textur und wohin damit
PATTERNS.mdHUD, Shop, Crate-Rad + Quoten, Toasts, Bestätigung, Laden, Tutorial, Bubble, Ziel-Pille, Listen
PIPELINE.mdHTML -> JSON -> Roblox im Detail: rbx.json, Export-Marker, Mapping-Tabelle, Ledger, Vorlagen, Kopien
REVIEW_LOOP.mdWie man Bildschirme zeigt, Feedback nimmt, Freigabe erhält
VERIFY.mdMock-Render, Property-Sweep, Edit-Mode-Harness, Playtest-Klicks, Checklisten
ROBLOX_FACTS.mdGemessene Engine- + MCP-Tool-Fakten (Inset, TextSize, Uploads, Captures)
styles/stud.css (Standardvoreinstellung), glass.css (dunkle Simulator-Voreinstellung)
templates/examples/Ein funktionierendes UI-Projekt: build.py, kit.css, icons.json, rx.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/ = 1:1-Messwerkzeuge

SK=<Ordner dieses Skills> (der Ordner, in dem diese SKILL.md liegt). Benötigte Werkzeuge: python3 mit PIL + numpy, node 22+, Google Chrome (Headless-Rendering; env CHROME überschreibt den macOS-Pfad), luau-analyze, ein Browser-Panel oder Browser-Automatisierungswerkzeug zum Anzeigen von Seiten (in Claude Code Desktop: mcp__Claude_Browser__*, laden mit ToolSearch), ein Studio-MCP-Server, der Luau ausführen und .rbxmx-Dateien importieren kann (dieser Skill wurde gegen das Community-MCP robloxstudio geschrieben) und das integrierte Roblox_Studio-MCP nur für upload_image (ROBLOX_FACTS.md).

1. Briefing, Referenzen, Stil (erforderlich: eine Stil-Referenz)

  • Hol dir das Briefing: welche Bildschirme, was sie tun, welche Daten sie anzeigen, PC + Handy. Liste alle Zustände auf, die jeder benötigt.
  • Ein Stil-Referenzbild ist erforderlich. Verwende das vom Entwickler gegebene. Falls keins: frage einmal („Sende einen Screenshot des gewünschten Stils; oder ich verwende den Stud-Stil“). Wenn sie sagen, mach einfach: Stud-Voreinstellung. Die meisten Spiele sind Stud.
  • Führe zuerst die Projekteinrichtung in Schritt 4 durch (er erstellt ui/), speichere dann die Referenz als ui/ref.png. Layout-Referenzen (ein anderer Shop) sind getrennt von der STIL-Referenz.
  • Lies sie aus ui/ heraus ein (STYLE.md Abschnitt 2): python3 $SK/scripts/read_reference.py ref.png -> Palette, Umriss-Px, Textur-Hinweis, Text-Stil, Dichte + ref_palette.png, ref_zoom.png (Lies es, um Studs/Glanz zu SEHEN) und einen Entwurf von style.css. Bestätige jeden Wert visuell, behalte nur Überschreibungen der gewählten Voreinstellung.
  • „Wie Spiel X“ = inspiriert, keine Kopie, es sei denn, der Entwickler sagt „baue das 1:1 nach“ (dann LESSONS Abschnitt 7 und scripts/remake/).

2. Texturen von ui-resources.com

Der Stud-Stil MUSS eine Stud-Textur tragen. Dieser Skill bündelt keine: Lade die ui-resources „Stud texture“ (Tag Stud) selbst von https://ui-resources.com herunter, konvertiere sie bei Bedarf in ein echtes PNG und speichere sie als ui/stud.png in deinem Projekt (4×4 Studs pro Kachel, gekachelt bei 112 px mit Overlay-Blend-Modus). Für alles andere (Papier, Sonnenstrahlen, Halbtöne, Hintergründe) durchsuche zuerst die Website und speichere Downloads in ui/tex/ (UI_RESOURCES.md: Filter, ?tag=Stud, Lesen von Lazy-Loading-URLs, file + sips für WebP-namens-PNG). Gib die Urheber im Header von build.py an.

3. Icons: nur dein Icon-Paket

Icons stammen aus EINEM lizenzierten Vektor-Icon-Paket, das der Entwickler besitzt (ein Vektor-Paket pro Projekt; niemals Pakete mischen), niemals Emojis. Finde Icons, indem du den eigenen Ordner oder Katalog des Pakets durchsuchst (z. B. find <paket> -iname '*coin*'). Bearbeite nach der Einrichtung in Schritt 4 ui/icons.json ({"slug": "Icon-Dateiname oder Pfad im Paket"}; die Beispiel-Liste ist ein Ausgangspunkt) und führe python3 $SK/scripts/copy_icons.py icons.json --pack <dein Icon-Paket> in ui/ aus (füge --prefer " Outline" oder das Äquivalent für dein Paket hinzu, um zuerst Umriss-Varianten zu nehmen). Niemals Emojis, Schließen = Text „X“. Suche Synonyme, bevor du etwas als fehlend bezeichnest.

4. Jeden Bildschirm in HTML/CSS bauen

Einmal im Spiel-Repo einrichten (mache dies, bevor Schritte 1-3 etwas in ui/ schreiben; cp -n überschreibt nie):

mkdir -p ui && cp -rn $SK/templates/examples/. ui/ && cd ui
cp <deine heruntergeladene Stud-Textur> stud.png && cp -r $SK/styles .     # Stud-Textur von ui-resources.com
cp <Referenz> ref.png && python3 $SK/scripts/read_reference.py ref.png      # -> style.css (Entwurf)
python3 $SK/scripts/copy_icons.py icons.json --pack <dein Icon-Paket> && python3 build.py   # -> *.html + index.html
python3 -m http.server 8870 --bind 127.0.0.1    # run_in_background; oder den launch.json-Eintrag unten + preview_start

.claude/launch.json im Spiel-Repo (dann mcp__Claude_Browser__preview_start {name: "ui"}):

{ "version": "0.0.1", "configurations": [
  { "name": "ui", "runtimeExecutable": "python3",
    "runtimeArgs": ["-m", "http.server", "8870", "--bind", "127.0.0.1", "--directory", "ui"], "port": 8870 } ] }

Bearbeite build.py (es ist die Quelle der Wahrheit; bearbeite niemals generierte .html-Dateien von Hand). Die wichtigsten Regeln:

  • 1920×1080-Bühne, absolute px; gemeinsame Komponenten (plate, panel, card, T, I), sodass Geschwister eine Behandlung teilen; nur Farben variieren. Styling kommt von Tokens: kit.css (Struktur) -> styles/<voreinstellung>.css (UI_STYLE=glass python3 build.py zum Wechseln) -> style.css (dieses Spiel). ?style=glass zeigt Vorschau live.
  • Export-Marker: grp(name, html, anchor) = ein Roblox-Frame auf oberster Ebene, verankert an einem Bildschirmrand; name= auf jedem Live-Label/Icon/Button; sub(..., btn=True, opens='Shop'); hid=True für exportierte, aber verborgene Zustände. PIPELINE.md Abschnitt 2 hat die vollständige Tabelle.
  • Alle Zustände auf states.html; Handy-Layout (hud_phone.html); jedes Laufzeitelement (Toasts, Bestätigung, Belohnung, Tutorial, Billboards) auf templates.html; zeige Teile im Kontext über einem echten Spiel-Capture, sobald eines existiert.
  • Keine doppelten Anführungszeichen in inline style="..."; kein Element namens Active/Visible/Position...; verwende hid (Deckkraft 0), niemals display:none, für Dinge, die das Spiel umschaltet.
  • Selbstprüfung: Öffne jede Seite mit ?check im Browser-Panel (checkOverflow() muss keine Überläufe und keine kaputten Bilder zurückgeben); erstelle 2 Headless-Aufnahmen (REVIEW_LOOP.md) und betrachte sie.

5. Stopp: Der Entwickler prüft es

Zeige style.html + den ersten Bildschirm in der ersten Runde, dann den Rest (REVIEW_LOOP.md). Warte auf ein explizites Ja. Jede Korrektur: finde die allgemeine Regel, schreibe sie in LESSONS.md (Regel, dann warum), wende sie überall an, teile dem Entwickler in einem Satz mit, was du gespeichert hast. Keine Roblox-Arbeit vor der Freigabe.

6. In Roblox importieren (nach Freigabe)

Vollständige Details: PIPELINE.md. Aus ui/ mit laufendem Server:

# nur beim ersten Import: die Luau-Laufzeit + Builder (dann ersetze "<Gui>" in ../roblox/ui/client/UI.luau mit rbx.json "gui")
mkdir -p ../roblox/ui/client && cp -n $SK/templates/luau/*.luau ../roblox/ui/ && cp -n $SK/templates/luau/client/*.luau ../roblox/ui/client/
rm -f ../roblox/ui/LoadingScreen.client.luau ../roblox/ui/CrateRoll.luau   # diese leben in ReplicatedFirst / ReplicatedStorage
node $SK/scripts/export.mjs              # Layout-JSON + 2 transparente PNGs pro Raster-Teil -> rbx/out/
python3 $SK/scripts/gen.py               # Data_<Screen>.luau, Data_Templates, Data_Manifest -> luau_out; art -> rbx/out/upload
python3 $SK/scripts/mock.py && node $SK/scripts/mockshot.mjs   # Offline-Roblox-Semantik-Render: mittlere Differenz 1-3 pro Bildschirm
python3 $SK/scripts/ledger.py 20         # nächste hochzuladende URLs; hochladen mit mcp__Roblox_Studio__upload_image(+studio_id),
                                         # dann: echo '<result json>' | python3 $SK/scripts/ledger.py 20 ; wiederholen bis 0 übrig
python3 $SK/scripts/assets.py            # AssetIds.luau
python3 $SK/scripts/bundle.py            # rbx/out/<Gui>Build.rbxmx

Hochladeregeln: <= 20 pro Stapel, öffne den Platz der GRUPPE, wenn das Spiel der Gruppe gehört, lade nie erneut hoch, was der Ledger hat, überprüfe fremde IDs. Dann in Studio über robloxstudio: zerstöre den alten ServerStorage.<Gui>Build -> import_rbxm der .rbxmx in ServerStorage -> require(game.ServerStorage.<Gui>Build.Builder).build() -> aktiviere das Gui, Builder.fit() zweimal, deaktiviere. Niemals set_script_source (verunstaltet \n); immer .rbxmx + import_rbxm. Verdrahte den Spielcode (der Controller startet UI + UIKit; Demo-Zahlen nur mit dem Gui-Attribut PreviewMode): client/UI.luau (öffnen/schließen/zurück, saftige Buttons mit Button/Opens-Attributen, Escape, Scrim, Popup-Queue, Count-ups) + UIKit.luau (Template-Vertrag: klonen, set mit Shadow-Zwillingen, Icons, Balken, Plural/Artikel, worldLabel) + NumberFormat.luau. Spielcode klont Vorlagen; er baut nie ein Aussehen mit Instance.new. Protokolliere jede Laufzeitänderung an importierten Bildschirmen (PIPELINE.md Abschnitt 8).

7. In Studio verifizieren

VERIFY.md, in der Reihenfolge: keine leeren Bilder; Passungsverhältnisse; PropertySweep.atSizes bei 1920×1080 / 1366×768 / 844×390; den Edit-Mode-Harness (klone das Gui, require das Klon-UI, treibe es, UI.destroy(), Archivable=false); Playtest nur bei Bedarf (prüfe, dass kein anderer Playtest läuft): ein Magenta-Capture ist KEINE kaputte UI; echte Klicks bei AbsolutePosition + size/2 +58 px; Handy-Geräteprofil; Schnellklick-Test; Listen aktualisieren in place. luau-analyze --mode=nonstrict für jede Client-Datei; check_copies.py, damit Studio-Kopien mit der Festplatte übereinstimmen.

8. Iterieren

Neues Feedback -> LESSONS.md -> HTML -> Freigabe -> nur die geänderte Seite exportieren -> gen -> Ledger lädt nur neue Kunst hoch -> bundle -> Builder.buildScreen("<Screen>") (ein Panel an Ort und Stelle) oder build() -> fit -> verifizieren.

Niemals

Emojis oder ein zweites Icon-Paket; KI-generierte Icons; Icon-Paket-Dateien, die an ein Modell gesendet werden, wenn die Lizenz die KI-Nutzung verbietet; in Bilder eingebackener Text; Import vor Freigabe; manuelles Bearbeiten von Data_*.luau; set_script_source; Demo-Werte, die geschrieben werden, während der echte Spiel-Client läuft; automatisch eingeforderte Belohnungen; eine Linie oder ein Marker, der über einem Preis gezeichnet wird; spielspezifische IDs oder Namen innerhalb dieses Skill-Ordners.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

zriptic/roclicks-skills

The end-to-end pipeline for making a Roblox game with your AI agent, from idea to launch and live updates. It runs phases in order (concept and study, design and economy sim, world, models, systems code, UI, VFX, audio, QA, thumbnails and publishing, analytics and live ops) and calls the right skill and tools for each, with standing rules and measured Studio gotchas. Use whenever the developer wants to make, remake, port or clone a Roblox game, start a new game, continue or finish one, plan a game, "do the whole thing", or asks what's next on a game. For one narrow task (just a UI, just an effect) use that skill directly.

zriptic/roclicks-skills

Make gameplay trailers for Roblox games, end to end. It plans a shot list from the game's GAME.md, drives the character in a Studio playtest so it looks hand-played (TrailerDriver.luau handles waypoints, prompts, remotes and a drifting third-person camera), adds cinematic camera moves (CameraRig.luau dolly, orbit, crane, push-in and whip, synced to game events), records only the Studio viewport with macOS screencapture, and edits with ffmpeg (speed ramps, whips, crossfades, title cards with emoji, a music bed with ducking and loudnorm). It exports the 30 s 1920x1080 Roblox video thumbnail cut and a 9:16 Shorts/TikTok cut, and runs QA with a contact sheet. Use whenever the user asks for a trailer, promo video, gameplay video, video thumbnail, teaser, TikTok or YouTube Short of a Roblox game, to "record it", "make it look like I'm playing", "edit a video of the game", or to film or capture gameplay or a cinematic flythrough in Studio.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community