Communitygithub.com

zriptic/roclicks-skills

从端到端制作 Roblox 游戏 UI。读取开发者的样式参考（默认使用 stud 风格），从 ui-resources.com 获取纹理，仅从开发者拥有许可的一个矢量图标包中获取图标，用 HTML/CSS 构建包含所有状态的每个屏幕，让开发者检查并批准，然后导出为 JSON、上传图片、生成并在 Studio 中构建真实的 ScreenGui，接入运行时 UI 模块并进行验证。适用于任何 Roblox UI、GUI、HUD、菜单、商店、弹窗、屏幕、面板、框架、按钮、吐司、公告板、教程卡片、宝箱/RNG 转盘或图标需求；当用户提到“UI 资源”、“ui-resources”、“stud 风格”、“HTML UI”、将 UI 导入 Studio，或对 UI 外观提供反馈时使用。

roclicks-skills 是什么？

此技能提供了一个端到端的 Roblox UI 开发流水线，专注于通过 HTML/CSS 优先的工作流程设计新的用户界面。它强制要求使用开发者拥有许可的单一矢量图标包和来自 ui-resources.com 的纹理资源，确保合法合规。工作流程包括读取样式参考生成设计令牌，在 HTML 中构建包含所有状态的屏幕（可切换预设风格，如 Stud 或 Glass），获得开发者批准后导出为结构化 JSON 和图片资产，生成 Luau 数据和 Roblox Studio 可导入的 .rbxmx 文件，并在 Studio 中进行全面验证。该技能整合了丰富的文件结构，包含 LESSONS.md（记录学到的经验教训）、PATTERNS.md（常用 UI 模式如 HUD、商店、宝箱转盘等）、PIPELINE.md（详细的技术管道）以及多个实用脚本，可处理从版本控制轨道到运行时模块接线的每一个细节。它专为 Claude Code 和 Roblox Studio MCP 服务器设计，依赖 Chrome 进行无头渲染和浏览器自动化工具进行页面预览与检查。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/zriptic/roclicks-skills/tree/HEAD/roblox-ui-maker
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

Roblox UI 制作器

许可证优先。 图标来自你（开发者）拥有的一个获得许可的图标包；此技能不附带任何图标和纹理。请阅读你图标包的许可证：大多数付费包允许在你自己的游戏中使用，但禁止转售、再分发、资源包和 AI 训练（如果是这样，切勿将包中的 PNG 发送给任何图像模型）。在游戏仓库中，提交 icons.json 和复制脚本，而不是整个图标包，除非许可证允许。纹理由你从 https://ui-resources.com 下载（参见 UI_RESOURCES.md）；请注明创作者归属。

Figma 导入工具适用于已存在于 Figma 中的设计；此技能用于设计新的 UI（或通过 HTML 重制截图）。

循环流程： 参考 -> 令牌 -> HTML（所有状态）-> 开发者检查 -> 学习 -> 导入 -> 验证。 在接触任何东西之前先阅读 LESSONS.md（所有至今学到的规则及其背后的错误）。它优先于下面任何与之冲突的内容。

本技能包含的文件

文件说明
LESSONS.md每条规则及原因。先阅读此文件；将开发者的反馈写进去（参见 REVIEW_LOOP.md）
STYLE.md将参考读取为令牌；预设；CSS 令牌 -> Roblox 表格
UI_RESOURCES.mdui-resources.com：它是什么、如何查找/下载、stud 纹理及其存放位置
PATTERNS.mdHUD、商店、宝箱转盘及概率、吐司、确认、加载、教程、气泡、目标药丸、列表
PIPELINE.mdHTML -> JSON -> Roblox 的深入流程：rbx.json、导出标记、映射表、分类账、模板、副本
REVIEW_LOOP.md如何展示屏幕、接收反馈、获得批准
VERIFY.md模拟渲染、属性扫描、编辑模式测试套件、游戏测试点击、检查清单
ROBLOX_FACTS.md实测引擎及 MCP 工具事实（内边距、TextSize、上传、捕获）
styles/stud.css（默认预设）、glass.css（深色模拟器预设）
templates/examples/一个可工作的 UI 项目：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/ = 1:1 测量工具

SK=<此技能所在文件夹> 用于下文。你需要的工具：python3（含 PIL 和 numpy）、node 22+、Google Chrome（用于无头渲染；环境变量 CHROME 可覆盖 macOS 路径）、luau-analyze、用于查看页面的浏览器面板或浏览器自动化工具（在 Claude Code 桌面版中：mcp__Claude_Browser__*，通过 ToolSearch 加载）、一个能够运行 Luau 并导入 .rbxmx 文件的 Studio MCP 服务器（此技能基于社区版的 robloxstudio MCP 编写）以及仅用于 upload_image 的内置 Roblox_Studio MCP（参见 ROBLOX_FACTS.md）。

1. 需求、参考、样式（必需：样式参考）

  • 获取需求：哪些屏幕、它们的功能、显示的数据、PC 端和手机端。列出每个屏幕所需的所有状态。
  • 样式参考图片是必需的。 使用开发者提供的图片。如果没有：询问一次（"发送一个你想要的样式的截图；否则我将使用 stud 风格"）。如果他们只说开始：使用 stud 预设。大多数游戏都是 stud 风格。
  • 先执行步骤 4 的项目设置（它会创建 ui/ 文件夹），然后将参考图片保存为 ui/ref.png。布局参考（另一款游戏的商店）与样式参考是分开的。
  • 在 ui/ 文件夹内读取它（STYLE.md 第 2 节）：python3 $SK/scripts/read_reference.py ref.png -> 调色板、轮廓像素、纹理提示、文本样式、密度 + ref_palette.png、ref_zoom.png（读取它以查看 stud 纹理/光泽）以及一个草稿 style.css。通过肉眼确认每个值，只保留所选预设的覆盖项。
  • "像游戏 X" = 受其启发，而非复制，除非开发者说"1:1 重制这个"（那么请参考 LESSONS 第 7 节和 scripts/remake/）。

2. 来自 ui-resources.com 的纹理

Stud 风格必须带有 stud 纹理。此技能不附带任何纹理：请自行从 https://ui-resources.com 下载 ui-resources 的 "Stud texture"（标签为 Stud），如有必要将其转换为真正的 PNG，然后保存为项目中的 ui/stud.png（每块砖 4x4 stud，以 112 像素平铺，使用叠加混合模式）。对于其他任何纹理（纸张、光芒、半色调、背景），请先搜索该网站，并将下载的文件保存在 ui/tex/ 中（参见 UI_RESOURCES.md：过滤器、?tag=Stud、读取惰性加载 URL、用于 WebP 命名 PNG 的 file 和 sips 命令）。在 build.py 的头部注明创作者。

3. 图标：仅限你的图标包

图标来自开发者拥有的一个获得许可的矢量图标包（每个项目一个矢量包；切勿混合使用多个包），绝不能使用 emoji。通过浏览或搜索图标包自己的文件夹或目录来查找图标（例如 find <pack> -iname '*coin*'）。在完成步骤 4 的设置后，编辑 ui/icons.json（{"slug": "包内的图标文件名或路径"}；示例列表是一个起点），然后在 ui/ 中运行 python3 $SK/scripts/copy_icons.py icons.json --pack <your icon pack>（添加 --prefer " Outline" 或你图标包中相应的变体，以优先选择轮廓变体）。绝不使用 emoji，关闭按钮 = 文本 "X"。在声称某个图标缺失之前，先搜索同义词。

4. 用 HTML/CSS 构建每个屏幕

在游戏仓库中设置一次（在步骤 1-3 将任何内容写入 ui/ 之前执行此操作；cp -n 从不覆盖已有文件）：

mkdir -p ui && cp -rn $SK/templates/examples/. ui/ && cd ui
cp <你下载的 stud 纹理> stud.png && cp -r $SK/styles .     # stud 纹理来自 ui-resources.com
cp <参考图片> ref.png && python3 $SK/scripts/read_reference.py ref.png      # -> style.css（草稿）
python3 $SK/scripts/copy_icons.py icons.json --pack <你的图标包> && python3 build.py   # -> *.html + index.html
python3 -m http.server 8870 --bind 127.0.0.1    # run_in_background；或下面的 launch.json 条目 + preview_start

游戏仓库中的 .claude/launch.json（然后使用 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 } ] }

编辑 build.py（它是真理之源；永远不要手动编辑生成的 .html 文件）。最重要的规则：

  • 1920x1080 舞台，使用绝对像素；共享组件（plate、panel、card、T、I），以便同级元素共享相同的处理方式；只有颜色可以变化。样式来自令牌：kit.css（结构）-> styles/<preset>.css（使用 UI_STYLE=glass python3 build.py 切换预设）-> style.css（此游戏专用）。?style=glass 可实时预览。
  • 导出标记：grp(name, html, anchor) = 一个锚定到屏幕边缘的顶级 Roblox 框架；每个实时标签/图标/按钮上的 name=；sub(..., btn=True, opens='Shop')；hid=True 用于导出但隐藏的状态。PIPELINE.md 的第 2 节有完整表格。
  • 所有状态在 states.html 上；手机布局（hud_phone.html）；所有运行时元素（吐司、确认、奖励、教程、公告板）在 templates.html 上；一旦有真实的游戏截图，就在其上下文中展示片段。
  • 内联 style="..." 中不要使用双引号；不要使用名为 Active/Visible/Position... 的元素；对于游戏会切换显示/隐藏的元素，使用 hid（透明度 0），绝不要使用 display:none。
  • 自我检查：在浏览器面板中使用 ?check 打开每个页面（checkOverflow() 必须返回无溢出且无破损图片）；生成 2 张无头渲染截图（参见 REVIEW_LOOP.md）并查看它们。

5. 停止：由开发者检查

在第一轮中展示 style.html 和第一个屏幕，然后展示其余的（参见 REVIEW_LOOP.md）。等待明确的“是”。每次修正：找到通用规则，将其写入 LESSONS.md（规则及原因），全局应用它，用一句话告诉开发者你节省了什么。在获得批准前，不要做任何 Roblox 工作。

6. 导入到 Roblox（获得批准后）

完整详情：PIPELINE.md。在 ui/ 目录下且服务器正在运行时：

# 仅首次导入：Luau 运行时和构建器（然后将 <Gui> 替换为 ../roblox/ui/client/UI.luau 中的 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   # 这些位于 ReplicatedFirst / ReplicatedStorage
node $SK/scripts/export.mjs              # 布局 JSON + 每个光栅片段的 2 张透明 PNG -> 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   # 离线 Roblox 语义渲染：每个屏幕平均差异 1-3
python3 $SK/scripts/ledger.py 20         # 接下来要上传的 URL；使用 mcp__Roblox_Studio__upload_image(+studio_id) 上传，
                                         # 然后：echo '<result json>' | python3 $SK/scripts/ledger.py 20 ; 重复直到剩余 0 个
python3 $SK/scripts/assets.py            # AssetIds.luau
python3 $SK/scripts/bundle.py            # rbx/out/<Gui>Build.rbxmx

上传规则：每批最多 20 个，当游戏属于群组时打开群组的地图，绝不上传分类账中已有的内容，探测外部 ID。然后在 Studio 中通过 robloxstudio：删除旧的 ServerStorage.<Gui>Build -> import_rbxm 将 .rbxmx 导入到 ServerStorage -> require(game.ServerStorage.<Gui>Build.Builder).build() -> 启用 gui，Builder.fit() 两次，禁用。永远不要使用 set_script_source（它会破坏 \n）；始终使用 .rbxmx + import_rbxm。

接线游戏代码（Controller 启动 UI + UIKit；仅当 gui 设置了 PreviewMode 属性时才使用演示数字）： client/UI.luau（打开/关闭/返回，使用 Button/Opens 属性的动态按钮，Escape 键，遮罩层，弹窗队列，数字增长动画）+ UIKit.luau（模板契约：克隆，使用 Shadow 孪生兄弟设置 set，图标，进度条，复数/冠词，worldLabel）+ NumberFormat.luau。游戏代码克隆模板；它永远不应该使用 Instance.new 来构建外观。记录对导入屏幕的每一次运行时更改（PIPELINE.md 第 8 节）。

7. 在 Studio 中验证

按顺序执行 VERIFY.md：无空图片；适配比例；在 1920x1080 / 1366x768 / 844x390 下运行 PropertySweep.atSizes；编辑模式测试套件（克隆 gui，require 克隆的 UI，驱动，UI.destroy()，Archivable=false）；仅在需要时才进行游戏测试（检查没有其他人的游戏测试正在运行）：品红色捕获不代表 UI 损坏；在 AbsolutePosition + size/2 +58 px 处进行真实点击；手机设备配置文件；快速点击测试；列表原地更新。对每个客户端文件运行 luau-analyze --mode=nonstrict；运行 check_copies.py 以确保 Studio 中的副本与磁盘上的一致。

8. 迭代

新反馈 -> LESSONS.md -> HTML -> 批准 -> 仅导出更改的页面 -> gen -> 分类账仅上传新素材 -> bundle -> Builder.buildScreen("<Screen>")（替换单个面板）或 build() -> fit -> 验证。

禁止事项

使用 emoji 或第二个图标包；AI 生成的图标；在许可证禁止 AI 使用时将图标包文件发送给任何模型；将文本烘焙到图片中；在批准前导入；手动编辑 Data_*.luau；使用 set_script_source；在真实游戏客户端运行时写入演示值；自动领取奖励；在奖品上绘制线条或标记；在此技能文件夹内包含游戏特定的 ID 或名称。

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.

相关技能

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