用途
该技能用于将前端设计与实现对齐到本仓库使用的 IOM ITB 设计系统。当需要创建或更新 Vue 与 Tailwind 页面、布局等 UI 工作时使用，以保持界面与现有 IOM 视觉系统一致。
主要能力
- 区分目标界面类型：公开站点（营销、捐赠、活动、商品、信息类页面）与管理后台（需登录的仪表盘 CRUD 页面、表格、筛选、弹窗、分析）。
- 按界面类型加载对应参考文件：公开站点读取 references/public-site.md，管理后台读取 references/admin-dashboard.md。
- 在调整样式细节前，先保留现有交互模型，包括路由结构、组件组合、表单行为与数据流。
- 复用现有设计令牌与基础组件，优先使用已有颜色、圆角、阴影、间距节奏与组件模式。
- 匹配仓库的克制程度：公开站点品牌感强、友好、圆润、以 IOM 蓝色为中心；管理后台偏模板化、中性、以生产力为先，灰色表面加靛蓝点缀。
- 在代码中对照邻近页面进行视觉验证，检查标题、CTA 权重、边框圆角、间距密度与移动端行为。
使用方式
- 先对目标界面进行分类：公开站点或管理后台。
- 只加载相关参考文件。
- 在样式细节之前保留现有交互模型，不重新设计信息架构（除非用户明确要求）。
- 复用现有令牌与基础组件；若必须新增令牌，应使其接近当前系统而非引入新主题。
- 匹配仓库的克制程度，避免意外混用两套美学。
- 在代码中对照邻近页面进行视觉验证，若新 UI 与现有屏幕放在一起显得突兀则修改。
- 当本地模式不明确时，优先采用用户既有的管理后台偏好：紧凑、基于列表、专业、接近 AWS 控制台风格但不复制 AWS 品牌。
设计规则
公开站点
- 优先使用 text-main 与白色作为核心调色板，搭配柔和浅色区块与少量辅助灰色。
- 优先使用大号居中标题、粗字重、圆角胶囊与充裕的垂直间距。
- 优先使用友好、内容驱动的区块，而非密集的应用外壳布局。
- 在符合现有页面模式时，可自由使用图像、横幅、卡片与清晰的 CTA 按钮。
- 表单保持亲和：白色卡片、中等阴影、圆角、灰色输入框、清晰标签。
- 默认采用移动优先布局，干净堆叠并逐步加宽。
管理后台
- 优先使用中性灰色表面、白色卡片、深色侧边栏导航与靛蓝或蓝色点缀。
- 布局保持实用：应用外壳、页头、侧边栏、内容容器，然后是数据组件。
- 优先使用紧凑标题、表格、筛选、分页器与操作按钮，而非营销风格区块。
- 复用标准表单控件与 CRUD 表格模式，而非创建定制组件。
- 动效保持最小且功能性。
- 管理后台 CRUD 页面与表单优先使用基于列表的布局，当卡片密集页面显得笨重时。
- 不要过度使用卡片。避免卡片套卡片、表格卡片内嵌筛选卡片，以及当列表、表格或简单分隔线更清晰时重复使用装饰性面板。
- 当路由、侧边栏或页面上下文已使屏幕显而易见时，移除冗余的页面标题与标签。
- 将“x data tampil”或“filter aktif”之类的通用计数器替换为有助于管理员操作的信息，或直接省略。
- 数据库值以面向用户的印尼语标签显示，而非数据库中的原始枚举/状态字符串。
- 仅内部信息（如 PIC 姓名与电话号码）不得出现在公开页面。
管理后台排版
- 正文使用 Manrope。
- 管理后台标题/展示在可用时使用 Google Sans Flex。
- 避免过度使用大写。优先使用 Pascal Case 或句子式标签，然后通过大小与字重建立层级。
- 侧边栏中的区块标签可稍大且半粗，但不应显得生硬或过亮。
- 侧边栏项目标签应一目了然；使用中等大小，非活动项使用正常至中等字重，仅活动/重要状态使用半粗。
管理后台控件
- 文本字段、日期输入、下拉触发器与搜索输入应共享相同的边框样式，除非有强烈的本地理由。
- 首选控件边框：border border-[#8c8c94] 或最接近的现有中性令牌，圆角约 8px，白色背景，无重阴影。
- 字段标签应深色且略粗；辅助文本应柔和且明显次要。
- 占位符文本应明显比已输入文本更浅。
- 自定义下拉触发器应平衡左右内边距，箭头侧不应显得局促。
- 当样式重要时使用真正的自定义下拉组件；避免回退到原生 macOS select 弹窗。
- 下拉菜单容器不应在选项列表周围添加额外上下内边距，除非分组需要。
- 下拉箭头/图标应视觉上足够结实，以匹配文本字重。
管理后台侧边栏
- 在侧边栏头部使用 IOM 标志，除非周围实现已要求，否则不加白色背景卡片。
- 避免在侧边栏与页头中重复相同的品牌/标志/标题。
- 侧边栏对比度很重要：深蓝背景需要浅色文本、柔和的蓝白色次要标签与清晰的激活状态。
- 在侧边栏中用有用的分类标签对相关路由进行分组。
- 使用独特、功能特定的线性图标，而非在不相关菜单项中重复通用图标。
- 活动侧边栏项应干净地填满整行宽度，并包含清晰的左侧活动标记。
管理后台表单
- 优先使用基于列表或分区的表单布局：宽屏时标签/帮助在左、控件在右，移动端堆叠。
- 一致对齐输入列，使文本字段不出现错落。
- 保持相关字段分组，但在添加另一张卡片之前先使用间距、分隔线与标题。
- 不要在表单中添加不必要的“胶囊”元数据。
- 文件输入与图片上传控件应清晰传达空/当前状态，而不使该行显得笨重。
管理后台表格
- 表格应可读且紧凑，具有清晰的边框与行分隔。
- 存在排序时使用可排序表头。当数据模型受益时支持多键排序。
- 排序提示应看起来像下拉/箭头控件，点击后不应显示侵入性焦点边框。
- 表格相关文档或键值列表需要足够强的边框以便扫描，但仍与其余管理后台 UI 一致。
管理后台图标
- 优先使用来自一致视觉家族的简单线性图标，如 Lucide 风格图标。
- 按功能选择语义图标：捐赠/支付、学校/院系、商品、收据/交易、合作、日历活动、指南/文档、用户/成员流程不应全部复用同一个通用日历/图表图标。
- 保持图标描边宽度与侧边栏文本字重及活动/非活动对比一致。
共享约束
- 使用与周围文件相同风格的 Tailwind 工具类组合。
- 保留仓库当前的圆角偏好，而非切换到锐利的企业风格。
- 优先编辑现有组件，而非创建用途重叠的并行变体。
- 颜色更改保持保守。若周围代码使用 bg-main、text-main、bg-white、bg-gray-200 或靛蓝点缀，则保持在该范围内。
- 排版保持字重驱动。此代码库更多依赖字重与大小，而非复杂的字体系统。
- 当 UI 工作涉及数据塑形时，保持 DTO、类型提示与关注点分离干净。当类型化 DTO、映射器或计算归一化层更合适时，避免分散的清理逻辑或大量本地 if 分支。
参考文件
- references/public-site.md：在处理营销站点、捐赠流程、信息页面、公开表单或公开导航时阅读。
- references/admin-dashboard.md：在处理仪表盘页面、表格、分析组件、CRUD 表单、侧边栏/页头布局或管理后台弹窗时阅读。
适用场景
- 创建或更新 Vue 与 Tailwind 页面、布局。
- 公开站点的营销、捐赠、活动、商品与信息类页面。
- 管理后台的 CRUD 页面、表格、筛选、弹窗与分析界面。
限制
- 不重新设计信息架构，除非用户明确要求。
- 不创建用途重叠的并行组件变体。
- 不将仅内部信息（如 PIC 姓名与电话号码）放入公开页面。
- 不意外混用公开站点与管理后台两套美学。
- 当公开站点与管理后台模式冲突时，优先与目标应用保持本地一致性，而非抽象的设计整洁。
- 若用户要求更宏大的重新设计，保持相同品牌 DNA 与交互模式，除非他们明确希望更广泛的视觉偏离。
- 关于该技能的收费、价格、平台支持等具体信息暂未提供。