Communitygithub.com

Nextora 设计系统

管理 Nextora 父主题及其子主题的颜色、排版、间距令牌、样式变体和可选的访问者颜色/字体切换器。当请求涉及调色板、颜色角色、预设别名、字体系列或字体预设、theme.json 设置、Tailwind @theme 别名、CSS 自定义属性、样式变体、'遵循调色板'、'必须随访问者选择切换'、作用域块颜色或新子主题的外观时使用。

Nextora 设计系统 是什么?

Nextora 设计系统是 Nextora 主题套件中所有外观元素的单一权威来源。它定义了颜色、排版、间距令牌、样式变体和访问者切换器的规则。该技能指导 AI 代理和开发者如何正确配置子主题、Gutenberg 块和模板,以确保它们遵循统一的视觉语言。它提供了详细的工作流程,用于解析目标主题的 `theme.json` 和 CSS 入口文件,并决定是使用核心块支持、theme.json 样式变体还是访问者切换器。该技能强调使用预设变量(如 `var(--wp--preset--color--<slug>)`)和角色变量(如 `--nextora-font-body`),而不是硬编码值,以确保全局更改能传递到所有表面。该系统支持两个独立的样式机制:由所有者选择的持久性 theme.json 样式变体和由访问者控制的运行时切换器,后者仅在通过 `NEXTORA_COLOR_SCHEME_SWITCHER` 特性门控启用时才可用。该技能适用于 **Claude Code**、**Cursor**、**Codex** 和 **GitHub Copilot** 等 AI 代理平台,这些平台需要精确的上下文来生成符合设计系统的代码。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/miketropi/nextora-skills/tree/main/skills/nextora-design-system

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Nextora 设计系统 是做什么的?

本套件外观的唯一权威来源。子主题代码、块代码、模板和样式都以此处定义的调色板、排版、令牌、样式变体和切换器为准。在处理任何新的子主题时,请将此技能与 nextora-child-themes 一同加载;在重构或创建新块时,则与 nextora-gutenberg-blocks 一同加载。

首先加载以下参考资料

文件阅读目的
references/presets-and-switching.md规范的预设标识、角色变量、作用域颜色存储和 PHP 解析、两种样式机制、特性门控、子主题的贡献、发现/合并规则、scheme-switcher.json 语义、运行时优先级、新子主题的 :root 角色默认值以及反声明列表。
../nextora-ecosystem/references/source-map.md出处和根解析词汇。
../nextora-ecosystem/references/quality-gates.md门控以及共享的下游验收配方(第 §8 节)。

参考资料中的值是锚点,非当前数据。在编辑前,请重新读取目标自身的 theme.json、CSS 入口、styles/ 和切换器文件。

有序工作流程

1. 解析目标并识别实时的外观源

确定父主题根目录和活动主题根目录。然后依次读取:theme.json(调色板、渐变、字体系列、大小、间距、styles、customTemplates)、随附的 CSS 入口(父主题为 resources/css/app.css,子主题为自身的入口)、styles/ 目录树以及 scheme-switcher.json。绝不从技能文档、截图或示例子主题中获取调色板值。

2. 决定使用哪种机制

需求使用
作者为块包装器选择颜色/排版/间距核心块 supports + get_block_wrapper_attributes()
块自身表面内的颜色作用域属性,存储为预设别名,输出时解析为预设变量(第 §5 节)
站点范围的备选外观,由所有者选择并保留一个 theme.json 样式变体(styles/*.json、styles/typography/*.json)
面向访问者的预览选择切换器,且只能在门控之后(第 §6 节)
整个子主题的品牌默认值子主题调色板/字体贡献加上 :root 角色默认值(第 §7 节)

优先使用原生 supports。仅在全局样式无法表达时才添加作用域覆盖,并且切勿在此之外发明第二个外观系统。

3. 以增量方式通过标识符更改预设

添加别名;不要重命名或重定向已继承内容的父主题别名。每个表面都读取 var(--wp--preset--color--<slug>)、var(--wp--preset--gradient--<slug>) 或 var(--wp--preset--font-family--<slug>),因此主题 CSS 中的字面量十六进制会使该表面退出调色板更改和切换器。仅在 CSS 构建消耗它们时镜像 Tailwind @theme 别名,并验证每个别名实际指向什么,而不是从旧指南复制别名块——父主题的 --color-secondary 当前解析为 paragraph 预设。

4. 通过 Nextora 角色路由排版

正文、标题和按钮排版通过 --nextora-font-body、--nextora-font-heading 和 --nextora-font-button 解析。theme.json 使用 var(--nextora-font-body);切换器将这三个属性以具体的字体系列堆栈以内联方式写入 <html>。直接读取预设变量的表面不会跟随访问者的字体更改。在 theme.json 中添加或更改字体系列(如果不是系统堆栈,则附带 fontFace 资源),并在提供为预设选择之前加载它。

5. 将作用域颜色存储为预设,在输出时解析

遵循 blocks/advanced-icon/color-utils.ts(normalizeColorForStorage、colorValueForPicker)及其 PHP 对应项(nextora_icon_resolve_color、nextora_icon_hex_to_preset_slug、nextora_ac_resolve_color)中的现有辅助模式:所选预设存储其别名;与调色板条目匹配的全不透明度十六进制将归一化为该条目的别名;自定义颜色和部分透明的 8 位十六进制保持字面量;渐变以相同方式保持预设标识。输出时,存储的别名变为 var(--wp--preset--color--<slug>),以便调色板更改到达表面,8 位十六进制在 sanitize_hex_color() 之前处理。空值表示“主题默认值”且不输出任何内容。重用真实的签名;不要编写并行的解析器。请记住,颜色控件不是消毒器:存储的 HTML 仍然通过 wp_kses_post()。

6. 尊重切换器门控,贡献数据而非代码

访问者切换器仅在 NEXTORA_COLOR_SCHEME_SWITCHER 严格为 true 时才存在。除此之外,没有负载、没有脚本、没有页面主题 CSS、也没有弹出窗口——并且不应编写任何子主题侧替代品来填补空白。子主题贡献数据:styles/color-scheme/*.json、styles/font-preset/*.json、可选地 styles/*.json 用于捆绑变体,以及可选的 scheme-switcher.json 允许列表。在编写新的子主题时,在其后期加载的 CSS 中的 :root 上设置子主题自身的默认角色(参考文档第 §7 节),而不是固定一个预设字体。切勿将切换器实现添加到子主题中。

7. 在真实表面上验证

使用目标自身的脚本(npm run build:css 或 npm run build)构建——切勿编辑 assets/css/* 输出,切勿声明构建会重新生成 assets/js/scheme-switcher.js,后者是手动维护的且不在构建流水线中。然后应用 ../nextora-ecosystem/references/quality-gates.md 及其第 §8 节设计系统配方,以及 references/presets-and-switching.md 第 §10 节中预设特定的步骤。

硬性限制

  • 不要硬编码品牌调色板。值来自目标的活动预设。
  • 不要将旧文档中的过时回退十六进制传播到新的主题 CSS。
  • 不要重新实现切换器,也不要因为示例子主题看起来正确就声称它有效:示例子主题固定了自己的字体并添加了仅子主题的调色板条目。
  • 不要承诺颜色 URL 参数会覆盖已解析的捆绑主题,或者重置会擦除站点编辑器样式。
  • 不要从主题样式表重新设置 wp-admin 界面的样式;编辑器重置保持在编辑器画布内。
  • 不要静默提升声明的 WordPress/PHP 最低版本要求——而是公开该要求。
  • 在交付此工作期间,不要修改父主题或示例子主题。

完成检查

  • 目标主题已解析;每个预设、字体、渐变和令牌都存在于该主题自身的 theme.json/变体中。
  • 遵循了步骤 2 中的机制表;在足够的情况下使用了原生 supports。
  • 排版通过 --nextora-font-* 角色解析,并在预设更改时随之变化。
  • 作用域颜色在颜色与预设匹配时存储预设别名,保持自定义值和部分透明值为字面量,并通过预设变量渲染。
  • 切换器门控得到尊重;子主题贡献仅为数据;任何新的子主题默认对都通过角色在 :root 上声明。
  • 样式变体(持久性)和切换器(运行时预览)被描述和测试为不同的东西。
  • 第 §8 节验收步骤已针对计算后样式执行,或者未验证的表面已明确报告。

边界

仅限 Markdown 指令和源支持的参考资料:无运行时脚本、生成器、复制的主题目录、包管理或安装自动化,也无对父主题或子主题源的编辑。下游构建和浏览器验证命令属于目标主题,并列出在 ../nextora-ecosystem/references/quality-gates.md 中。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

miketropi/nextora-child-themes

Create, bootstrap or audit a child theme of the Nextora parent block theme — the style.css header with Template nextora, the functions.php load order, the single version constant kept in sync with the header, the front-end and editor-canvas asset pipeline with its parent handle dependencies, the child block registrar and inserter category, PHP/i18n conventions, and the optional feature-file layout. Use when a request names a Nextora child, a new child theme name or slug, a child theme header or version bump, child CSS/JS enqueueing, editor canvas styles, a child block folder or block category, porting Nextsaas conventions into a new child, or asks why child code cannot call the parent at file scope. Pair with nextora-design-system for any child that must follow palette or visitor font/colour switching.

miketropi/nextora-ecosystem

Entry point for work on the Nextora block-theme ecosystem — child themes, Gutenberg blocks, design presets and the visitor colour/font switcher, and template/part/pattern composition. Use when a request mentions Nextora or a Nextora child theme, when the task spans more than one of those areas, or when you need the source map and production quality gates for this ecosystem before writing code. Also use to decide which specialist skill a multi-part request needs.

miketropi/nextora-site-composition

Compose the surfaces of a Nextora or Nextora child block theme — HTML templates and template parts, PHP block patterns and their categories, page templates and the template hierarchy, front-page versus posts-index, filesystem patterns referenced from thin templates, core query/archive/search loops and explicit query context, header and footer ownership, and filesystem-versus-Site-Editor customisation. Use when a request asks for a landing page layout, a page template, an archive or search composition, a reusable pattern or section, a header/footer part, a query loop, or asks why a template file edit shows no change on the front end.

nextora-gutenberg-blocks

Build or change Gutenberg blocks in the Nextora parent theme or a Nextora child theme — block.json registration, typed attributes, native visual editing with RichText and media, InspectorControls settings panels, repeatable list editors with modal item editing, render.php output, view scripts, block style variations, and the esbuild block pipeline. Use when a request mentions a block, block.json, edit.tsx, index.tsx, render.php, ServerSideRender, InnerBlocks, a repeater or list editor, a modal item form, an inspector panel, a block category, or "add/restyle a section block" for Nextora.

相关技能