SuperAPI AI 工具集

ui-design

设计与创作

查看项目

更新于 11-04 19:58

技能介绍

用途:ui-design 是一个面向 AI 编码助手(Codex)的 UI 设计技能,用于根据文字需求、截图或视频创建、探索或描述用户界面设计,也提供对既有 UI 的只读审查能力。

主要能力:

  • 七种模式:fast(快速原型实现)、good(深入研究后高质量实现)、explore(先出 1–3 个发散草稿供选择)、describe(从截图/视频生成超详细文字描述与实现计划,不写代码)、screenshot(从截图重建可用代码)、video(从视频重建设计与交互)、review(只读审查报告)。
  • 两条设计路线:product(仪表盘、管理后台、SaaS 应用、工具)与 marketing(落地页、营销站点、创意作品),可与任意模式组合。
  • 本地设计情报检索:通过脚本按产品类型、风格、字体、颜色等域查询候选建议。
  • 旅程优先流程:先分析并呈现主要用户旅程,再读取项目设计原则、设计系统与既有 UI,然后进行低模结构设计、视觉设计、实现与验证。
  • 质量底线:覆盖界面状态(默认、加载、禁用、错误、空、成功)、交互反馈、对比度、触控目标、响应式重排与文案。

使用方式:在 Codex 中以 $ui-design 调用,参数包括 --mode(默认 fast)与 --lane(默认 product),以及简报、截图、视频或审查范围。设计模式下按固定顺序执行:旅程报告、设计权威读取、设计情报检索、视觉素材分析、低模结构、设计、实现、验证与报告。默认使用纯 HTML/CSS/JS;未指定框架时不做额外技术选型。

适用场景:需要快速生成产品界面原型、从截图或视频复刻界面、对已有 UI 做系统性审查、为落地页或管理后台建立设计方向。

限制:依赖 Codex 宿主能力;描述模式不输出代码;审查模式只读报告,修复需显式启用 fix-loop;资料未提供具体收费、平台兼容范围与效果数据。