Arabic Design 是一套针对阿拉伯文排版的设计规范，用于解决 AI 生成界面中阿拉伯文渲染错误的问题。阿拉伯文是连写文字：字母彼此相连，变音符号（ً ّ َ）位于基线上下。多数 AI 生成的 CSS 针对拉丁文字调优，而这正是阿拉伯文显示出错的原因。该技能默认应用于任何包含阿拉伯文的设计，无需等待指示。
用途 修正 AI 生成设计中的阿拉伯文渲染问题，使文字显示为干净、连贯、专业的形态。重点解决字母间距破坏连写、字体回退错误、变音符号被裁切、词序反转、标点错位等常见缺陷。
主要能力 规则一：禁止对阿拉伯文使用负值 letter-spacing。拉丁设计常用紧凑字距（letter-spacing: -0.02em），但在阿拉伯文上负字距会导致字母连接处重叠，把单词压成无法辨认的模糊块；正值字距同样错误，会断开本应连接的字母。任何包含阿拉伯文（或阿拉伯文与拉丁文混排）的元素，都必须使用 letter-spacing: normal。负值或正值字距仅允许用于纯拉丁文或数字元素（如大号统计数字、$99、VS、全大写拉丁标签）。
规则二：使用真正的阿拉伯文字体，绝不回退到拉丁字体。没有阿拉伯文字形的拉丁字体会静默回退到系统字体，造成字重不匹配、外观损坏。必须显式声明支持阿拉伯文的字体栈，可按设计风格选择：现代 UI 使用 "Cairo"、"Tajawal"、"IBM Plex Sans Arabic"、"Noto Kufi Arabic"、sans-serif；圆润友好使用 "Almarai"、"Rubik"、"Baloo Bhaijaan 2"、sans-serif；编辑经典使用 "Noto Naskh Arabic"、"Amiri"、serif。需加载实际使用的字重（至少 400 和 700）。不可对阿拉伯文使用 font-style: italic（伪斜体破坏字形），也不可依赖 text-transform（阿拉伯文没有大小写）。
规则三：行高必须为变音符号留出空间。粗体展示型阿拉伯文需要垂直空间，否则点号和变音符号会与上一行碰撞。安全行高参考：展示型大标题不小于 1.3，中等标题 1.35，正文与说明文字 1.5 至 1.7。不确定时取更宽松值，变音符号被裁切会立即显得"坏掉"。
规则四：方向与双向文本。在根元素设置一次方向（阿拉伯文优先页面使用 <html dir="rtl">），子元素自动继承，不要在每个元素上散布 dir 属性。使用逻辑 CSS 属性让布局正确翻转：margin-inline-start、padding-inline-end、text-align: start，而非 margin-left、text-align: left。将嵌入阿拉伯文中的拉丁词或数字包在隔离 span 中，避免双向算法重排，例如 .ltr { display: inline-block; direction: ltr; }。注意 direction: ltr 父级泄漏问题：布局容器若为卡片或列顺序设置 direction: ltr，会把 LTR 泄漏到内部的阿拉伯文文本中，导致 Marketplace مدمج 渲染为 مدمج Marketplace。修复方法是仅布局顺序使用 LTR，内部每个阿拉伯文文本块显式设置 direction: rtl。另需注意 الـ 加拉丁词的陷阱：不要把阿拉伯文定冠词前缀（الـ、بالـ、للـ）紧放在隔离的拉丁词之前，分离的字母会跳到错误一侧，应去掉冠词（例如 عبر CLI 而非 عبر الـ CLI）或改写。在 RTL 语境中翻转方向性图标（箭头），阿拉伯文界面中的"下一个"箭头指向左侧。
规则五：标点与换行。阿拉伯文句子使用阿拉伯文标点：？而非 ?，؛ 而非 ,。若问号或逗号浮到错误一侧，原因几乎总是跨越边界的拉丁词元，将其包裹在 .ltr 中或改写句子，避免从句中间断开。标题跨行拆分时，每行必须自然延续句子，阿拉伯文读者会把堆叠行读作一个连贯思想。
规则六：移动端可读性。相同像素尺寸下阿拉伯文字形比拉丁文更密集。对于社交或移动画布（如 1080px 宽），正文保持约 36-40px 以上，展示型文字优先使用较粗字重（600-800）。
使用方式 在生成或审查包含阿拉伯文的设计时，默认应用以上规则。发布前按检查清单验证：确认没有任何含阿拉伯文的选择器使用负值 letter-spacing，可用 grep -nE "letter-spacing:\s*-" file.html 查找，每个命中项必须是纯拉丁文或数字，若包含阿拉伯文则改为 normal；确认每个阿拉伯文元素都有显式支持阿拉伯文的 font-family；确认展示型阿拉伯文行高不小于 1.3，正文不小于 1.5；确认嵌入的拉丁词和数字包裹在 .ltr 中，且没有 الـ、بالـ、للـ 紧接拉丁词，可用 grep -noE "(الـ|بالـ|للـ) ?<?[A-Za-z]" file.html 查找；确认没有 direction: ltr 祖先元素泄漏进阿拉伯文文本块。最后渲染并截图检查：字母是否连接（未被压扁、未被分离）、变音符号是否未被裁切、标点是否位于正确一侧、词序是否正确。
适用场景 适用于所有需要渲染阿拉伯文的 AI 生成设计，包括界面、网页、社交媒体或移动端画布等。
限制 该技能为设计规则与检查方法集合，具体实现依赖所使用的字体与浏览器环境；字体可用性和具体渲染效果可能因环境而异，资料未提供特定工具的安装步骤或平台限制。