Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/hhhh124hhhh/godot-mcp --skill godot-ui-designerThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | godot-ui-designer |
| description | Godot UI界面系统开发专家，支持自然语言描述自动创建菜单、HUD、对话框、响应式布局等完整UI系统 |
重要提示: 本技能的所有代码示例均基于 Godot 4.5 最佳实践，使用 GDScript 语法。 确保在 Godot 4.x 环境中使用，特别注意 Control 节点和信号系统的新特性。
godot-ui-designer 是专门用于 Godot 游戏UI界面系统开发的智能化技能，能够根据用户的自然语言描述自动创建完整的用户界面系统，包括主菜单、游戏内HUD、设置界面、对话框、响应式布局等。
用户: "我需要一个像王者荣耀那样的游戏HUD，包含血条、蓝条、技能栏和地图"
系统: 自动实现：
- 顶部血条和蓝条显示
- 底部技能栏（4-6个技能）
- 右上角小地图系统
- 左上角角色信息和等级
- 击杀信息和连击提示
用户: "创建一个现代化的游戏主菜单，有背景动画和音效"
系统: 智能生成：
- 动态背景效果
- 渐显式菜单选项
- 悬停和点击动画
- 设置和关于对话框
- 背景音乐和音效集成
用户: "做一个完整的设置界面，包含图形、音频、控制和游戏设置"
系统: 全面开发：
- 图形设置（分辨率、全屏、画质）
- 音频控制（主音量、音乐、音效）
- 控制配置（键位映射、手柄支持）
- 游戏性选项（难度、字幕、辅助功能）
用户: "确保UI在手机和平板上都能正常显示"
系统: 自动适配：
- 不同屏幕分辨率的布局调整
- 触控友好的按钮大小
- 平板模式的优化布局
- 横竖屏切换支持
# 分析UI需求
- 识别界面类型和功能
- 确定目标平台和屏幕尺寸
- 提取设计风格和交互要求
# 设计UI架构
- 选择合适的Control节点类型
- 规划界面层次结构
- 设计数据绑定机制
# 创建视觉元素
- 设计配色方案和主题
- 创建图标和背景资源
- 配置字体和文字样式
# 实现交互逻辑
- 添加按钮和事件处理
- 实现动画和过渡效果
- 配置输入和导航系统
create_node - 创建UI节点（Button、Label、Panel等）configure_node - 配置UI节点属性add_child_node - 添加子UI节点style_node - 设置UI节点样式create_scene - 创建UI场景instance_scene - 实例化UI预制件save_scene - 保存UI场景load_scene - 加载UI场景create_resource - 创建UI资源（Theme、StyleBox等）import_asset - 导入UI素材（图标、字体等）configure_resource - 配置资源属性play_scene - 测试UI场景get_node_properties - 获取UI节点属性set_node_property - 设置UI节点属性simulate_input - 模拟用户输入测试# 智能按钮组件
class_name SmartButton extends Button
@export var hover_scale: float = 1.1
@export var click_sound: AudioStream
@export var animation_duration: float = 0.2
func _ready() -> void:
mouse_entered.connect(_on_hover)
pressed.connect(_on_pressed)
# 动态血条组件
class_name HealthBar extends ProgressBar
@export var animate_changes: bool = true
@export var animation_speed: float = 5.0
var target_health: float
func _process(delta: float) -> void:
if animate_changes and value != target_health:
value = move_toward(value, target_health, animation_speed * delta)
# 小地图系统
class_name Minimap extends Control
@export var minimap_size: Vector2 = Vector2(200, 200)
@export var world_size: Vector2 = Vector2(1000, 1000)
var player_marker: TextureRect
var enemy_markers: Array[TextureRect]
func update_player_position(world_pos: Vector2) -> void:
var minimap_pos = (world_pos / world_size) * minimap_size
player_marker.position = minimap_pos
# 技能栏系统
class_name SkillBar extends HBoxContainer
@export var skill_count: int = 4
var skill_slots: Array[SkillSlot]
func _ready() -> void:
for i in skill_count:
var slot = SkillSlot.new()
slot.skill_index = i
add_child(slot)
skill_slots.append(slot)
# 自适应布局管理器
class_name ResponsiveLayout extends Control
@export var mobile_breakpoint: int = 768
@export var tablet_breakpoint: int = 1024
func _ready() -> void:
get_tree().get_window().size_changed.connect(_on_screen_resized)
_on_screen_resized()
func _on_screen_resized() -> void:
var screen_size = DisplayServer.screen_get_size()
var layout_type = _determine_layout_type(screen_size.x)
_apply_layout(layout_type)
func _determine_layout_type(width: int) -> String:
if width < mobile_breakpoint:
return "mobile"
elif width < tablet_breakpoint:
return "tablet"
else:
return "desktop"
# 动态网格布局
class_name DynamicGrid extends GridContainer
@export var min_columns: int = 2
@export var max_columns: int = 6
@export var item_size: Vector2 = Vector2(100, 100)
func _ready() -> void:
custom_minimum_size = Vector2(min_columns * item_size.x, item_size.y)
resize_children()
func resize_children() -> void:
var available_width = size.x
var columns = clamp(int(available_width / item_size.x), min_columns, max_columns)
columns = columns
for child in get_children():
if child is Control:
child.custom_minimum_size = item_size
# UI动画管理器
class_name UIAnimationManager extends Node
var tween: Tween
func slide_in(node: Control, direction: Vector2, duration: float = 0.5) -> void:
var start_pos = node.position - direction * 100
var end_pos = node.position
node.position = start_pos
node.modulate.a = 0.0
create_tween().parallel()\
.tween_property(node, "position", end_pos, duration)\
.set_trans(Tween.TRANS_CUBIC)\
.set_ease(Tween.EASE_OUT)
create_tween().parallel()\
.tween_property(node, "modulate:a", 1.0, duration)
func bounce_effect(node: Control) -> void:
var original_scale = node.scale
create_tween().tween_property(node, "scale", original_scale * 1.2, 0.1)\
.set_trans(Tween.TRANS_BACK)\
.set_ease(Tween.EASE_OUT)
create_tween().tween_property(node, "scale", original_scale, 0.2)\
.set_trans(Tween.TRANS_BOUNCE)\
.set_ease(Tween.EASE_OUT)
# 主题管理器
class_name ThemeManager extends Node
@export var light_theme: Theme
@export var dark_theme: Theme
@export var current_theme: Theme
func _ready() -> void:
apply_theme(current_theme)
func switch_theme(theme_name: String) -> void:
match theme_name:
"light":
current_theme = light_theme
"dark":
current_theme = dark_theme
apply_theme(current_theme)
func apply_theme(theme: Theme) -> void:
# ✅ 正确：检查场景树是否存在和当前场景是否可用
if get_tree() and get_tree().current_scene:
var ui_root = get_tree().current_scene
_apply_theme_recursive(ui_root, theme)
else:
push_warning("场景树未准备就绪，无法应用主题")
func _apply_theme_recursive(node: Node, theme: Theme) -> void:
if node is Control:
node.theme = theme
for child in node.get_children():
_apply_theme_recursive(child, theme)
# 数据绑定管理器
class_name DataBindingManager extends Node
var bindings: Dictionary = {}
func bind_ui_element(ui_node: Control, data_source: Object, property: String) -> void:
var binding = {
"ui_node": ui_node,
"data_source": data_source,
"property": property
}
bindings[ui_node.get_instance_id()] = binding
# 连接数据源变化信号
if data_source.has_signal("changed"):
data_source.changed.connect(_on_data_changed.bind(ui_node))
func _on_data_changed(ui_node: Control) -> void:
var binding = bindings.get(ui_node.get_instance_id())
if binding:
var value = binding.data_source.get(binding.property)
_update_ui_value(ui_node, value)
func _update_ui_value(ui_node: Control, value) -> void:
if ui_node is Label:
ui_node.text = str(value)
elif ui_node is ProgressBar:
ui_node.value = value
elif ui_node is TextureProgressBar:
ui_node.value = value
# 游戏HUD主控制器
class_name GameHUD extends CanvasLayer
@onready var health_bar: ProgressBar = $TopPanel/HealthBar
@onready var mana_bar: ProgressBar = $TopPanel/ManaBar
@onready var level_label: Label = $TopPanel/LevelLabel
@onready var minimap: Minimap = $MinimapContainer/Minimap
@onready var skill_bar: SkillBar = $BottomPanel/SkillBar
@onready var kill_feed: VBoxContainer = $RightPanel/KillFeed
var player: Player
func _ready() -> void:
# 连接玩家信号
player.health_changed.connect(_on_health_changed)
player.mana_changed.connect(_on_mana_changed)
player.level_up.connect(_on_level_up)
func _on_health_changed(new_health: int, max_health: int) -> void:
health_bar.max_value = max_health
health_bar.value = new_health
# 血量低时显示红色警告
if new_health < max_health * 0.3:
health_bar.modulate = Color.RED
create_low_health_effect()
func _on_mana_changed(new_mana: int, max_mana: int) -> void:
mana_bar.max_value = max_mana
mana_bar.value = new_mana
func _on_level_up(new_level: int) -> void:
level_label.text = "Lv. %d" % new_level
create_level_up_effect()
# 设置界面控制器
class_name SettingsMenu extends Control
@onready var tab_container: TabContainer = $TabContainer
@onready var graphics_tab: Control = $TabContainer/Graphics
@onready var audio_tab: Control = $TabContainer/Audio
@onready var controls_tab: Control = $TabContainer/Controls
func _ready() -> void:
_load_settings()
_setup_controls()
func _load_settings() -> void:
# 加载图形设置
var resolution_option = graphics_tab.get_node("ResolutionOption")
resolution_option.selected = _get_current_resolution_index()
# 加载音频设置
var master_slider = audio_tab.get_node("MasterVolume")
master_slider.value = AudioServer.get_bus_volume_db(AudioServer.get_bus_index("Master"))
func _save_settings() -> void:
# 保存图形设置
var resolution_option = graphics_tab.get_node("ResolutionOption")
var selected_resolution = resolution_option.get_item_text(resolution_option.selected)
_apply_resolution(selected_resolution)
# 保存音频设置
var master_slider = audio_tab.get_node("MasterVolume")
AudioServer.set_bus_volume_db(AudioServer.get_bus_index("Master"), master_slider.value)
技能状态: ✅ 可用 最后更新: 2025-11-09 兼容性: Godot 4.5+ 依赖: Godot MCP 工具集 + UI设计知识