news 2026/6/23 1:54:27

前端 AI 技能包

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端 AI 技能包

AI前端审美&代码审查技能安装说明

1. 前端代码超级审查技能(代码规范校验)

安装指令:npx skills add https://github.com/langgenius/dify --skill frontend-code-review

功能作用:为AI编程工具搭载专业前端代码审查能力,可全方位审查项目代码,精准校验代码规范、逻辑漏洞、语法问题与兼容性问题,规避劣质代码产出,保障前端项目代码质量。

2. 高端前端审美优化技能(设计质感升级)

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

功能作用:赋予AI专业前端审美判断力,彻底告别千篇一律、模板化的劣质UI设计。该技能内置成熟的布局、排版、动效、留白设计规则,安装后AI编程工具将自动加载全套设计规则,智能生成质感高级、风格独特、符合现代审美标准的前端界面,杜绝同质化垃圾设计。

3. taste-skill 全套拓展技能包(按需安装)

taste-skill 内置多款细分前端设计&开发技能,分为代码实现技能(输出高质量前端代码)和图像生成技能(输出设计参考图,无代码),可单独安装适配不同开发场景,全部兼容主流AI编程工具。

▌一、代码实现类技能(核心开发专用)

① 严苛GPT适配版

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-taste"

功能作用:专为GPT、Codex优化的强化审美规则,更高的布局差异化、更流畅的GSAP动效逻辑,强力规避AI生成的劣质模板化界面,适配AI快速编码场景。

② 旧项目重构优化

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-existing-projects"

功能作用:针对已有前端项目,自动审计UI漏洞、布局错乱、间距不统一、层级混乱等问题,批量优化样式结构,适配旧项目迭代翻新。

③ 高端柔和视觉设计

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "high-end-visual-design"

功能作用:主打轻奢简约质感,弱化高对比刺眼样式,优化留白、字体层级、弹性动效,适合官网、后台、企业级产品界面。

④ 极简编辑器风UI

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "minimalist-ui"

功能作用:复刻 Notion、Linear 极简产品风格,克制配色、清晰结构、简洁排版,适配工具类、协作类、轻量化前端项目。

⑤ 工业粗野风UI

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "industrial-brutalist-ui"

功能作用:硬核机械设计风格,搭配瑞士字体、高锐度对比、实验性布局,适配创意官网、科技展示、个性化潮流前端页面。

⑥ 完整输出强制技能

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "full-output-enforcement"

功能作用:解决AI编码半成品、代码截断、大量占位注释问题,强制输出完整可运行代码,杜绝残缺代码交付。

⑦ 谷歌Stitch适配技能

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "stitch-design-taste"

功能作用:兼容Google Stitch设计规范,支持自动导出标准 DESIGN.md 设计文档,适配团队规范化开发流程。

⑧ 图像转代码专属技能

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "image-to-code"

功能作用:实现「参考图分析→结构拆解→代码还原」全流程,精准复刻设计稿布局、样式、动效,高度还原参考界面。

▌二、图像生成类技能(设计参考专用)

① 网页设计参考图生成

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-web"

功能作用:自动生成高质量官网、落地页、多模块网页设计稿,自带优质排版、间距与视觉层级,可直接作为开发参考。

② 移动端界面参考生成

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"

功能作用:适配iOS/安卓跨端规范,生成标准化移动端页面、交互流程设计稿,规避移动端适配、排版常见问题。

③ 品牌视觉套件生成

安装指令:npx skills add https://github.com/Leonxlnx/taste-skill --skill "brandkit"

功能作用:一键生成品牌LOGO方案、配色体系、字体规范、视觉应用套件,为前端项目配套统一的品牌视觉标准。

4. Three.js 3D游戏开发专属技能(threejs-game-skill)

官方正确仓库安装指令(适配Codex/Claude Code):
全量安装(推荐):npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a codex -g -y
仅安装核心导演技能:npx skills add majidmanzarpour/threejs-game-skills --skill "threejs-game-director"

功能作用:业界专业级Three.js游戏AI技能套件,专为浏览器3D精品游戏开发设计,内置完整Vite+TS+Three.js项目脚手架。区别于普通基础技能,可一键规范游戏架构、玩法逻辑、AAA级画质、交互适配、性能调优、自动化QA上线全流程,彻底解决AI生成3D代码散乱、画质粗糙、无游戏手感、移动端适配差、无法上线等痛点,可直接产出可游玩、可发布的高质量Web3D游戏。

▌threejs-game-skills 全套细分技能矩阵(9大专项技能)

① 核心总控导演技能 threejs-game-director(必装主技能)

全流程总控核心,无需手动调用细分技能,可智能调度所有3D游戏专项能力。自动搭建项目脚手架、统筹玩法、渲染、UI、音效、资源、调试、上线全流程,自动完成浏览器/移动端适配、性能检测、画面质检,是所有Three.js游戏开发的入口技能。

② 游戏玩法系统技能 threejs-gameplay-systems

专注游戏核心玩法与手感优化,标准化游戏循环、实体管理、物理碰撞、玩家移动、计分机制、目标系统。原生适配键盘、鼠标、触屏、游戏手柄全平台输入,统一相机跟随、视角控制逻辑,解决AI做游戏手感僵硬、判定错乱、交互失灵问题。

③ AAA级画质渲染技能 threejs-aaa-graphics-builder

专业影视级3D画面优化,替代AI默认简陋渲染逻辑。支持PBR材质、光影烘焙、动态阴影、泛光、SSAO、SSR后期特效,标准化模型、贴图、场景细节规范,自带画面评分体系,一键将粗糙3D场景升级为精品游戏画质。

④ 游戏UI界面技能 threejs-game-ui-designer

专为3D游戏定制UI体系,适配HUD、游戏菜单、悬浮弹窗、移动端虚拟按键、安全区域适配。自动规避UI遮挡、文字溢出、触控区域失效问题,支持响应式布局,统一游戏视觉层级,适配PC/手机全终端。

⑤ 调试&性能剖析技能 threejs-debug-profiler

专治Three.js开发常见问题:黑屏、渲染报错、模型加载失败、移动端兼容bug、帧率卡顿、内存泄漏。可精准检测绘制数量、三角面数量、贴图占用、渲染开销,自动给出性能优化方案,保障游戏稳定流畅运行。

⑥ 上线QA验收技能 threejs-qa-release

游戏发布专用验收技能,自动执行构建打包、浏览器兼容检测、画布像素校验、移动端适配核验、截图校验、风险排查。生成完整上线检测报告,确保项目满足正式发布标准,杜绝上线bug。

⑦ 3D模型资产生成技能 threejs-3d-generator

对接Tripo API,支持文本/图片一键生成游戏级GLB/FBX模型,包含角色、载具、道具、建筑、武器等资产。自带骨骼绑定、动画适配、纹理优化、模型格式转换,解决3D游戏优质模型资源缺失问题。

⑧ 游戏图像素材技能 threejs-image-generator

依托Gemini API生成游戏概念图、天空贴图、纹理、图标、LOGO、UI素材、场景参考图,为3D建模、场景搭建、界面设计提供高质量素材支撑,完美适配游戏视觉风格统一化需求。

⑨ 游戏音频音效技能 threejs-audio-generator

对接ElevenLabs API,一键生成游戏环境音、交互反馈音效、技能特效音、旁白语音,支持音频降噪、适配游戏音频逻辑,补齐游戏沉浸感,解决AI开发游戏无音效、音质杂乱的问题。

补充:可选API密钥配置(非必需)

核心3D开发无需密钥即可使用全部基础能力;配置密钥可解锁AI资产生成能力:Tripo模型、Gemini图像、ElevenLabs音频,按需配置即可。

标准化游戏机制开发模板,支持玩家移动、碰撞判定、计分系统、NPC交互、射击交互等核心游戏逻辑,让AI生成的游戏代码结构清晰、可迭代、可扩展。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/23 1:46:15

拆解企业AI平台的8大功能模块,从技术架构到落地实践

前言:为什么你需要了解AI平台的功能模块?在为企业提供AI咨询服务的这些年里,我经常被问到:"市面上有这么多AI产品,到底哪个适合我们?"我的回答通常是:不要看产品名称,要看…

作者头像 李华
网站建设 2026/6/23 1:33:03

如何打包docker镜像文件

1、进行打包【镜像本身】(推荐,保留分层、启动参数)# 语法:docker save -o 输出文件 镜像名/镜像ID # 1)当前目录输出tar(在哪执行,包就在哪) docker save -o app.tar myapp:1.0# 2&…

作者头像 李华
网站建设 2026/6/23 1:31:06

如何用5个步骤彻底解决音频格式混乱问题

如何用5个步骤彻底解决音频格式混乱问题 【免费下载链接】freac The fre:ac audio converter project 项目地址: https://gitcode.com/gh_mirrors/fr/freac 你是否曾经遇到过这样的烦恼?手机里的音乐文件格式五花八门,电脑上收藏的专辑无法在车载…

作者头像 李华
网站建设 2026/6/23 1:25:17

[特殊字符] 从零到一:使用最新技术栈爬取 App Store 与 Google Play 全量评论——Python 爬虫终极指南

1. 为什么需要爬取应用商店评论 在移动互联网时代,App Store 与 Google Play 是两大应用分发巨头。每天产生海量用户评论,这些评论蕴含着: 用户反馈:功能缺陷、UI 建议、性能问题 竞品情报:对手的优缺点、用户流失原因 市场趋势:热门功能、用户偏好变化 异常检测:刷…

作者头像 李华
网站建设 2026/6/23 1:04:17

Linux网络配置与文件下载实验报告

一、实验目的本次实验是Linux操作系统课程的网络部分实操练习,旨在通过具体任务掌握Linux系统下的网络管理与文件下载方法。二、实验环境本次实验在VMware Workstation虚拟机环境中进行,具体配置如下:操作系统:CentOS 7 x86_64网络…

作者头像 李华
网站建设 2026/6/23 1:03:21

国产替代优选:实验室三维光学轮廓仪推荐

一、引言 实验室采购与产线批量采购存在本质差异。实验室场景通常面临预算审批周期长、单次采购数量少、样品类型高度分散、操作人员流动性大等现实问题。一台适合实验室的三维光学轮廓仪,不仅需要满足精度要求,更需要兼顾易用性、样品适应性和长期持有成…

作者头像 李华