NightyCode
Roblox profile
Back to Nighty Design Nighty Design

The Nighty plugin & guide

Bring your Nighty Design designs into Roblox Studio with one paste. Install the free Nighty plugin once, then copy on the website and paste in Studio. Your icons and images are uploaded for you.

Download Nighty Open Nighty Design Get the app

Version 1.0.4 · Free · Nighty.rbxmx · Roblox Studio on Windows and Mac

  1. Design on the website

    Frames, text, images and icons, laid out for every screen. It saves on your device by itself.

  2. Export to Studio Copy for the Studio plugin NCUI1:1/1:9f2c…

    Copy one code

    Export, choose Roblox Studio, then "Copy for the Studio plugin". The code carries the whole design and its images.

  3. Nighty Ctrl+V Import 3 icons uploaded

    Paste in Studio

    Open the plugin, click the paste box and press Ctrl+V. Your UI is built and your icons are uploaded.

Get the app

Nighty Design on your PC, Mac, phone or tablet: its own window and icon, and it works offline. Free.

Install Nighty Design

  • Windows PC

    Chrome or Edge

    1. Open Nighty Design and click Install app.
    2. It goes in your Start menu and taskbar.

  • Mac

    Chrome, Edge or Safari

    1. Chrome or Edge: click Install app.
    2. Safari: File → Add to Dock.

  • Android

    Chrome

    1. Tap Install app.
    2. Or ⋮ → Add to Home screen.

  • iPhone and iPad

    Safari

    1. Tap Share.
    2. Tap Add to Home Screen.

Install the plugin (once)

  1. Download the plugin

    Get Nighty.rbxmx with the button above. It is free and works with Roblox Studio on Windows and Mac.

  2. Put it in the Plugins folder

    In Roblox Studio, open the Plugins tab and click Plugins Folder. Move the downloaded file into that folder.

  3. Restart Studio

    Close Studio and open it again. The Nighty button is now in the Plugins tab. You only do this once.

The Plugins folder is %LOCALAPPDATA%\Roblox\Plugins on Windows and Documents/Roblox/Plugins on a Mac.

Bring a design into Studio

  1. Design on the website

    Open Nighty Design and build your UI. It saves on your device by itself, nothing to set up.

  2. Copy the code

    Click Export, choose Roblox Studio, then Copy for the Studio plugin.

  3. Paste it in the plugin

    In Studio, click the Nighty button, click the paste box and press Ctrl+V (Cmd+V on a Mac).

  4. Import

    Check the short summary and click Import. Your UI appears in StarterGui, or inside the object you selected.

  5. Your images upload by themselves

    Nighty uploads your icons and images to your Roblox account for you. If Studio doesn't let it yet, Nighty tells you what to switch on (usually File → Beta Features → CreateAssetAsync Luau API, then restart Studio).

Update it later

  1. Change your design

    Edit it on the website as much as you like.

  2. Copy and paste again

    The plugin updates the UI you imported before: changed parts are updated, new parts are added and removed parts are deleted.

  3. Your own work stays

    Scripts and objects you added in Studio yourself are never touched. One Ctrl+Z undoes a whole import.

Bring Studio UI into the designer

  1. Select it in Studio

    Pick the ScreenGui or frame in the Explorer.

  2. Export from the plugin

    Click Export to designer in Nighty and save the file as .rbxmx.

  3. Import on the website

    In Nighty Design, click Import and pick the file. It stays linked, so your next paste updates the same objects.

Get a new version of Nighty

  1. Nighty tells you

    Once a day, when you open its window, Nighty checks this site and shows a small card when a new version is out: How to update, Later or Don't check. The first time, Studio asks whether Nighty may reach nightkilleryt.com: choose Allow.

  2. Download it again

    Get the new Nighty.rbxmx with the button at the top of this page.

  3. Replace the old file

    Put it in the Plugins folder in place of the old one, with the same name Nighty.rbxmx (if your browser named it "Nighty (1).rbxmx", rename it). Then restart Studio.

  4. Nothing is lost

    Your settings, the images the plugin already uploaded and the UI in your places all stay. The next paste updates them as before.

Latest release

Nighty 1.0.4

Paste a design from Nighty Design and get real Roblox UI in Studio: images uploaded for you, updates that keep 3D views, texts that scale right, scrolls as designed, and a note when Nighty updates.

Have Nighty 1.3.1 or older? This one is newer: download it again.

Connect an AI (MCP)

Let Claude, Codex or another AI app that uses MCP work in Nighty Design, on your computer only.

  1. Tell your AI

    Paste the line into Claude Code, Codex, Claude Desktop or another AI app. It sets itself up and tells you a pairing code.

  2. Type the code

    In Nighty Design: Preferences → Connect AI (MCP), turn it on, and type the code. Then start a new chat in your AI app.

  3. Ask the AI

    It sees your design, builds screens with auto layout, changes colors, exports. Every change is one step you can undo, and Stop on the AI connected pill ends it.

Tell your AI
Connect yourself to Nighty Design: read https://nightkilleryt.com/tools/ui-designer/ai-setup.txt and follow it (you may add its MCP server and run its pairing command), then tell me the pairing code.

Connect an AI: the full guide Install in Claude Desktop

Local only: Nighty MCP runs on your computer and talks to your browser directly, so nothing goes through this site. Chrome or Edge may ask to let the site reach apps on this device: choose Allow. Safari may block it: use Chrome, Edge or Firefox.

Questions

Does it work offline?
Yes. Open Nighty Design once with internet and your browser keeps a copy, so it also works without internet. Use Install app (on the projects screen, or Help → Install as an app) to give it its own icon and window. Your projects stay on your device.
Is it really free?
Yes. Nighty Design and the Nighty plugin are free, with no account, no sign-up and no watermarks.
Does my design go to your website?

No. Your projects are saved only on your own device (in your browser, or in a file you pick). The code you copy carries the design itself, straight from your browser to Studio. Nothing goes through this site.

More in the privacy policy.

Can I see the pictures of UI I bring back from Studio?

Yes, if you choose it: tick Show Roblox pictures and fonts when you import, or choose Roblox → Get Roblox pictures and fonts. Their picture IDs then go to this site, which asks Roblox for them. The pictures come from Roblox's image servers and stay on your device, so they show offline too.

Back in Studio they keep the same IDs: nothing is uploaded again.

My UI uses a font from the Creator Store. Can I see it?

Yes, with the same choice: Show Roblox pictures and fonts when you import, or Roblox → Get Roblox pictures and fonts. Until then the text shows in Builder Sans. The font's ID goes to this site, which gets the public font from Roblox once and keeps it; the font then stays on your device like your own fonts, so it works offline and in every export.

Back in Studio the text keeps the same font, weight and style.

Why can't the plugin upload my images?

Uploading from a plugin is still a beta in Roblox Studio. Turn on File → Beta Features → CreateAssetAsync Luau API, restart Studio and import again. You also need to be signed in to Studio, and for a group, allowed to create its assets.

If Studio ever asks for permission, allow it (you can change it later under Plugins → Manage Plugins). Without uploads, Nighty still imports your design, with empty images you can fill in later.

Where do my images go?
To your Roblox account (or a group you choose in the plugin settings), just like images you upload in the Creator Hub. Each image is uploaded once: the plugin remembers it for the next import.
The code is very long. Is that okay?
Yes, it holds your images too. A very big design is split into parts ("Copy part 1 of 2"): paste them one after another. Or download the design as a file and use Import file in the plugin.
Why does Studio ask to let Nighty reach nightkilleryt.com?
So Nighty can tell you when a new version is out. Once a day, when you open its window, it reads one small file from this site; nothing about you or your designs is sent. Choose Allow (Plugins → Manage Plugins changes it later). If you'd rather not, choose Deny, or turn it off in the plugin: Settings → Updates → Don't check. Everything else works the same.
The plugin button does not show up
Check that the file is in the Plugins folder (Plugins tab → Plugins Folder) and restart Studio. If Studio turned the plugin off, turn it on again under Plugins → Manage Plugins.
Can I use it without the plugin?
Yes. Export also gives you code for Studio's command bar (View → Command Bar), or a model file to drag into Studio. With those two, images need their Roblox IDs, which you can type in the export window.
Can I show a 3D model in my UI?
Yes: add a 3D view (Roblox → Add 3D view) and put the model in it in Studio. Later updates from Nighty Design change only its box and the UI around it, never the model, its camera or its lights.
Can I share or sell the plugin?
No. Nighty is free to use in Roblox Studio for your own games and projects, and the UI you make with it is yours. Please don't sell it, re-upload it or share it (not even a changed copy), and don't use its code anywhere else: people get it from this page. The full license is at /legal/license.
Where do I get help with the editor itself?
Click the round ? in Nighty Design: it has a short tour, answers to common questions and every keyboard shortcut.
Can I design on my phone or tablet?
Yes, Nighty Design works on phones and tablets. Importing needs Roblox Studio on a computer: move your project there as a file (or through a synced folder like OneDrive), then copy and paste from there.
Ready? Open Nighty Design Free, in your browser, saved on your device. Start designing