SanyamPunia/verso

verso 是做什么的？

将现有界面的指定部分转换为文艺复兴盛期工作笔记的页面效果：铁胆墨水，褪色为棕色，铺在粗纹棉纸上。

参考了莱昂纳多·达·芬奇的五份作品：温莎解剖笔记（RCIN 919070 verso）、莱斯特手稿的跨页、维特鲁威人、阿伦德尔手稿的跨页以及福斯特手稿的笔记本页面。在首次转换会话前，请先阅读 references/style.md。它解释了风格中每个物理事实及其对应的 UI 决策。下面的决策只有结合该文档才有意义。

技能文件

• references/style.md 研究资料：纸张、墨水、笔触、构图、包含测量对比度的调色板，以及通用 UI 部件到手稿部件的映射表。
• assets/manuscript.css 作为纯 CSS 主题，限定在 .ms-scope 作用域下，并通过 data-ms-paper 提供四种纸张预设。所有值的最终来源。
• assets/defs.svg 四个 SVG 滤镜（羽毛笔、自由手绘线、毛边、水洗）。每个文档挂载一次。
• assets/sketches.svg 页面中放置的钢笔速写：几何构造、机械装置、引线、墨迹、带字母标记的光线、斜线填充的实体。
• examples/ 两个完整的转换示例，每个包含转换前后对比：before.html 和 after.html（一个设置卡片，使用 windsor 预设），以及 release-before.html 和 release-after.html（发布说明，使用 leicester 预设）。examples/index.html 将它们并排展示并允许切换预设。请将 after 文件视为完成转换后必须达到的标准。

步骤 1. 确定转换范围

用户指定一个区块：可以是文件、组件、路由、选择器或文字描述。只转换该区块，不涉及其他。

• 如果未提供目标，请请求指定。不要凭猜测重写整个应用。
• 找到该区块的根元素。整个主题依赖于该根元素上的一个 ms-scope 类，因此应用的其他部分不会受到影响。
• 如果该区块被其他屏幕共享（例如设计系统中的按钮、布局），请说明情况并询问是转换共享部分还是包裹一个本地副本。

步骤 2. 编写前先阅读项目

• 了解项目的样式处理方式：Tailwind、CSS Modules、纯 CSS、CSS-in-JS 库、组件库。将主题移植到相应的风格中。不要向已有一种样式系统的项目中引入第二种。
• 阅读项目规则文件（CLAUDE.md、AGENTS.md 或类似文件）。如果项目禁止在组件中使用原始十六进制颜色，则先将 --ms-* 变量作为令牌添加到其主样式表中，然后使用这些令牌。如果项目有字体缩放或字体加载器，则通过该加载器（例如 Next.js 中的 next/font/google）添加三种字体，而不是使用 @import 行（后者仅适用于纯 HTML）。
• 保留项目自身的原始元素。通过变体或类名来重新设计其 Button 的样式，不要将其替换为原生的 <button>。

步骤 3. 一次性安装基础元素

1. 令牌与类。 引入 assets/manuscript.css，或以项目风格中的等效方式引入。在 Tailwind v4 中，令牌放在 @theme 中，多层结构（.ms-page::before、.ms-frame、.ms-cast、.ms-button）放在 @layer components 中，因为伪元素堆栈无法通过工具类实现。
2. 滤镜。 挂载 assets/defs.svg 一次，位于作用域根元素内部或之前。在 React 中，将其作为一个小组件。没有它，边框和线条将显示为直边，毛边效果也会消失，这是一个无声的失败：请务必检查。
3. 字体。 EB Garamond（正文）、IM Fell English（标题）、La Belle Aurore（边注）。仅加载所用的粗细。

步骤 4. 选择预设

根据区块的形状选择预设，参考 references/style.md 的第 6 节表格。简要说明：

• windsor 适用于表单、设置和密集的工具面板。
• leicester 适用于文章、文档、发布说明、英雄区域和空状态。
• arundel 适用于仪表盘、画布和包含许多小部件的面板。
• forster 适用于窄卡片、侧边栏、列表和移动端屏幕。

在作用域根元素上设置 data-ms-paper="..."。windsor 无需设置属性。用户可以指定预设或手稿名称，此时以用户指定为准。每个表面仅使用一种预设。

步骤 5. 逐部分转换

根据 references/style.md 中的映射表逐步处理区块。最重要规则如下：

• 表面。 区块的根元素变为 .ms-page：纸张纹理、纹路、条纹和链条线、毛边。移除内层白色或灰色表面。最多使用一个 .ms-repair 来创建较亮的补丁，用于需要分隔的区块。
• 卡片。 卡片变为松散的手绘边框（.ms-frame）或不加边框。大多数组合不需要边框：空白和手绘规则线即可分隔它们，如同手稿页面一样。仅对一两个盒装注释风格的方块使用边框。
• 阴影。 所有 box-shadow 和 elevation 效果变为斜线填充（.ms-cast）或移除。此主题中不存在柔和的灰色阴影。
• 圆角。 将圆角半径替换为 --ms-radius（手绘半径）或移除。
• 颜色。 仅使用棕色墨水。正文使用 --ms-ink，次要文字使用 --ms-ink-2，说明文字使用 --ms-ink-3。品牌色变为红褐色，在单个表面内仅使用一次：主要操作、链接和焦点环。
• 字体。 正文使用 EB Garamond，启用旧式数字。标题使用 IM Fell。章节标题使用 IM Fell 斜体，下方加双线条手绘规则。切勿将正文设置为手写字体：它仅用于简短注释。
• 字段。 输入框变为带规则线的（.ms-input），文本域变为多行规则线，复选框变为带叉号的墨水方块（.ms-check）。保留真实的 <input> 和 <label>，仅改变其视觉呈现。
• 徽章和标签 变为圆圈内的文字（.ms-circled）。
• 数值列表、统计和表格 变为分类账样式（.ms-ledger）：行使用手绘规则线，带点状引导线指向数值，使用旧式数字。
• 图标。 保留项目原有的图标。将其颜色调整为墨色，并通过 ms-ink 滤镜处理。不要将它们替换为 Emoji 或字形。
• 图片 使用 .ms-plate：棕褐色调，与纸张纹理混合。
• 图表 变为手绘线条和斜线填充。不使用渐变色。使用斜体字母（.ms-point）为点和区域命名，如同莱斯特手稿中的图表。
• 进度条、计量器和滑块轨道 变为维特鲁威比例尺（.ms-scale，带 --value）。保留元素的角色和 aria 值。对于原生 <input type="range"> 或 <progress>，保留原生元素并在其背后绘制比例尺。
• 步骤编号、排名和索引 变为页边距中的图号（.ms-figno），如同福斯特手稿。
• 变化的值 表示为更正：<del> 使用钢笔划掉，<ins> 使用手写体。仅在 UI 已同时显示旧值和新值的情况下使用。
• 总数和分类汇总 可以显示为计算过程（.ms-sum），如同阿伦德尔手稿。
• 长文本中的章节 以普通首字母（.ms-initial）开头，以划掉的结束线（.ms-endrule）结尾，如同莱斯特手稿。

步骤 6. 组合为工作页面

直接翻译网格卡片为棕色卡片是失败的做法。请重新组合区块，使其呈现为一张被填写过的手稿页面，而非设计稿：

• 使用 .ms-folio：主栏和边栏。将次要信息、提示和帮助文本移至边栏中，作为 .ms-note，如果合适，可添加指向主内容的引线草图。
• 允许区块宽度不同。将草图放置在文本内部，而不是独立的区域。
• 使用 .ms-tilt-l、.ms-tilt-r 或 .ms-tilt-s 倾斜两到三个小区块。切勿倾斜表单字段、表格或任何超过页面三分之一的内容。
• 从 assets/sketches.svg 中选择一个与主题匹配的钢笔素描：设置或系统使用机械结构，布局、数据或测量使用结构图。如果都不合适，则以同样方式绘制一个新的草图。每个表面最多使用一张素描。
• 控制单个表面的装饰预算：一张素描（最多两张）、一处污迹或墨点、一处透视效果、两处镜像文字区块。如果页面包含了所有这些元素，就会显得刻意。大多数表面只需要其中两到三个，而不是全部。
• 在真正空白区域最多添加两处装饰性镜像文字（.ms-mirror，aria-hidden="true"）。使用该时代的意大利语风格书写（自言自语、列表、测量数据）。不要将其作为真实引用呈现。
• DOM 顺序保持阅读顺序。布局可以视觉上移动元素，但源代码顺序必须对屏幕阅读器和 Tab 键导航仍然合理。

步骤 7. 安全护栏

• 对比度。 真实文本绝不能使用 --ms-wash。对照纸张测量任何新增元素：文字的对比度要求为 4.5:1，有意义的图形或控件边缘为 3:1。
• 镜像文字不能是内容。 标签、数值、错误信息和说明文字必须保持可读且方向正确。
• 语义保持不变。 保持相同的元素、角色、名称、状态和事件处理。转换后的组件行为必须与之前完全一致。
• 控件保持可识别性。 按钮看起来仍然可点击，字段看起来仍然可填写，焦点始终可见（红褐色轮廓）。
• 动效。 主题的动效相当于墨水：使用 data-draw 的素描自行绘制，复选框中的标记出现。悬停和按压效果为水洗，不能有缩放。尊重 prefers-reduced-motion，manuscript.css 已经包含了对它的支持。
• 性能。 每个添加滤镜的元素都意味着一次滤镜处理。仅在伪元素、边框和素描上使用滤镜，避免在长列表行或滚动内容上使用。不要在正文文本上应用 ms-ink。
• 无机构标记。 不要复制图书馆或收藏家的印章、博物馆的编目号作为品牌标识，也不要使用莱昂纳多的名字作为签名。页面风格是模仿他的手法，而非冒充他的作品。
• 仅适用于浅色模式。 纸张是实物，因此在深色模式下不会反转。如果应用有深色主题，指定作用域内的区块仍保持其纸张效果。

步骤 8. 验证

1. 渲染转换后的区块并截取屏幕截图。如果浏览器工具可用（agent-browser、Playwright、预览面板），请使用它。观察效果。
2. 检查边框和线条是否为波浪状。如果是直的，说明 defs 未挂载，或滤镜 ID 冲突。
3. 用 Tab 键遍历区块。所有控件应按合理顺序到达，并显示焦点环。
4. 在手机宽度下检查页面。分栏布局应折叠为一列。
5. 如果项目有其自身的检查工具（类型检查、语法检查、构建），请运行。

报告

完成后，用几行简短的文字告知用户：

• 哪个区块发生了变化以及哪些文件被修改。
• 使用了哪种预设及其适用原因。
• 一次性添加了哪些内容（令牌、字体、滤镜）及其位置。
• 哪些部分保持不变及其原因。
• 如何查看效果（路由或需要打开的文件）。