技能介绍

解决的问题

在 Notrat 的日常开发或定制中，直接修改源码往往意味着需要理解庞大的 React 组件树与构建逻辑。当只是需要调整 UI 颜色、切换主题或修改交互时，改代码的成本过高且容易引入回归 Bug。Notrat UI Control 就是为了解决这个痛点：在不触碰 Notrat 源代码的前提下，通过 MCP 工具直接对运行中的 UI 进行实时操控与样式覆盖。

工作原理与核心能力

该技能主要依赖一组 MCP 工具来驱动界面变化。其核心工作流程可以概括为以下几个步骤：

读取与探查：使用 config_get_all 或 ui_get_state 获取当前的界面状态、主题配置与活动 Tab 信息。
样式与属性注入：通过 slot_set_style 向特定 CSS 选择器注入样式，或用 slot_set_props 修改 React 组件的 props（如 placeholder）。
内容与交互替换：利用 slot_set_content 替换元素文本，或通过 ui_click、ui_type 模拟真实的用户操作。
主题与配置管理：使用 config_set 或 config_toggle_theme 快速切换明暗主题与全局配置。

关键陷阱在于 Notrat 的 CSS 变量体系。它采用 shadcn/ui 风格的 HSL 无前缀格式，且主题 class 选择器（如 .theme-minimalist:not(.dark)）的优先级高于 :root。因此，注入样式时必须同时声明这两个选择器，否则会被底层主题覆盖。

适用边界与注意点

这个技能非常适合快速原型设计、界面定制以及功能演示。但是，它并非万能。对于需要彻底改变组件内部逻辑的场景，必须依赖 component_modify 进行源码热替换，这就回到了需要源码权限的范畴。此外，大量的 CSS 覆盖可能会导致样式冲突，建议在调试时多使用 slot_clear_all 来恢复默认状态，避免残留样式影响后续开发。