SuperAPI AI 工具集

frontend-master

前端与建站

查看项目

更新于 10-16 01:16

技能介绍

用途:Frontend Master 用于前端 UI/UX 实现,借助 Gemini CLI 的 --yolo 模式自动完成视觉与样式改动。适用于颜色、背景、边框、阴影、flex/grid 布局、间距、定位、字体排版、动画过渡、响应式断点、Tailwind 与 CSS-in-JS 组件样式,以及基于截图或设计稿生成/修改组件。纯逻辑、API 调用、状态管理、事件处理、类型定义与业务逻辑不适用,应改用 logic-master。

主要能力:检测任务是否包含图片(.png、.jpg、.jpeg、.webp、.gif、.svg、.pdf)。有图片时走两阶段:先用 @ 引用图片路径让 Gemini 分析 UI 结构(布局、组件、颜色、排版、间距、交互、响应式),结果保存到临时文件;再把分析注入实现提示。无图片时直接执行实现。完成后用 lsp_diagnostics 检查类型/构建错误并修复。

使用方式:核心命令为 gemini --yolo -p "<instruction>",可配合 --include-directories 添加上下文目录,--all-files 引入全项目上下文。图片分析示例:gemini --yolo -p "$ANALYSIS_PROMPT" > /tmp/ui-analysis.md;实现时读取分析文件并注入提示。也支持 cat <frontend-file> | gemini --yolo -p "<instruction>" 的管道用法。

限制与安全:--yolo 会自动批准所有更改,仅应在版本控制目录中使用;@ 引用的图片会在 Gemini CLI 上下文中处理,运行前需确认路径访问策略。命令挂起时确认已加 --yolo;无改动时检查 --include-directories;图片无法识别时使用绝对路径。资料未提供收费、价格与平台支持等细节。