如何给 UI UX Pro Max 的 styles.csv 添加一个新 UI 风格【免费下载链接】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你想让 ui-ux-pro-max-skill 的风格数据库支持一个新的 UI 风格例如某个新设计语言使search.py能按名称或别名检索到它并随 CLI 资产一起发布。本项目的风格数据以 styles.csv 为唯一事实来源按 CONTRIBUTING.md 的流程改动只发生在src/ui-ux-pro-max/下再同步到cli/assets/。完成本文后你应得到一条通过 CSV 结构校验、能被风格搜索命中的新行以及一个包含同步资产提交的 feature 分支。准备条件工具链Node.js 18 与 npm、Python 3.x、GitBun 仅在你需要本地构建 CLI 时才用到。先 fork 项目并克隆你名下的副本到本地使用你自己 fork 的克隆地址然后安装 CLI 依赖cd ui-ux-pro-max-skill cd cli npm install cd ..记住编辑边界数据与脚本改动一律写入src/ui-ux-pro-max/不要直接修改.claude/、.factory/或cli/assets/下的副本——后者由同步脚本生成。弄清 styles.csv 的列结构与受控取值打开 styles.csv第一行是表头共 29 列顺序固定No,Style Category,Type,Keywords,Primary Colors,Secondary Colors,Effects Animation,Best For,Do Not Use For,Light Mode ✓,Dark Mode ✓,Performance,Accessibility,Mobile-Friendly,Conversion-Focused,Framework Compatibility,Era/Origin,Complexity,AI Prompt Keywords,CSS/Technical Keywords,Implementation Checklist,Design System Variables,Style ID,Aliases,Status,Parent Style ID,Replacement Domain,Replacement ID,Preferred Mode其中若干列的取值受回归测试约束见 test_style_taxonomy.py写新行前先对照现有行列允许/常见取值取自现有数据TypeGeneral、Landing Page、BI/Analytics、Mobile、Platform/Material、Platform/SystemLight Mode ✓ / Dark Mode ✓supported、conditional、not-recommendedPerformance首段必须为cost:low、cost:moderate、cost:high之一后接\|drivers:...如cost:low\|drivers:noneAccessibility首段必须为risk:low、risk:conditional、risk:high之一现有行普遍写作risk:low\|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motionMobile-Friendlyadaptable、conditional、native、not-recommendedFramework Compatibility以\|分隔如tailwind\|css测试断言不允许出现N/10形式的评分ComplexityLow、Medium、HighStatusactive、supplemental、deprecatedPreferred Modeauto、light、dark另外两条测试硬性约束AI Prompt Keywords的英文单词数不超过 40整行任何文本不得出现 “WCAG AA/AAA” 或 “WCAG compliant” 这类等级宣称措辞。包含逗号的字段必须整体加双引号否则 validate-csv.py 会把该行报成字段数过多它的检查项明确包括“unquoted commas”。写入新的风格行No列取当前最大编号加 1文件当前最大为 89。注意回归测试把No 85的行视为“新行”这会触发下文的数据溯源要求。新行按表头顺序补齐 29 个字段。下面是一个待填写的骨架...均为你需要替换的内容受控列已给出文档中实际存在的取值90,风格名称,General,关键词1, 关键词2, ...,主色含 #HEX 等描述,次色描述,效果与动画描述,适用场景,不适用场景,supported,supported,cost:low|drivers:none,risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion,adaptable,◐ Medium,tailwind|css,2020s Modern,Medium,英文设计提示词不超过40个单词,关键 CSS 属性与取值,☐ 检查项1, ☐ 检查项2,--token名: token值,style-id,,active,,,,auto各字段的写法可以直接参照文件中已有行例如liquid-glass第 15 行展示了Type为Platform/Material的完整填法第 2 行minimalism-and-swiss-style展示了通用风格的填法。Status与Parent Style ID的取舍独立新风格用active后三列Parent Style ID、Replacement Domain、Replacement ID留空如果新风格是某个已有风格的变体参照现有supplemental行如vaporwave挂在retro-futurism下把Status设为supplemental并填写Parent Style ID。deprecated及其 Replacement 两列只用于把旧风格迁移到其它域新增风格一般不涉及。Style ID用 kebab-case如liquid-glass、material-you-md3-mobile全文件唯一它必须能被搜索按名称或别名确定性地命中这是回归测试逐行验证过的契约。在>{ entityKind: style, entityId: liquid-glass, sourceFile: styles.csv, sourceKey: { Style ID: liquid-glass }, status: active, verifiedAt: 2026-08-13, sla: manual-verified, appliesTo: [style-search, gallery], confidence: 0.94, sources: [ { type: official, ref: https://developer.apple.com/documentation/TechnologyOverviews/liquid-glass } ] }为你的新风格追加一条同结构记录entityId与sourceKey填你的Style IDverifiedAt填实际核验日期YYYY-MM-DDsources[0].ref填该风格的官方文档地址。验证改动以下命令均在仓库根目录执行。CSV 结构校验python3 scripts/validate-csv.py全部通过时输出形如CSV validation passed: N runtime CSV files checked.N 为当次检查的运行时 CSV 文件数失败时退出码为 1并逐条列出问题典型提示是文件:行号: expected 29 fields, got 30——通常就是某字段里的逗号没加引号。风格搜索命中验证。用风格名称或你登记的别名查询python3 src/ui-ux-pro-max/scripts/search.py 风格名称 --domain style --max-results 1预期第一条结果的Style ID就是新行的Style ID回归测试的契约正是“按名称或别名查询第一结果必须落在这行上”。再按 CONTRIBUTING 的工作流跑一次设计系统生成确认新风格在--design-system模式下可用python3 src/ui-ux-pro-max/scripts/search.py your query --design-system风格分类回归测试python3 -m unittest src/ui-ux-pro-max/scripts/tests/test_style_taxonomy.py注意其中test_curated_state_distribution_is_explicit断言当前状态分布恰好为 active 50、supplemental 29、deprecated 9。新增一行会改变这个分布因此需要同步更新该测试的期望计数否则测试会失败——这是有意为之的护栏提醒维护者显式确认每次数据变更。同步到 CLI 资产并提交校验通过后把改动同步到 CLI 安装器资产cd cli npm run sync:assets cd ..该脚本sync-assets.mjs会先删除再重新复制目标目录覆盖cli/assets/下的data、scripts、templates以及.claude/skills/ui-ux-pro-max/下的data、scripts。副作用要清楚这些目标目录里的任何手工改动都会被丢弃所以一切修改都应在src/ui-ux-pro-max/完成。可选本地构建 CLI 并在临时项目中安装验证需要 Bun。构建后在空目录中执行安装/path/to替换为你本地仓库中cli/dist/index.js的实际路径cd cli bun run build mkdir /tmp/test-project cd /tmp/test-project node /path/to/cli/dist/index.js init --ai claude --offline最后按 PR 规范提交从 main 拉 feature 分支git checkout -b feat/你的特性名你的特性名替换为风格相关的短名提交信息遵循 Conventional Commits新增风格用feat类型CONTRIBUTING 中的示例是feat: add Skeuomorphism 2.0 style to general styles。PR 保持一次一个变更、在描述中引用相关 issue、不要直接推送到main之后等待维护者评审。【免费下载链接】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），仅供参考 如何给 UI UX Pro Max 的 styles.csv 添加一个新 UI 风格？
如何给 UI UX Pro Max 的 styles.csv 添加一个新 UI 风格【免费下载链接】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你想让 ui-ux-pro-max-skill 的风格数据库支持一个新的 UI 风格例如某个新设计语言使search.py能按名称或别名检索到它并随 CLI 资产一起发布。本项目的风格数据以 styles.csv 为唯一事实来源按 CONTRIBUTING.md 的流程改动只发生在src/ui-ux-pro-max/下再同步到cli/assets/。完成本文后你应得到一条通过 CSV 结构校验、能被风格搜索命中的新行以及一个包含同步资产提交的 feature 分支。准备条件工具链Node.js 18 与 npm、Python 3.x、GitBun 仅在你需要本地构建 CLI 时才用到。先 fork 项目并克隆你名下的副本到本地使用你自己 fork 的克隆地址然后安装 CLI 依赖cd ui-ux-pro-max-skill cd cli npm install cd ..记住编辑边界数据与脚本改动一律写入src/ui-ux-pro-max/不要直接修改.claude/、.factory/或cli/assets/下的副本——后者由同步脚本生成。弄清 styles.csv 的列结构与受控取值打开 styles.csv第一行是表头共 29 列顺序固定No,Style Category,Type,Keywords,Primary Colors,Secondary Colors,Effects Animation,Best For,Do Not Use For,Light Mode ✓,Dark Mode ✓,Performance,Accessibility,Mobile-Friendly,Conversion-Focused,Framework Compatibility,Era/Origin,Complexity,AI Prompt Keywords,CSS/Technical Keywords,Implementation Checklist,Design System Variables,Style ID,Aliases,Status,Parent Style ID,Replacement Domain,Replacement ID,Preferred Mode其中若干列的取值受回归测试约束见 test_style_taxonomy.py写新行前先对照现有行列允许/常见取值取自现有数据TypeGeneral、Landing Page、BI/Analytics、Mobile、Platform/Material、Platform/SystemLight Mode ✓ / Dark Mode ✓supported、conditional、not-recommendedPerformance首段必须为cost:low、cost:moderate、cost:high之一后接\|drivers:...如cost:low\|drivers:noneAccessibility首段必须为risk:low、risk:conditional、risk:high之一现有行普遍写作risk:low\|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motionMobile-Friendlyadaptable、conditional、native、not-recommendedFramework Compatibility以\|分隔如tailwind\|css测试断言不允许出现N/10形式的评分ComplexityLow、Medium、HighStatusactive、supplemental、deprecatedPreferred Modeauto、light、dark另外两条测试硬性约束AI Prompt Keywords的英文单词数不超过 40整行任何文本不得出现 “WCAG AA/AAA” 或 “WCAG compliant” 这类等级宣称措辞。包含逗号的字段必须整体加双引号否则 validate-csv.py 会把该行报成字段数过多它的检查项明确包括“unquoted commas”。写入新的风格行No列取当前最大编号加 1文件当前最大为 89。注意回归测试把No 85的行视为“新行”这会触发下文的数据溯源要求。新行按表头顺序补齐 29 个字段。下面是一个待填写的骨架...均为你需要替换的内容受控列已给出文档中实际存在的取值90,风格名称,General,关键词1, 关键词2, ...,主色含 #HEX 等描述,次色描述,效果与动画描述,适用场景,不适用场景,supported,supported,cost:low|drivers:none,risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion,adaptable,◐ Medium,tailwind|css,2020s Modern,Medium,英文设计提示词不超过40个单词,关键 CSS 属性与取值,☐ 检查项1, ☐ 检查项2,--token名: token值,style-id,,active,,,,auto各字段的写法可以直接参照文件中已有行例如liquid-glass第 15 行展示了Type为Platform/Material的完整填法第 2 行minimalism-and-swiss-style展示了通用风格的填法。Status与Parent Style ID的取舍独立新风格用active后三列Parent Style ID、Replacement Domain、Replacement ID留空如果新风格是某个已有风格的变体参照现有supplemental行如vaporwave挂在retro-futurism下把Status设为supplemental并填写Parent Style ID。deprecated及其 Replacement 两列只用于把旧风格迁移到其它域新增风格一般不涉及。Style ID用 kebab-case如liquid-glass、material-you-md3-mobile全文件唯一它必须能被搜索按名称或别名确定性地命中这是回归测试逐行验证过的契约。在>{ entityKind: style, entityId: liquid-glass, sourceFile: styles.csv, sourceKey: { Style ID: liquid-glass }, status: active, verifiedAt: 2026-08-13, sla: manual-verified, appliesTo: [style-search, gallery], confidence: 0.94, sources: [ { type: official, ref: https://developer.apple.com/documentation/TechnologyOverviews/liquid-glass } ] }为你的新风格追加一条同结构记录entityId与sourceKey填你的Style IDverifiedAt填实际核验日期YYYY-MM-DDsources[0].ref填该风格的官方文档地址。验证改动以下命令均在仓库根目录执行。CSV 结构校验python3 scripts/validate-csv.py全部通过时输出形如CSV validation passed: N runtime CSV files checked.N 为当次检查的运行时 CSV 文件数失败时退出码为 1并逐条列出问题典型提示是文件:行号: expected 29 fields, got 30——通常就是某字段里的逗号没加引号。风格搜索命中验证。用风格名称或你登记的别名查询python3 src/ui-ux-pro-max/scripts/search.py 风格名称 --domain style --max-results 1预期第一条结果的Style ID就是新行的Style ID回归测试的契约正是“按名称或别名查询第一结果必须落在这行上”。再按 CONTRIBUTING 的工作流跑一次设计系统生成确认新风格在--design-system模式下可用python3 src/ui-ux-pro-max/scripts/search.py your query --design-system风格分类回归测试python3 -m unittest src/ui-ux-pro-max/scripts/tests/test_style_taxonomy.py注意其中test_curated_state_distribution_is_explicit断言当前状态分布恰好为 active 50、supplemental 29、deprecated 9。新增一行会改变这个分布因此需要同步更新该测试的期望计数否则测试会失败——这是有意为之的护栏提醒维护者显式确认每次数据变更。同步到 CLI 资产并提交校验通过后把改动同步到 CLI 安装器资产cd cli npm run sync:assets cd ..该脚本sync-assets.mjs会先删除再重新复制目标目录覆盖cli/assets/下的data、scripts、templates以及.claude/skills/ui-ux-pro-max/下的data、scripts。副作用要清楚这些目标目录里的任何手工改动都会被丢弃所以一切修改都应在src/ui-ux-pro-max/完成。可选本地构建 CLI 并在临时项目中安装验证需要 Bun。构建后在空目录中执行安装/path/to替换为你本地仓库中cli/dist/index.js的实际路径cd cli bun run build mkdir /tmp/test-project cd /tmp/test-project node /path/to/cli/dist/index.js init --ai claude --offline最后按 PR 规范提交从 main 拉 feature 分支git checkout -b feat/你的特性名你的特性名替换为风格相关的短名提交信息遵循 Conventional Commits新增风格用feat类型CONTRIBUTING 中的示例是feat: add Skeuomorphism 2.0 style to general styles。PR 保持一次一个变更、在描述中引用相关 issue、不要直接推送到main之后等待维护者评审。【免费下载链接】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），仅供参考