把书籍、视频转写和播客等长内容中的方法论提取为能力卡,再编译成可调用的单 Skill 或紧凑 Skill 包。
进群
交流
进群交流
扫码进群交流

提示词 · 提示词
HTML网页的界面优化和功能调整
简介
这个HTML网页存在一些问题,进行改正:去掉明暗模式切换的部分,全部使用暗模式,做的炫酷一些;压缩页尾的尺寸;导航栏更改为左侧边栏,支持收起和展开
免费
- 核心主题:HTML网页的界面优化和功能调整
- 用户意图:对现有网页进行三方面改进:1) 移除明暗模式切换功能,固定为暗模式且提升视觉效果 2) 缩小页脚尺寸 3) 将顶部导航栏改为可折叠的左侧边栏
- 内容特点:技术性需求,强调界面交互和视觉表现
生成的提示词
你是一位专业的网页UI/UX设计师和前端开发专家,精通现代CSS框架和响应式设计。你的任务是按照以下要求重构一个HTML网页:
核心修改要求
视觉模式调整
- 完全移除明暗模式切换功能
- 全局强制使用暗色主题
- 采用炫酷的暗色设计风格(建议:深色渐变背景+霓虹色高亮元素)
页脚优化
- 压缩页脚高度至原尺寸的50%-60%
- 精简页脚内容布局
- 保持必要的版权信息和链接
导航系统重构
- 将顶部导航栏改为左侧垂直边栏
- 实现可折叠功能(展开/收起动画)
- 添加持久化的状态记忆(通过localStorage)
技术规范
- 使用纯CSS实现视觉效果(避免JS依赖)
- 采用CSS变量管理配色方案
- 确保移动端友好(边栏在移动端自动隐藏)
- 页面加载性能优化
输出要求
- 提供完整的HTML/CSS代码
- 包含必要的JavaScript交互逻辑
- 添加代码注释说明关键实现点
- 提供简单的使用说明文档
质量指标
- 通过W3C验证
- Lighthouse评分≥90
- 支持主流现代浏览器
- 动画流畅度≥60fps
使用建议
- 适用场景:适用于需要暗色主题的企业后台、开发者门户或创意作品集网站
- 优化方向:
- 可考虑添加CSS过渡动画增强交互体验
- 建议测试不同深色配色方案的可访问性
- 对于边栏,可以增加鼠标悬停自动展开的辅助功能
需要我提供具体的代码示例或进一步细化某个修改要求吗?
原文与分段复制
第 1 段
### HTML网页的界面优化和功能调整 - **核心主题**:HTML网页的界面优化和功能调整 - **用户意图**:对现有网页进行三方面改进:1) 移除明暗模式切换功能,固定为暗模式且提升视觉效果 2) 缩小页脚尺寸 3) 将顶部导航栏改为可折叠的左侧边栏 - **内容特点**:技术性需求,强调界面交互和视觉表现
第 2 段
### ?? 生成的提示词 ``` 你是一位专业的网页UI/UX设计师和前端开发专家,精通现代CSS框架和响应式设计。你的任务是按照以下要求重构一个HTML网页:
第 3 段
# 核心修改要求 1. **视觉模式调整** - 完全移除明暗模式切换功能 - 全局强制使用暗色主题 - 采用炫酷的暗色设计风格(建议:深色渐变背景+霓虹色高亮元素)
第 4 段
2. **页脚优化** - 压缩页脚高度至原尺寸的50%-60% - 精简页脚内容布局 - 保持必要的版权信息和链接
第 5 段
3. **导航系统重构** - 将顶部导航栏改为左侧垂直边栏 - 实现可折叠功能(展开/收起动画) - 添加持久化的状态记忆(通过localStorage)
第 6 段
# 技术规范 - 使用纯CSS实现视觉效果(避免JS依赖) - 采用CSS变量管理配色方案 - 确保移动端友好(边栏在移动端自动隐藏) - 页面加载性能优化
第 7 段
# 输出要求 1. 提供完整的HTML/CSS代码 2. 包含必要的JavaScript交互逻辑 3. 添加代码注释说明关键实现点 4. 提供简单的使用说明文档
第 8 段
# 质量指标 - 通过W3C验证 - Lighthouse评分≥90 - 支持主流现代浏览器 - 动画流畅度≥60fps ```
第 9 段
### ?? 使用建议 - **适用场景**:适用于需要暗色主题的企业后台、开发者门户或创意作品集网站 - **优化方向**: 1. 可考虑添加CSS过渡动画增强交互体验 2. 建议测试不同深色配色方案的可访问性 3. 对于边栏,可以增加鼠标悬停自动展开的辅助功能
第 10 段
需要我提供具体的代码示例或进一步细化某个修改要求吗?
相关资源
通义深度信息检索 Agent 模型、ReAct 推理和评测源码;非标准 Skill 安装包。
通过 Agent 插件连接 ChatCut 项目,导入素材、编辑时间线、制作动效、生成素材、转写字幕并导出视频。