如何用 UI UX Pro Max 的 --persist 持久化设计系统并用页面覆盖文件跨会话复用？
如何用 UI UX Pro Max 的 --persist 持久化设计系统并用页面覆盖文件跨会话复用【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skillUI UX Pro Max 用--design-system一次能生成一套完整的设计系统模式、风格、配色、字体、反模式但结果默认只打印在终端里换一个会话就没了。--persist的作用就是把这套设计系统落盘成MASTER.md再配合页面覆盖文件让后续会话在写具体页面时能直接读取、并按优先级套用。本文以 Claude 安装的本地 Skill 为例说明如何在 Python 3.x 环境下用--persist持久化设计系统、为某个页面生成覆盖文件并在新会话里按 MASTER 覆盖的优先级复用它们。前提脚本位置与 Python 环境脚本要求 Python 3.x且只用标准库不安装任何依赖、不发起网络请求。运行前需要确认 Skill 已装进项目search.py位于.claude/skills/ui-ux-pro-max/scripts/search.py通过 Continue 安装时把.claude/skills/换成.continue/skills/通过 Droid 安装时用.factory/skills/。完整的安装步骤见 README。后文命令统一以.claude/skills/ui-ux-pro-max/scripts/search.py作为脚本路径请按你的实际安装路径调整。第一步先运行并核对设计系统持久化前建议先跑一次不带--persist的命令核对生成的设计系统是否符合预期python3 .claude/skills/ui-ux-pro-max/scripts/search.py beauty spa wellness service --design-system -p Serenity Spa命令会聚合 product、style、color、landing、typography 多个领域的匹配套用 推理规则 后返回完整设计系统并列出需要避免的反模式。确认输出可用后再执行下一步的持久化。第二步用 --persist 把设计系统落盘--persist配合显式的--output-dir使用把设计系统保存为分层结构python3 .claude/skills/ui-ux-pro-max/scripts/search.py beauty spa wellness service --design-system --persist -p Serenity Spa --output-dir project-root--output-dir project-rootdesign-system/目录会创建在这个目录下。参数默认取当前目录文档明确要求务必显式传入、指向项目根否则文件会落到错误的地方。project-root是你项目根目录的实际路径请替换。-p Serenity Spa项目名用于生成目录名。脚本会把项目名转成 slug只保留小写字母、数字、下划线和连字符其余字符含/、\、.统一替换为-例如Serenity Spa→serenity-spa。运行成功后会创建design-system/serenity-spa/MASTER.md——全局唯一事实来源收录所有设计规则design-system/serenity-spa/pages/——存放页面级覆盖文件的目录MASTER.md 的内容由脚本生成包含配色表、字体、间距变量、阴影、组件规格按钮/卡片/输入/弹窗的 CSS、风格指南、页面模式、反模式和交付前检查清单。终端会输出持久化确认下面是文档示例实际目录取决于你传入的--output-dir✅ Design system persisted to design-system/serenity-spa/ design-system/serenity-spa/MASTER.md Usage: When building a page, check design-system/serenity-spa/pages/[page].md first. If it exists, its rules override MASTER.md. Otherwise, use MASTER.md.第三步为某个页面生成覆盖文件当某个页面需要偏离 MASTER 里的通用规则时加--page参数生成页面级覆盖文件python3 .claude/skills/ui-ux-pro-max/scripts/search.py beauty spa wellness service --design-system --persist -p Serenity Spa --page booking --output-dir project-root--page booking页面名会生成design-system/serenity-spa/pages/booking.md同样经过 slug 化。覆盖文件只记录相对于 MASTER 的偏差包含布局、间距、字体、配色、组件等覆盖项以及推荐项并在文件头部明确标注「本文件规则覆盖 MASTER.md」。生成脚本会基于页面名和查询词做检索自动推断页面类型并填充这些覆盖项。跨会话复用MASTER 与页面覆盖的优先级持久化后的文件是磁盘上的普通 Markdown因此在新会话里直接读取即可复用。层级检索规则如下读取design-system/project-slug/MASTER.md要构建某个具体页面例如 Checkout时检查design-system/project-slug/pages/checkout.md是否存在若该页面文件存在其规则覆盖MASTER否则只使用 MASTER。文档给出了一段可直接使用的上下文感知提示词方括号内容按实际情况替换I am building the [Page Name] page. Please read design-system/[project-slug]/MASTER.md. Also check if design-system/[project-slug]/pages/[page-name].md exists. If the page file exists, prioritize its rules. If not, use the Master rules exclusively. Now, generate the code...其中[Page Name]是页面名[project-slug]是第二步生成的项目 slug[page-name]是对应的页面覆盖文件名。MASTER.md 已存在时如何判断默认不覆盖避免丢失既有的设计决策若MASTER.md已存在且未加--force持久化会被跳过状态为skipped_exists终端打印警告文档示例⚠️ design-system/serenity-spa/MASTER.md already exists and was not modified. Read it first to check for prior design decisions, then re-run with forceTrue / --force to overwrite.先阅读现有MASTER.md判断是否需要覆盖再决定是否追加--force。没有明确理由时保留现有文件不变。即使MASTER.md已存在只要带--page脚本仍会创建新的页面覆盖文件且不改动 MASTER已存在的页面文件默认同样被跳过除非加--force。结果验证按以下条件确认持久化与复用路径已建立终端出现✅ Design system persisted to ...并列出已创建的MASTER.md和页面覆盖文件在design-system/project-slug/下能看到MASTER.md和pages/目录打开MASTER.md确认配色、字体、组件规格与第一步核对的设计系统一致若带--pagepages/page-slug.md存在且只记录了相对 MASTER 的偏差新会话按上文优先级提示词读取能正确命中 MASTER 或对应页面覆盖文件。若 MASTER 已存在终端出现的是skipped_exists警告而非创建成功提示此时应核对文件内容或改用--force而不是认为持久化失败。边界与限制--persist只负责把--design-system的结果落盘不改变设计系统本身的生成逻辑设计拨盘--variance/--motion/--density可在同一命令里附加但它们只影响生成内容与持久化机制无关。目录与文件名都经过 slug 化因此含斜杠或特殊字符的--page名不会造成路径穿越。文件只在你显式传入--force或手动编辑时才会被改动脚本自身默认不覆盖已存在的 MASTER 与页面文件。【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考