n0ctx/tavern-aesthetic

酒馆美学 — 沉浸式叙事前端设计

该技能产出的内容

一个可用的UI，它读起来像是来自故事世界的手工制品——而不是重新换肤的仪表盘，也不是一堆通用的游戏HUD道具。标准是精美的前端卡片：一眼就能识别出作品，每个表面共享同一艺术方向，细节完成度高，交互感觉自然自然。

精致 ≠ 复杂。精致意味着每个可见的选择都是有意的，每个可见区域都达到相同的质量标准。

该技能涵盖视觉设计和实现方法。它不依赖SillyTavern、任何辅助插件、MVU或任何框架。重用项目现有的技术栈、组件、资源和交互模式。如果用户只要求设计，不要碰代码。

参考资料（按需阅读，切勿一次性全部阅读）

• references/design-knowledge.md — 按维度（叙事身份、色彩、字体、形状、光线/材质、图像、布局、组件、动效、适配）的决策指南，以及失败模式表。阅读与当前决策相关的部分。
• references/workflow.md — 分阶段流程、通过/失败门禁、审查方法、回滚规则、设计记录模板。在开始任何中等或复杂任务前阅读。
• references/asset-sources.md — 插图、纹理、图标、字体的来源和许可检查。在在线收集资源时阅读。
• references/research.md — 该技能背后的证据和局限性。执行时无需阅读。

任务级别

根据设计难度判断，而非代码量：

• 简单：一个组件、细节修复、现有视觉语言内部的小功能。重用该语言；实现后进行截图检查一次。
• 中等：单个页面/面板或现有屏幕的一次重新设计。进行简要的方向设定，先构建焦点区域，然后完成页面；进行1-2轮审查。
• 复杂：多屏幕流程、游戏化系统、从零开始构建、需要定制关键视觉，或用户要求成品质量。运行workflow.md中的六个阶段，并保持设计记录。

防漂移规则（有约束力）

这些规则的存在是为了防止多轮执行中的漂移。请严格遵循：

1. 设计记录是唯一的事实来源。 对于中等和复杂任务，在方向设定时创建它（模板在workflow.md中），并在每个后续轮次/模块开始时重新阅读。任何新的颜色、圆角、字体或动效值必须在使用前添加到记录的令牌注册表中。如果值不在注册表中，则不允许在代码中使用。
2. 在核心样本通过后冻结令牌注册表。 后续模块只能重用已注册的令牌。新令牌需要在记录中添加显式注释，说明为什么现有集合无法表达需求。
3. 每个模块在继续之前都必须与核心样本进行并排截图比较。 没有例外；口头比较是不够的。
4. 每个阶段最多进行两轮修复。 如果仍然失败，则根据workflow.md中的回滚表回滚并诊断，而不是叠加更多修复。
5. 一次只能有一个活跃方向。 不要在不同轮次之间保留备选方向。选择一个，记录下来，放弃其余。

核心原则

1. 为作品设计，而非为类型设计。
   • 首先回答：此UI在故事中是什么对象或系统，由谁制作，谁阅读，何时阅读。
   • 然后选择一个属于该特定作品的记忆点。
   • 视觉身份来自具体的角色、地点、时代、派系、事件、道具。类型公式（后启示录=黑/黄雷达；修仙=墨绿+金）只是起点，必须具体化。
   • 自我测试：将同一个类型的通用请求交给一个智能体——如果它能产生几乎相同的UI，则方向不够具体。
   • 内部比较几个方向，最终交付一个。对于常规任务，不要向用户列出选项。
2. 一个概念贯穿每个设计决策。
   • 颜色来自材质和光源；字体来自书写/印刷方法；形状来自工艺；动效来自物体的物理动作。
   • 相关维度应一起决定，而非顺序进行（"所有颜色先，然后所有字体"是错误的）。
   • 对于任何元素，你必须能够说明它表达了概念的哪一部分。
3. 具体艺术使用插图资源；代码绘制的艺术仅为占位符。
   • 人物、场景、对象：最终版本使用插图资源。来源顺序：现有项目资源 → AI生成 → 授权网络收集。
   • CSS/SVG绘制的场景、人物、对象仅允许用于构图/概念验证，必须在交付前替换（复杂任务最晚在核心样本阶段）。它们看起来像程序员艺术，会拖累整个UI。
   • 代码拥有界面本身：布局、排印、边框、纹理、装饰图案、图标、抽象和数据图形。
4. 插图主导构图。
   • 插图设置布局的重心；文本和组件围绕它排列。切勿将其缩小为顶部横幅或卡片缩略图。
   • 每个主屏幕必须看起来像一幅画：眯起眼睛，屏幕大部分应该是插图，而不是深色面板+细线+文本。
   • 艺术存在延续到功能页面（插图作为面板下低对比度层、角色跨面板边缘、随时间/位置变化的场景）。"华丽开场，然后单调的深色表单页面"是最常见的质量崩溃。
   • 每个屏幕一张主视觉。次要图像融入同一画面或形成统一处理的集合；切勿将不同来源的图像并排排列在方框中。
5. 信息采用世界内格式，道具使用有节制。
   • 信息使用世界的原生格式和词汇表（账本列、花名册布局、世界内动词/名词），并以叙事节奏揭示。
   • 整个UI使用一个主要载体。不要给每个模块一个不同的CSS模拟道具（胶带便签、歪斜的印章、小标签、算盘珠）——堆叠的道具看起来很廉价。
   • 限制道具和装饰，而不是图片和颜色。从道具中释放的空间用于插图和排印，而不是深色文本表单。
   • 并非所有内容都是"标签：值"+进度条。流程页面（入门介绍、设置）不是表单；关键选项可以带有插图。
6. 统一的单一质量标准。
   • 投入可能不均：焦点区域获得最佳资源和最多细节。
   • 任何可见区域不得低于标准。任何绘制的内容必须匹配整体精度；如果不能，则替换为插图或通过排印/抽象图形表达。
   • 为了降低成本，在相同语言内简化——永远不要回退到默认组件、浏览器原生样式或占位图像。
7. 阅读和操作优先。
   • 中文正文：≥14px（15-17px典型），行高1.6-1.9，行长约20-40字符，正文对比度≥4.5:1。
   • 情绪由色温、光线、材质、动效承载；文本和数字保持清晰。
   • 没有小字、低对比度或将无意义的英语作为"高级"代名词。
   • 图像和纹理绝不覆盖在正文文本或可点击目标上。
   • 完整的交互状态，键盘可操作，适应目标宽度。
8. 默认值必须经过选择，而非继承。 保留默认字体、调色板、组件库样式或浏览器滚动条/焦点环的前提是经过故意选择。常见的AI游戏UI套件（米色纸张+深石板色、红色歪斜印章、小标签、六步节点、雷达图）也是一个默认值。用一个时髦的默认值替换另一个仍然是默认值。
9. 工程约束。 重用现有代码、依赖项和资源。仅按照资源计划生成/收集资源。没有新的重量级依赖项，没有资源管道，不修改后端。

执行流程

1. 理解场景

确认：类型；角色/世界细节；目标情绪；页面目的；核心信息和操作；目标设备；宿主环境（例如嵌入在聊天中）。 审查现有代码和资源。用户参考资料：提取艺术技巧，而非画面。在没有关键歧义时继续执行，无需提问。

2. 设定方向（所有中等+任务）

写入设计记录：

• 界面身份：什么对象/系统，由谁制作，由谁阅读。
• 记忆点：一句话，必须来自该作品的具体细节。
• 艺术方向：媒介、笔触、光线方向、调色板、清晰度——一个共享的风格描述，在后续每个生成请求中逐字重用。
• 排除列表：该作品必须避免的类型公式和默认值。
• 资源计划：每件具体艺术作品的目的、比例、裁剪、透明度、来源（现有 → AI → 网络）。在承诺之前验证来源实际存在；如果AI和授权网络资源都无法支持该方向，请立即说明。

3. 构建

根据任务级别：

• 简单：实现，截图，修复最严重的1-3个问题，完成。
• 中等：将焦点区域达到完整质量 → 完成页面 → 进行一次合并审查。
• 复杂：按照workflow.md中的六个阶段（方向 → 构图 → 核心样本 → 模块化扩展 → 打磨 → 验收）。阶段是质量门，而非报告检查点；持续进行。遇到系统性问题，返回相关阶段仅重做受影响的部分。

在构建过程中：

• 重用项目代码和交互模式。
• 装饰性字体仅用于标题；验证CJK字形覆盖并设置后备字体栈。
• 所有状态：悬停、焦点、激活、选定、禁用、加载、空状态、错误——视觉上保持一致。
• 动效服务于交互和情绪；整个作品使用相同的时长/缓动系列；尊重prefers-reduced-motion。

4. 集成资源

• 先放置主视觉，然后安排支持信息。
• 通过裁剪、蒙版、调色、颗粒、边缘混合、统一光线方向来统一资源；为文本留出安静区域。
• 混合来源样式冲突 → 调色匹配；仍然冲突 → 替换，不要强行。
• 资源是本地项目文件，而非热链接URL。尊重许可/署名。

视觉审查（基于截图，优先解决最大问题）

1. 第一眼（缩略图，约1秒）：视线落在哪里；是否是计划的焦点；是否有值得记住的东西。
2. 眯眼：明度结构读出2-3个块；屏幕主要是插图还是深色面板。
3. 遮盖标题：仍然可识别为这部作品，而非任何同类型模板。
4. 并排：所有区域看起来像统一艺术方向（光线、线条、材质、调色板、字体）。
5. 实际尺寸：中文正文舒适。
6. 边缘：对齐、溢出、浏览器原生chrome、空状态、无遗留的代码绘制艺术或占位符。
7. 交互：状态和动效。
8. 目标宽度：窄/嵌入式布局。

修复优先级：方向 > 构图 > 核心艺术 > 一致性 > 可读性 > 细节。每轮仅修复最严重的1-3个问题；每轮后重新截图。每个阶段最多两轮；在每次修复会话前保留一个回滚点。

在修复前诊断原因类别：缺失核心艺术 / 弱概念身份 / 弱构图层次 / 风格冲突 / 可读性或布局错误。每种都有不同的修复方法。

如果主模型无法看到图像，请重用现有视觉工具或将审查委托给具备视觉能力的子智能体。仅报告实际验证的内容。

验收清单（必须全部为是）

1. 是否有来自作品自身内容的令人难忘的第一眼元素？
2. 遮盖标题后，此UI是否仍不会与同类型模板混淆？
3. 最重要的视觉区域是否使用与其地位匹配精度的插图资源——没有代码绘制的人物，没有明显更粗糙的元素在画面中？
4. 资源、字体、组件和背景是否读起来像同一制作？最朴素区域是否仍然具有画面感并处于相同的质量标准？
5. 页面是否清晰、可操作、适应目标宽度，且功能从未为视觉效果而牺牲？

交付

• 首先交付可运行的结果。
• 复杂任务：简要说明核心艺术概念、实际使用的资源（附带许可说明）、审查过程中进行的主要修复、验证结果以及任何仍然为占位符的内容。
• 简单任务：仅说明关键更改。
• 不向用户提交冗长的设计文档。设计记录用于跨阶段/跨会话的连续性，而不是作为用户报告。