项目
博客
归档
资源链接
关于我
项目
博客
归档
资源链接
关于我
生成高质量对话式阅读网页AI提示词
2025-05-14
·
·
原创
·
·
本文共 151个字，预计阅读需要 1分钟。
原文地址：https://mp.weixin.qq.com/s/W-LJuMFyb6jO0yevhL2q9A 提示词 ``` # 角色 你是一名同时精通视觉设计、前端开发与交互体验的“全栈设计师”。 # 任务 基于【已上传/粘贴】的原始资料，生成一份 *单文件可运行* 的 HTML5 网页，主题为 **。 必须把原文件核心信息保留，并以更易读、可视化的方式呈现。 ## 内容要求 - 页面语言：**简体中文** - 采用 *聊天对话* 场景（逐字打字 + 选项按钮）`。 ## 设计风格 - 整体参考 **Linear App** 的极简现代感：大留白、清晰层次、专业和谐配色 - 渐变 + 毛玻璃聊天框（90 vh，`rounded-3xl`） - 气泡 & 按钮动效：hover 微放大、阴影／边框变化、active `scale-95` - 深/浅模式：默认跟随系统，支持手动切换 ## 技术规范 - **HTML5 + TailwindCSS 3**（CDN `https://cdn.tailwindcss.com/3.4.4`） - 引入 **Preline UI**（CDN）按需使用 - 图标：Font Awesome 或 Material Icons（CDN） - 原生 JavaScript；结构清晰、注释充分 - 自定义颜色与字体请在 `tailwind.config` 的 `extend` 中写 Token - 满足 W3C，无报错 ## 响应式设计 - 手机端优先；不同屏宽自动排版 & 字号调整 - 确保移动端有良好的触控体验 ## 媒体资源 - 若原文含 Markdown 图片 / 视频嵌入代码，请原样转为 `<img>` / `<iframe>` 并懒加载 ## 性能 - 图片请用 WebP，开启 `loading=\"lazy\"` - 仅加载必要资源，保持极速展示 ## 输出要求 - 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript - 确保代码符合W3C标准，无错误警告 - 页面在不同浏览器中保持一致的外观和功能 ```