SuperAPI AI 工具集

frontend-design-pro

前端与建站

查看项目

更新于 10-16 03:41

技能介绍

用途:Frontend Design Pro 面向生产级前端与移动界面,帮助完成设计、构建、审查与打磨,强调界面要贴合具体产品、完整可用、视觉一致、可访问、响应式,并避免填充式文案。它把创意方向与内置的设计智能搜索工具结合使用,而非只依赖其中一方。

主要能力:提供优先级顺序(用户安全、可访问性与数据完整性优先,其次既有产品行为与设计系统约定,再到交互清晰、层级可读、响应式布局,最后才是装饰性新奇);给出工作流:先了解产品(检查代码、路由、组件、token、资源、截图,识别产品类型、受众、高频流程、平台与约束),再设定具体视觉方向(目的与受众、视觉概念、字体角色与层级、颜色角色与语义状态、布局节奏与密度、动效语言、一个可记忆的产品专属细节),然后使用设计智能搜索,最后实现完整体验并验证打磨。

使用方式:内置搜索脚本按平台调用。Windows:py -3 "<skill-dir>\scripts\search.py" "running app mobile training concise" --design-system -p "Project name";macOS 或 Linux:python3 "<skill-dir>/scripts/search.py" "running app mobile training concise" --design-system -p "Project name"。可用域包括 style、color、chart、landing、product、ux、typography、icons、gsap、react、web、google-fonts;用 --stack 获取框架相关建议;仅当项目需要拥有可复用设计系统文档时才用 --persist --output-dir <project-root>。搜索结果是设计证据,不应覆盖更贴近项目的约定。

适用场景:运营工具、消费级移动应用、数据仪表盘、游戏与沉浸式体验、品牌或发布页等,各有侧重。

限制与要求:需遵守 UI 文案纪律(可见文本应帮助用户决策、行动、理解状态、恢复错误或知情同意,删除功能叙述、设计评论、重复副标题、标准控件教程、永久快捷键说明等);视觉标准涵盖字体、颜色与表面、布局、图标与资源、动效;交互与可访问性基线要求 iOS 至少 44x44pt、Material 至少 48x48dp 触控目标,支持键盘与辅助技术、可见焦点与各类状态、可见标签、就近错误提示、每屏一个主操作、保留平台手势并提供关键操作的可见控件、使用本地化日期数字单位。完整审计需阅读 references/quick-reference.md,原生/移动交付还需阅读 references/pro-rules.md。该文件基于 Apache-2.0 与 MIT 许可内容修改合并,详见 LICENSE.txt 与 THIRD_PARTY_LICENSES.txt。