SuperAPI AI 工具集

gemini-frontend-design

前端与建站

查看项目

更新于 10-15 21:09

技能介绍

用途:该技能用于生成具有鲜明美学风格、可直接用于生产的前端界面。它把设计构思交给 Gemini 3 Pro,再由 Claude 复核与打磨,避免常见的模板化“AI 风格”界面。

主要能力:支持落地页、仪表盘、表单、卡片等组件或页面类型;可指定框架(React、Vue、原生)与样式方案(Tailwind、CSS);输出包含设计方向、标志性元素、配色(主色/辅色/强调色/背景/文字)、字体(展示字体与正文字体)以及完整代码,并包含动画、微交互、响应式、语义化 HTML 与无障碍属性。

使用方式:分四步。第一步解析用户需求,提取组件类型、用途、技术约束与美学偏好。第二步用 Bash 执行 Python 调用 Gemini,模型为 gemini-3-pro-preview,temperature 为 0.9,需设置环境变量 GEMINI_API_KEY,命令形如 python -c "...",其中替换 {REQUIREMENTS}。第三步用 Edit/Write 工具校验并保存代码,检查完整性、美学一致性、字体与动画。第四步向用户展示设计方向、标志性元素、配色字体与完整代码。复杂项目可多次调用 Gemini,分别尝试不同美学方向后让用户选择或综合。

适用场景:需要独特视觉风格的前端页面与组件设计、多方案风格探索、希望结合两个模型视角的界面创作。

限制:依赖 Gemini API 与 GEMINI_API_KEY;模型标识为 gemini-3-pro-preview;未提供价格、平台支持范围与效果保证等信息。