文章背景图

Trae AI 助力 Halo 主题开发-终端主题开发

2026-01-18
20
-
- 分钟
|

想试点新玩意,让他集成pjax NProgress(进度条)和配置 Pjax 转场动画 以及懒加载

让ai自己集成

ai创建一个项目规则

手动移动到.trae/rules 目录下面

开始开发

我输入了一个 设计极客终端风格的web主题 然后通过trae一键优化提示词,并引用刚才的项目规则

提示词
设计一个极客风格的终端样式Web主题,要求具有以下技术特性和视觉元素:

1. 视觉风格:
- 采用经典的黑底绿字终端配色方案(#00FF00文字/#000000背景
- 模拟CRT显示器的扫描线效果和轻微的光晕
- 包含闪烁的光标动画效果
- 使用等宽字体(如Courier New或Fira Code)

2. 交互元素:
- 所有UI组件(按钮/输入框等)都设计成终端命令行样式
- 实现命令行输入时的打字机效果
- 添加终端启动时的ASCII艺术欢迎界面
- 包含模拟命令行提示符(如"user@host:~$ ")

3. 功能要求:
- 完全响应式设计,适配各种屏幕尺寸
- 支持暗黑/明亮模式切换(通过终端命令实现)
- 实现终端特有的滚动回显效果
- 添加合理的终端音效(如键盘敲击声)

4. 技术实现:
- 使用CSS变量实现主题定制
- 采用Web Animation API实现动画效果
- 确保WCAG 2.1 AA无障碍标准合规
- 提供完整的主题文档和使用说明

5. 测试要求:
- 在主流浏览器(Chrome/Firefox/Safari/Edge)最新版本测试
- 验证移动端触控操作的可用性
- 性能测试确保动画流畅(60fps)

随便找了一个终端图放上

首页演示图

一次成功无报错。。。,

评论交流

文章目录