Menu
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/hhhh124hhhh/godot-mcp --skill godot-ui-designerO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Exibindo SKILL.md
Baseado na classificação ocupacional SOC
| 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设计知识