Notrat UI Control Skill

不碰源代码，纯靠 MCP 工具实时操控 Notrat 界面外观的 AI 技能

官网 · 技能文档

---

Notrat 是什么

Notrat 是一款 AI 驱动的桌面 Markdown 编辑器（Electron 应用），把「写作工具」和「AI 工作台」合在一起：

• 📝 专业 Markdown 编辑：TipTap 所见即所得 + 源码双模式、数学公式、图表预览、Excel 表格
• 🤖 内置 AI 对话：侧边栏 / 沉浸式 AI 助手，支持 OpenAI、Anthropic（Claude）及一切 OpenAI 兼容中转站，notrat:// 协议一键导入服务商
• 🧩 MCP 工具生态：文件系统、终端、浏览器自动化、网页搜索等 100+ 工具，AI 可直接操作你的电脑
• ⭐ 技能市场：一键安装社区与官方技能（SKILL），按工作区/全局隔离
• 🧬 自进化引擎：AI 会记录你的使用反馈，用遗传算法持续优化自己的 prompt
• 🎨 DIY 界面定制：不用改源码，AI 通过对话就能实时改造界面样式（本技能的用武之地）

官网：notrat.cn

这个技能是什么

notrat-ui-control 是一个给 AI Agent（Claude Code、Codex、Notrat 内置 AI 等）使用的 Skill。装上之后，AI 就掌握了不碰 Notrat 源代码、纯靠运行时注入来定制界面的完整知识：

用户说「把侧边栏改成暖白色、字体加深」→ AI 直接调用 slot_set_style 完成，立即生效。

技能内容（SKILL.md，约 1000 行实战文档）

章节	内容
工具一览	slot_set_style / slot_set_props / slot_set_behavior / slot_set_content / slot_clear_all / config_set 等 11 个 MCP 工具的用途与场景
主题系统逆向	shadcn/ui 风格 CSS 变量全表（HSL 通道格式）、主题选择器优先级、9 个内置主题
Selector 速查	21 个 UI 区域的精确 CSS 选择器（Activity Bar / Sidebar / 编辑器 / 弹窗…），全部来自源码逆向，不用猜
弹窗与对话框	4 个弹窗的语义钩子类（.notrat-corner-notify* / .notrat-recommend-dialog* 等）+ z-index 层级表
实战配方	14 个开箱即用的 JSON 配置（暖白主题、字体加深、自定义主色调、滚动条…）
调试技巧	CSS 变量改了没效果的 5 步排查法、批量覆盖策略
踩坑实录	CDN 热链保护 403、backdrop-filter 遮挡弹层、Electron 无 prompt()、提交夹带实验代码的排查法
公开接口	NotratPayment 官方推荐技能、公开活动等 API 速查

安装

把整个目录放到 AI Agent 的技能目录即可：

# Claude Code（全局）
~/.claude/skills/notrat-ui-control/

# 或项目级（跟随工作区）
<workspace>/.skills/notrat-ui-control/

使用示例

装好 skill 后，直接对 AI 说人话：

把界面改成暖白色系，文字加深一点

把推荐技能弹窗的边框改成橙色，圆角加大

AI 会生成类似这样的 MCP 调用：

{
  "selector": ":root, :root.theme-minimalist:not(.dark)",
  "styles": {
    "--background": "40 30% 98%",
    "--foreground": "30 8% 8%",
    "--muted-foreground": "30 5% 28%"
  }
}

{
  "selector": ".notrat-recommend-dialog",
  "styles": { "border-color": "#e07856", "border-radius": "20px" }
}

恢复默认：对 AI 说「清除所有覆盖」或调用 slot_clear_all()。

设计原则

• 运行时生效，不改源码：所有定制通过 CSS 变量与样式注入完成，打包出去的应用同样可用
• 可逆：一键清除，随时回到默认主题
• 安全约束：编辑器/输入区域的 pointer-events、user-select 等危险属性被硬拦截；文字颜色必须与背景有对比度

相关链接

• Notrat 官网：https://notrat.cn
• 技能文档：SKILL.md

---

Made with ❤️ by Notrat