Repository Wiki
Brandon030722/ark-ui-skill

五种风格族配方

五种风格族配方(ark / endfield / exa / popucom / corporate)是 ark-ui 技能的核心决策单元:每种配方把一个产品的视觉性格压缩为一组可执行的调色板、字体、壳层、几何、内容组织与动效规则,供 AI 在设计或重构界面时按产品语义选择其一。

Purpose and Scope

本页覆盖 references/recipes.md 中定义的全部五个风格族配方,包括每个家族的调色板与设计令牌(assets/tokens/ark-ui.tokens.json)、适用场景、壳层与几何规则、内容归属(content ownership)约束、深度适配行为,以及混合选择(hybrid selection)规则。

本页有意留给兄弟页面的话题:

  • 共享视觉语法(排版、网格、线条、动效曲线的跨族通用规则)——见设计语言参考页。
  • 四档应用深度(minimal / moderate / complex / maximal)的完整规范与验收标尺——见深度等级页。
  • 某一族在某档深度下的具体壳层/内容/仪表规则矩阵——见风格族-深度矩阵页。
  • 可运行样例(assets/showcases/ 五个族)与 React 封装(assets/react/ArkUI.jsx)的实现细节。

Overview

ark-ui 技能把"长什么样"与"做到多深"拆成两个正交决策:

  1. 风格族决定界面的视觉性格——色彩、字体、几何、壳层结构与动效气质。
  2. 应用深度决定这种性格覆盖到什么程度——壳层改造、舞台层数、组件覆盖、状态仪表、动效编排与响应式重构。

例如 endfield + minimal 与 endfield + maximal 共享同一种身份,但前者只调整基础识别层(字体、信号色、一条状态规则线),后者会重构整套舞台、状态和动效系统(README.md)。

技能的核心纪律是:只选一个族,不要把所有产品的风格平均化。SKILL.md 的工作流明确要求"Choose one family; do not average every product into one style"(SKILL.md)。只有当产品语义确实需要时才混合两个族,且主族控制壳层与主色,次族只提供一种受控的仪表或插画行为。

本页的配方文件本身带有一条使用指令——只读取被选中的那个族:

markdown
1# Product-family recipes 2 3Read only the family selected for the task. 4 5## Ark: industrial information system 6 7Use for tactical dashboards, operations consoles, media/news portals, game menus, and Rhodes-Island-adjacent requests. 8 9- Palette: near-black, white, cyan `#18d1ff`; optional acid green for download/success only. 10- Type: condensed/extended uppercase Latin + Source Han Sans-style CJK. 11- Shell: black top bar, edge utilities, large art stage, lower metadata baseline. 12- Geometry: 1px white rules, cyan active underline, squared controls, diagonal slash. 13- Content pattern: `INDEX / INFORMATION / OPERATOR / WORLD / MEDIA`, paired with CJK labels and section indices.

Source: references/recipes.md

这条"只读选中的族"的规则本身就是设计意图:防止 AI 把五个族的词汇混在一起,产出既不像 ark 也不像 endfield 的平均化界面。

Architecture

风格族配方位于技能知识管道的中段——上游是 SKILL.md 的触发与选择工作流,下游是令牌文件、可运行样例与 React 组件的落地实现:

Loading diagram...

管道的关键性质:

  • recipes.md 是族维度的唯一权威来源。SKILL.md 指定实现任务要读取 design-language.md、depth-levels.md,然后"只读取 recipes.md 中被选中的那个族";只有做跨族比较或族特定深度行为时才额外读 family-depth-matrix.md(SKILL.md)。
  • 令牌文件与配方一一对应。ark-ui.tokens.json 的 themes 对象恰好包含五个族,每族都提供 ink / paper / signal / state / shell / stage / radius 等语义化键,depths 对象则与深度页的四级一一对应(assets/tokens/ark-ui.tokens.json)。
  • 落地实现通过两个键消费配方:静态页面用 data-ark-theme / data-ark-depth 根属性,React 用 <ArkShell theme depth>,两者都把"族"与"深度"作为独立参数传递(README.md)。

五个族在色彩轴上的分布可以用下面的对照图概括——每族的 signal 色决定了它的视觉签名,而 ink/paper 对决定了它的明暗骨架:

Loading diagram...

五个风格族详解

以下每个小节的结构都镜像 recipes.md 的原始配方结构:用途 → 调色板 → 字体 → 壳层 → 几何 → 内容模式 → 动效 → 内容归属 → 深度适配 → 避免。这些条目不是装饰性建议,而是每个族可被验收的硬约束。

ark:工业信息系统

定位:战术面板、运营控制台、媒体/新闻门户、游戏菜单以及罗德岛邻接(Rhodes-Island-adjacent)请求。

配方原文(节选完整条目):

markdown
1- Palette: near-black, white, cyan `#18d1ff`; optional acid green for download/success only. 2- Type: condensed/extended uppercase Latin + Source Han Sans-style CJK. 3- Shell: black top bar, edge utilities, large art stage, lower metadata baseline. 4- Geometry: 1px white rules, cyan active underline, squared controls, diagonal slash. 5- Content pattern: `INDEX / INFORMATION / OPERATOR / WORLD / MEDIA`, paired with CJK labels and section indices. 6- Art direction: blueprint scribbles, technical diagrams, desaturated environments, one high-detail character or artifact. 7- Motion: masked lateral reveal, active cyan pulse, slow art parallax. 8- Content ownership: let the stage own the current operation, the edge rail own navigation, and a single dossier own selected-unit detail. News lists use category + date + headline rather than dashboard cards. 9- Depth adaptation: `minimal` keeps typography and a cyan state rule; `moderate` adds the black edge shell and one blueprint layer; `complex` adds a full dossier, indexed stage, and coordinated masks; `maximal` may recompose operation, archive, and media modes independently. 10- Avoid: generic green terminal UI, all-cyan text, excessive card grids.

Source: references/recipes.md

实现要点与设计意图:

  • "acid green 仅用于下载/成功" 是一个语义限色规则:ark 的信号系统是单色(青)主导,绿色被限制为一个状态语义而非装饰色,避免信号系统被稀释。
  • 内容归属(content ownership)是这个族最容易被误用的部分:舞台(stage)持有当前作战,边轨(edge rail)持有导航,单一档案(dossier)持有被选中单位详情。新闻列表必须用"分类 + 日期 + 标题"而非仪表盘卡片——这是在禁止把新闻门户做成仪表盘。
  • 深度适配线是渐进的:minimal 只保留字体与一条青色状态规则 → moderate 加黑色边缘壳层与一层蓝图 → complex 加完整档案、索引化舞台与协调遮罩 → maximal 允许作战/档案/媒体三种模式各自独立重组。

令牌落点(来自 themes.ark):

json
1"ark": { 2 "ink": "#080a0b", 3 "paper": "#f4f6f6", 4 "signal": "#18d1ff", 5 "state": "#c8eb21", 6 "accentAlt": "#8fc31f", 7 "muted": "#8d9396", 8 "panel": "rgba(8, 10, 11, 0.82)", 9 "shell": "black-edge-dock", 10 "stage": "blueprint-media", 11 "radius": "0px" 12}

Source: assets/tokens/ark-ui.tokens.json

注意 radius: 0px 与 shell: black-edge-dock——方形控件与黑色边缘坞是这个族在几何与壳层上的机器可读表达。

endfield:现场工程系统

定位:建设、物流、数据工具、运营落地页、工业产品站点和高对比技术界面。

markdown
1- Palette: `#191919`, off-white, signal yellow `#fffa00`; green only for verified/online state. 2- Type: wide condensed display + Space Grotesk/technical sans. 3- Shell: pale vertical rail, icon stack, large segmented image field, black utility docks. 4- Geometry: rectangular tiles, long guide lines, clipped wedges, very large section numerals. 5- Content pattern: action-first control strips, field codes, timeline/calibration labels, title blocks that overlap media. 6- Motion: yellow wipe on load, directional clipped reveals, restrained breathing activity block. 7- Avoid: hazard stripes everywhere, construction-yellow backgrounds behind long text, faux military warnings.

Source: references/recipes.md

实现要点与设计意图:

  • "green only for verified/online state" 与 ark 的限色规则同构:绿色是状态语义(已验证/在线),黄是唯一信号色。这保持了两族共享的"一信号色 + 一状态色"语法。
  • "very large section numerals"(超大分区编号) 是 endfield 最强的几何签名;Shell 的 "pale vertical rail"(米白竖轨)则与 ark 的黑色横向顶栏形成骨架上的镜像对比。
  • Avoid 列表直接针对这个族最常见的退化:警示条纹铺满、长文本压在施工黄底上(对比度灾难)、伪造军事警告语。

令牌落点:ink: #191919、paper: #f2f2f0、signal: #fffa00、shell: pale-rail-charcoal-dock、stage: calibration-route-matrix、radius: 2px(assets/tokens/ark-ui.tokens.json)。radius 从 ark 的 0px 提升到 2px,对应"rectangular tiles"中轻微的技术圆角。

exa:宇宙档案系统

定位:叙事档案、文化/编辑站点、天文工具、角色资料页和氛围感产品页。

markdown
1- Palette: midnight blue/black, white, aqua `#46f6e6`; violet as rare secondary energy. 2- Type: Source Han Serif-style CJK for narrative/display, technical sans for controls, fictional glyphs only as decoration. 3- Shell: immersive full-bleed image, slim left navigation, orbital/ring controls, outlined pill actions. 4- Geometry: circular instruments, fine lines, triangles, star-chart points, mask-faded tickers. 5- Content pattern: archival notes, character name + title + voice metadata, sparse navigation. 6- Motion: slow orbital rotation, stepped sprite/ticker animation, subtle point glints. 7- Content ownership: let one named journey, record, or subject dominate the stage. Keep route notes, voice/author metadata, and selected chronology in separate archival bands. 8- Depth adaptation: `minimal` uses serif contrast and one aqua point; `moderate` adds a slim archive rail and one ring; `complex` adds a multi-ring instrument, narrative dossier, and masked ticker; `maximal` may give journey, character, and notice modes separate constellations and transitions. 9- Avoid: illegible invented alphabet for real content, fantasy filigree, saturated purple gradients over every surface.

Source: references/recipes.md

实现要点与设计意图:

  • 双字体分工是这个族的核心:衬线(思源宋体系)负责叙事与展示,技术无衬线负责控件,虚构字形只能作装饰——这条规则防止虚构字母表被用于承载真实内容导致不可读。
  • violet 作为稀有副能量:紫不是常规色,只在特殊能量语义出现,保持水青为主信号。
  • 内容归属:一个具名旅程/记录/主体统治舞台;路由笔记、语音/作者元数据、选中编年史放在分开的档案带里,避免叙事与元数据互相挤压。

令牌落点:ink: #080914、signal: #00fbec、state: #925dff(紫)、shell: midnight-archive-rail、stage: orbital-chronology、radius: 999px(assets/tokens/ark-ui.tokens.json)。radius: 999px 是全胶囊圆角,与 "outlined pill actions" 直接对应——五个族里只有 exa 与 popucom 用满圆角。

popucom:明快协作系统

定位:协作工具、趣味引导、家庭向游戏、活动微站和多彩购买/启动流程。

markdown
1- Palette: blue `#3994ff`, yellow `#ffcc1a`, orange `#ffa800`, off-white; add green/blue variants by function. 2- Type: heavy friendly CJK sans + compact display face. 3- Shell: dark dotted top bar above a bright illustrated field; pill actions grouped vertically. 4- Geometry: rounded capsules, thick outlines, arrow nubs, offset shadows, halftone texture. 5- Content pattern: one clear primary purchase/start action, platform badges, friendly character grouping. 6- Motion: 2s floating layers, small arrow swing, button background roll, bouncy but short feedback. 7- Content ownership: keep party readiness, selected challenge, and the next shared action visible. Use color as a gameplay or teammate category, not as decoration on every peer item. 8- Avoid: using the industrial Ark shell with bright colors; over-inflated every element; motion that competes with the main action.

Source: references/recipes.md

实现要点与设计意图:

  • 这是五族中唯一的亮色插画风骨架:暗色点状顶栏叠在明亮插画场上,与前四族的暗色系形成结构反差。
  • "color as a gameplay or teammate category, not decoration" 是这个族的限色哲学:多彩是分类语义(队友/玩法类别),不是每个元素都要上色。
  • 内容归属保持"队伍就绪状态 + 已选挑战 + 下一个共享动作"始终可见——这是协作场景的任务主线。
  • Avoid 里最关键的一条:"using the industrial Ark shell with bright colors"——明文禁止把 ark 的工业壳层换上亮色,因为那是族身份错配。

令牌落点:ink: #141414、paper: #fffd4→实际为 #fffdf4、signal: #ffcc1a、state: #3994ff、shell: dotted-dark-cap、stage: cooperative-color-field(assets/tokens/ark-ui.tokens.json)。注意此族 state 是蓝色而 signal 是黄色——其余四族 state 多为绿/紫/白,popucom 的语义映射是功能性的("add green/blue variants by function")。

corporate:克制的工作室系统

定位:作品集、招聘页、工作室介绍和黑盒媒体展示页。

markdown
1- Palette: black/charcoal, white, acid lime `#f3ff00`. 2- Type: Source Han Sans-style UI with one geometric display face. 3- Shell: translucent dark top bar, black panels over monochrome hero art, project carousel. 4- Geometry: clean rectangles, light shadow, minimal lime rule/active state. 5- Motion: quiet carousel and opacity/slide transition. 6- Content ownership: let project imagery or a single statement dominate. Keep studio facts, roles, and contact actions in quiet editorial bands instead of operational telemetry. 7- Depth adaptation: `minimal` uses monochrome type and a lime active rule; `moderate` adds a translucent header and image-led split; `complex` adds project sequencing, editorial metadata, and responsive media choreography; `maximal` means bespoke project narratives, not tactical decoration. 8- Avoid: turning the corporate branch into a tactical HUD; the evidence is simpler and more restrained.

Source: references/recipes.md

实现要点与设计意图:

  • 五族中约束最严的族:单色骨架 + 酸性黄绿作为唯一的规则线/激活态,几何回到干净的矩形与 radius: 0px。
  • 内容归属强调"让项目图像或单一句子统治画面;工作室事实、职位、联系方式放在安静的编辑带里,而不是运营遥测面板里"——这条几乎是对过度仪表化的反向约束。
  • maximal 的定义在五族中语义不同:"bespoke project narratives, not tactical decoration"——corporate 的第 4 档深度是"为每个项目做定制叙事",而不是战术化装饰。这说明深度等级的语义随族而调整。
  • Avoid 直接点名:"不要把 corporate 分支做成战术 HUD;证据更简单、更克制。"

令牌落点:ink: #050505、signal: #f3ff00、state: #ffffff、shell: translucent-media-header、stage: editorial-project-sequence(assets/tokens/ark-ui.tokens.json)。

五族横向对照表

维度arkendfieldexapopucomcorporate
风格定位工业信息系统现场工程系统宇宙档案系统明快协作系统克制的工作室系统
ink(骨架深色)#080a0b#191919#080914#141414#050505
paper(骨架浅色)#f4f6f6#f2f2f0#f3f2ef#fffdf4#f3f3f3
signal(签名色)青 #18d1ff信号黄 #fffa00水青 #00fbec黄 #ffcc1a酸性黄绿 #f3ff00
state / accentAlt绿 #c8eb21 / #8fc31f绿 #00ffa2紫 #925dff蓝 #3994ff / 橙 #ffa800白 #ffffff
radius0px2px999px999px0px
shell 模式black-edge-dockpale-rail-charcoal-dockmidnight-archive-raildotted-dark-captranslucent-media-header
stage 模式blueprint-mediacalibration-route-matrixorbital-chronologycooperative-color-fieldeditorial-project-sequence
核心几何签名1px 白色规则线、青色激活下划线、方形控件、斜向切口矩形瓷砖、长引导线、剪切楔形、超大分区编号圆形仪表、细线、三角形、星图节点、遮罩淡出跑马灯圆角胶囊、粗描边、箭头凸块、错位阴影、半调纹理干净矩形、轻阴影、极少量黄绿规则线
典型场景战术面板、运营控制台、媒体门户、游戏菜单建设、物流、数据工具、工业产品站叙事档案、文化编辑、天文工具、角色资料协作工具、趣味引导、家庭向游戏、活动页作品集、招聘页、工作室介绍、媒体展示
主要 Avoid通用绿色终端 UI、全青文本、过多卡片网格满屏警示条纹、长文本压施工黄、伪造军事警告虚构字母承载真实内容、幻想纹饰、满屏紫渐变ark 壳层配亮色、全面膨胀、动效与主任务竞争做成战术 HUD

数据来源:references/recipes.md 各族配方与 assets/tokens/ark-ui.tokens.json 的 themes 段(ark、endfield、exa、popucom、corporate)。

配方消费流程:从选择到代码

下面的时序图展示一次真实任务中配方如何被消费。关键点在于族与深度是两次独立选择,且在动代码前必须声明一个紧凑契约(family + depth + 证据模式 + 主屏幕任务):

Loading diagram...

每一步的设计意图:

  1. 先检查再选择——"Inspect the target project, framework, viewport, existing tokens, and user content"(SKILL.md)。配方选择依据的是产品任务,不是个人色彩偏好。
  2. 族单一性——五选一,混合是例外且最多两个(见下节)。
  3. 深度独立——"If the user specifies a depth, preserve it. Otherwise default to moderate for productivity/product UI and complex for game-adjacent or showcase UI; state the assumption. Ask only when the depth would materially change scope or rework."(SKILL.md)
  4. 契约先行——"Before changing code, state a compact contract: family, depth, evidence pattern, and what the primary screen must let the user do. Treat family and depth as orthogonal axes"(SKILL.md)。

混合选择(Hybrid Selection)

当产品语义确实需要时,最多组合两个族。规则是保持第一个族的壳层,借用第二个族的强调色或插画行为:

markdown
## Hybrid selection Combine at most two families when product semantics require it. Keep the first family's shell and the second family's accent or illustration behavior. Example: an astronomy operations dashboard may use Endfield's shell with Ex Astris's circular instruments, while retaining one signal color.

Source: references/recipes.md

README.md 用中文重述了同一规则并补充了默认策略:"默认只使用一个主风格族;确需混合时最多组合两个,由主风格控制壳层、排版和主要色彩,次风格只提供一种受控的仪表、强调色或插画行为。"(README.md)

混合规则里的隐藏约束值得注意:

  • 主族保留壳层——壳层是族身份的最大权重来源,让出壳层等于失去身份。
  • 次族只贡献一种受控行为——仪表、强调色或插画之一,不是一整套。
  • 保留一个信号色——例子中明确"while retaining one signal color",避免双信号色系统互相打架。

配置选项(设计令牌参考)

ark-ui.tokens.json 是五族配方的机器可读映射,供实现时对齐:

令牌组键值示例说明
themes.<family>ink / paper#080a0b / #f4f6f6族骨架的深/浅两极
signal#18d1ff(ark)唯一签名信号色
state / accentAlt#c8eb21 / #8fc31f(ark)状态语义色与可选副强调
muted#8d9396次要文本/边线
panelrgba(8, 10, 11, 0.82)面板底色的半透明叠加
shellblack-edge-dock壳层结构模式(字符串枚举)
stageblueprint-media舞台内容模式(字符串枚举)
radius0px / 2px / 999px族级控件圆角
typographyuiCjk / display / technical / serif / mono见文件跨族共享字体栈
geometryrule / radiusTechnical / radiusFunctional / railDesktop / topbarDesktop1px / 2px / 4px / 72px / 72px共享几何常量
motiondirect / reveal / attention / ease240ms / 650ms / 1800ms / cubic-bezier(.22,.8,.2,1)共享动效时序

Source: assets/tokens/ark-ui.tokens.json

注意 typography / geometry / motion 三个令牌组是跨族共享的——族令牌只覆盖身份维度(色彩、壳层、舞台、圆角),通用语法归设计语言页所述的共享层。这也解释了为什么 exa 的配方可以引用 "Space Grotesk/technical sans"、endfield 引用 "technical sans",而两者实际落到同一个 typography.technical 字体栈。

使用示例

示例 1:静态页面的根属性选择

README.md 的代码约定段展示了五族配方如何落到 HTML 根属性——族与深度作为两个独立属性:

html
<html data-ark-theme="endfield" data-ark-depth="complex">

Source: README.md

示例 2:React 组件的 theme/depth 接口

React 侧用组件属性承载同一对决策:

jsx
<ArkShell theme="endfield" depth="complex" />

Source: README.md

示例 3:调用方的自然语言请求

README 给出三种典型的调用形态,分别演示"指定族+深度"、"族+complex 保留信息架构"、"分区分深度":

text
1使用 $ark-ui,以 endfield 风格、2 级中等深度重构这个后台。 2 3使用 $ark-ui,把这个游戏启动器做成 ark + complex;保留现有信息架构。 4 5使用 $ark-ui,做 exa + maximal 的展示页,但正文阅读区最多保持 moderate。

Source: README.md

第三条尤其值得注意:它演示了同一页面内分区使用不同深度的合法用法——展示区 exa + maximal,正文阅读区降回 moderate。这依赖"深度是独立轴"的正交设计。

示例 4:SKILL.md 的选择工作流

技能把配方选择内嵌进五步工作流:

markdown
11. Inspect the target project, framework, viewport, existing tokens, and user content. 22. Choose one family; do not average every product into one style: 3 - `ark`: black/white/cyan industrial information system. 4 ... 53. Choose one application depth independently from the family: 6 - `1 / minimal / 极简`: family identity through tokens, type, geometry, and one strong state cue. 7 ... 85. Read [references/design-language.md](references/design-language.md), [references/depth-levels.md](references/depth-levels.md), and only the chosen family in [references/recipes.md](references/recipes.md). For multi-family comparisons or family-specific depth behavior, also read [references/family-depth-matrix.md](references/family-depth-matrix.md).

Source: SKILL.md

失败模式与边界情况

配方文件用"Avoid"条目显式定义了每个族的退化路径。这些不是泛泛的风格建议,而是从公开页面证据中归纳出的反模式:

  1. 族平均化(全局失败模式)——SKILL.md 明令 "do not average every product into one style"。平均化的结果是失去任何一族的可识别身份。
  2. 身份错配(popucom 特有)——"using the industrial Ark shell with bright colors":壳层与配色分属两族时,视觉系统自相矛盾。
  3. 信号色滥用——ark 的"all-cyan text"与 exa 的"saturated purple gradients over every surface"都指向同一类错误:把签名色从信号角色提升为装饰角色。
  4. 状态色越权——ark 的绿色仅限下载/成功,endfield 的绿色仅限已验证/在线;违反即破坏语义色彩系统。
  5. 可读性灾难——endfield 的"construction-yellow backgrounds behind long text";exa 的"illegible invented alphabet for real content"。
  6. 内容归属失衡——ark 要求新闻列表用"category + date + headline rather than dashboard cards";corporate 要求工作室事实放在"quiet editorial bands instead of operational telemetry"——两者都在阻止把内容塞进不属于该族的内容容器。
  7. 过度仪表化(corporate 特有)——"turning the corporate branch into a tactical HUD":corporate 的证据本身就是更简单、更克制的。
  8. 动效与主任务竞争(popucom 特有)——"motion that competes with the main action":反馈要 bouncy but short。

性能与运行注意事项

  • 截图验证:assets/showcases/ 提供五族各自的独立可运行样例;scripts/capture-showcases.mjs 默认以 1440×900 重建五张复杂档样例,--mobile 会用真实 390×844 视口复验,横向溢出即失败(README.md)。
  • 审计脚本:scripts/audit-ark-ui.mjs <html-or-css-path> 可对单个产物做规则审计。
  • 全局质量底线:无论哪一族哪一档,都必须"保持真实数据、清晰主任务、键盘可用、可见焦点、可读对比度、响应式布局和 prefers-reduced-motion"(README.md)。
  • 深度≠堆料:README 明确"深度增加不等于增加假数据、随机 HUD、额外颜色或无意义动画"——这保护了各族的深度适配线不被滥用为装饰借口。

扩展点

  • 新增一族:需要同时扩展 references/recipes.md(配方正文,含 Palette/Type/Shell/Geometry/Content pattern/Motion/Content ownership/Depth adaptation/Avoid 九类条目)与 assets/tokens/ark-ui.tokens.json 的 themes 段(ink/paper/signal/state/accentAlt/muted/panel/shell/stage/radius 十键),并在 SKILL.md 第 2 步的族清单中登记。
  • 调整一族深度行为:recipes.md 中每族的 "Depth adaptation" 行是族内深度的权威描述;跨族统一深度语义则归 references/depth-levels.md。
  • 实现新载体:参照 assets/react/ArkUI.jsx 的 theme / depth 双属性模式,或静态页的 data-ark-theme / data-ark-depth 根属性模式,保持族/深度正交传递。

Sources

(3 files)
(root)
assets/tokens
references