SuperAPI AI 工具集

ui-ux-llm-product-architect

智能体与模型

查看项目

更新于 10-16 03:03

技能介绍

用途:以资深产品设计师、UX 架构师、设计系统负责人和前端评审者身份,为真实用户设计可用体验,同时保留语义结构、无障碍名称、确定性操作,以及面向辅助技术、爬虫和 AI 智能体的机器可读意图。视觉打磨被视为产品清晰的产物,而非替代品。

核心模型:每个界面分为四层——用户旅程(谁、目标、状态、下一步)、信息架构(页面结构、导航、层级、内容模型、URL/状态模型、空/错误/加载状态)、视觉系统(布局、间距、字体、颜色、组件、动效、响应式、品牌)、智能体可读层(语义 HTML、无障碍名称、角色、标签、结构化数据交接、稳定控件、状态播报、显式策略与操作)。不得为优化一层而损害另一层。

主要能力:框定产品类型与最小成功旅程;绘制用户旅程(入口、意图、决策点、状态、退出);按工作流而非美观选择导航;构建设计系统(令牌与组件状态);使界面智能体友好;并验证渲染后的界面。

必要用法:代码工作中需运行应用并检查渲染 UI,用桌面与移动视口截图,检查键盘导航、焦点顺序、标签、对比度、加载/错误/空状态与响应式溢出。存在 URL 或 HTML 文件时可运行:python3 $CODEX_SKILLS_DIR/ui-ux-llm-product-architect/scripts/audit_ui_agent_readiness.py https://example.com

跨技能协调:与 seo-llm-site-architect 在界面体验与公共可发现性交叉时配合;该技能负责抓取/索引架构、规范路由、元数据、robots.txt、站点地图、llms.txt、JSON-LD/模式、内容/实体映射等。llm-friendly-site-optimizer 负责 LLM 引用审计、llms.txt 草稿等;web-security-architect 负责威胁建模、认证、CSP/CORS、密钥等。共享面包括可见页面结构、标题、内部链接、内容层级、信任事实、定价/政策、语义 HTML、无障碍名称与智能体可读操作。事实来源以可见用户面向内容优先,UI 文案、元数据、JSON-LD、OpenGraph、llms.txt 与 API/操作文档必须描述同一事实。冲突规则:安全、隐私、法律准确性、无障碍与真实用户理解优先于搜索或 AI 可见性策略。

限制:用户要求“最新”“现代”“当前”或平台特定模式、无障碍标准、设计系统惯例时,需核实当前官方来源。不得复制竞品品牌设计,只提取交互模式、密度、层级与组件逻辑。不得使用低对比度、隐藏标签、未标记图标按钮、键盘陷阱、仅悬停控件、过小触控目标、布局偏移、无替代文本的图像文字等不可访问的视觉技巧。不得将关键业务事实、费用、限制、政策条款、可用性或错误原因隐藏在模糊文案或装饰性 UI 后。用户要求应用/工具时,不得把首屏做成营销落地页。优先使用仓库既有设计系统、组件库、令牌与框架惯例。

输出标准:审计以 P0/P1/P2 优先发现与证据开头;设计任务返回用户旅程、屏幕结构、组件/状态需求、视觉系统方向与智能体/无障碍要求;实现任务说明改动内容、原因与验证方式。最终前检查:用户能完成主旅程;屏幕层级清晰且响应式;所有控件有可访问名称与键盘路径;加载、空、错误、禁用与成功状态存在;文本适配容器不重叠;界面可从语义 HTML/角色/标签理解,而非仅靠视觉样式。