用途:基于 Poseidon 设计规范完成企业后台界面的前端开发、原型设计与 UI 评审,覆盖顶部导航菜单、一级页面、二级页面、弹窗、抽屉、表单、表格、图表、反馈组件等后台 UI。
主要能力:先识别任务属于前端开发、原型设计、UI 评审还是评审并修复,再确认输入与交付物。开发时复用项目现有布局、组件库、设计令牌、图标、路由与状态管理,不擅自切换框架或引入新 UI 库;原型设计遵循用户指定工具与格式,产出范围受控、可预览的原型;UI 评审默认只读,按严重级别输出可定位证据、影响与修复建议。
使用方式:存在目标项目时,从根目录到目标文件逐级读取 AGENTS.md,检查技术栈、目录结构与既有实现。按任务读取 references 下的页面资料与组件拆分图,先读设计基础,再按页面类型读取对应 Markdown 与 PNG。查看组件 PNG 或含组件规则的 Markdown 后,到 Ant Design Vue 组件总览定位对应组件,读取官方 Vue 示例源码,记录“Poseidon 参考 → Ant Design Vue 组件 → 官方 Vue Demo”对应关系;禁止用 React/JSX/TSX 示例替代。官网无法提取时读取 vueComponent/ant-design-vue 仓库对应 demo/*.vue。
核心约束:以 4px 为间距网格;输入框和按钮默认 4px 圆角,卡片和菜单选中背景默认 8px 圆角;左侧全局菜单默认 220px 展开,可折叠为 58px;二级页面另有 140px 二级导航。为按钮实现默认、悬停、按下、焦点、加载和禁用状态;不可逆操作提供二次确认。弹窗与抽屉需锁定背景滚动、管理焦点、支持 Escape。
适用场景:企业后台页面开发与改造、从需求或设计稿创建可预览原型、对代码或视觉产物进行 UI 评审。
限制:目标项目未使用 Ant Design Vue 时不要新增依赖;找不到精确官方示例时需明确记录缺口。原型不引入生产级后端、认证或基础设施。评审默认只读,除非用户明确要求修复。