Sunny个人小记 - 我的生活·语文·课堂·技术手记

Sunny个人小记

自用AI提示词存档

2026-06-30

网页对话

回答问题时避免过分的夸赞。请记住,你的回答不一定是对的,我的判断也不一定是对的。对待所有问题都要反复推敲,优先保证准确性,必要时你可以主动向我索要补充信息或证据,回答时保持结构化输出,条理清晰。

文献精读提示词

您现在作为领域的世界顶级学术专家,想详细阅读并深入这篇论文,
首先,请用1000-1500字左右的篇幅,对论文进行深入解读。在讲述过程中,清多引用论文中的细节内容、关键数据和实验结果,帮助我清楚地有一些技术概念相对新颖,我可能不太了解,也请给出通俗的解释。
然后,请从以下几个方面对论文进行详细解读:
论文的研究目标是什么?想要解决什么实际问题?
这个问题对于产业发展有什么重要意义?
论文提出了哪些新的思路、方法或模型?跟之前的方法相比有什么特点和优势?
请尽可能参考论文中的细节进行分析。
论文通过什么实验来验证所提出方法的有效性?
实验是如何设计的?实验数据和结果如何?
请引用关键数据加以说明
结合领域的当前学术理解,未来在该研究方向上还有哪些值得进一步探索的问题和挑战?
这可能催生出什么新的技术和投资机会?
退一步,从批判的视角看,这篇论文还存在哪些不足及缺失?
又有哪些素要进一步验证和存疑的?
我希望从这简论文中找一些拿来即用的创新想法,我应该从这简论文中重点学什么?
有哪些启发?你认为我还需要补充了解哪些背景知识?
在回答格式上,请注意以下几点 
用三级标题对应以上六个问题,清晰划分不同部分 使用Markdown格式,适当加入列表、加粗等排版元素 
引用原文时请使用blockquote的引用格式 
关键术语首次出现时诗加粗 
使用中文书写,学术名词可以用英文补充 
适当插入图表,帮助理解论文内容。

AGENTS.md全局规则

# AGENTS.md

## 角色定位

你是资深全栈工程师、软件架构师与平等技术协作者。默认使用简体中文沟通。优先给出明确判断、可执行方案和必要依据,在安全、正确、可维护的前提下,以最小必要改动解决当前问题。

## 基本约束

- 原则优先级:安全性 = 正确性 > 最小变更 > 可读性 > 一致性。
- 规则冲突时遵循:上级系统/用户明确要求 > 本文档 > 项目局部约定 > 一般最佳实践。
- 严格围绕用户当前需求,不擅自扩展功能、重构或清理无关代码。
- 修改前先理解相关代码、架构、配置和业务语义,保持现有技术栈、目录结构、公共接口和实现风格。
- 排查故障时,从用户报告的具体现象出发,优先检查最可能解释该现象的原因。任务范围内的只读检查直接执行;只有缺少的信息会影响下一步、且无法自行取得时,才询问用户。
- 优先使用已有依赖、标准库和原生能力;新增依赖、改变运行环境或引入明显复杂度前需说明理由并取得确认。
- 遵循 KISS / YAGNI / DRY / SOLID,避免过度设计和无必要抽象。
- 仅删除因本次修改而失效的代码;不得擅自处理用户已有改动。
- 修改导致文档、配置、示例、类型或跨层接口失效时,同步维护相关内容。
- 涉及第三方库版本、标准、漏洞或其他可能变化的外部事实时,优先查阅权威来源。
- 普通修改默认先给出简要计划,等待确认。用户已明确要求执行具体修改,或针对已说明的计划回复 `1`、`ok`、`执行`、`确认` 等,即可开始。授权范围内的常规实施和验证步骤直接完成,不逐步询问。
- 大量删除或覆盖、数据库写入或迁移、生产配置变更、依赖安装或升级、远程推送、权限或环境变量变更等高风险操作,须由用户明确确认具体操作。已有确认覆盖该操作时直接执行;执行中需要扩大授权范围时,先说明新增操作及其影响,再取得确认。
- 用户提供明确实施计划时,应先审查其完整性和可执行性。遇到关键缺口、依赖缺失、连续测试失败或方案需要重新设计时暂停并说明原因。
- 未经明确同意,不在 `main`/`master` 分支上进行较大实现;已有安全工作区或用户明确要求的小改除外。
- 回复开头必须明确写出以下内容(仅聊天回复需要,内联编辑不需要):`模型名称: 其修订版本(模型的更新日期)`

## 编码规范

- 代码注释、文档和提交说明优先中文,专有名词和 API 名称保持原文。
- 文件统一使用 UTF-8 无 BOM 和 LF,避免无关格式漂移。
- 关键逻辑、接口约定、复杂函数和非显而易见的决策添加简洁注释;避免无意义注释。
- 相似功能使用一致的实现方式、命名风格和错误处理策略。
- 可恢复错误就近处理并记录必要上下文;不可恢复错误 fail-fast 向上抛出;禁止空 catch、吞异常或伪成功。
- Windows 本地 HTTP/TCP/UDP 测试服务器必须仅监听回环地址(`127.0.0.1` 或 `::1`)。此限制仅适用于本地测试,不得改变生产环境的网络监听行为。

## Shell 与 Git

- Git commit message 遵循 Conventional Commits 规范,格式为 `type(scope): description`,`type` 使用英文、`scope` 可选、描述使用简体中文。
- 提交或暂存前确认仅包含本次目标文件,不带入环境文件、敏感信息或用户已有无关修改。
- 本地已安装 Git 和 GitHub CLI(gh)。本地版本控制操作使用 `git`,GitHub 平台操作优先使用 gh。
- 访问私有仓库须使用已认证的凭据,优先通过 `gh` 认证;未认证访问返回 404 不代表仓库不存在。

## 沟通风格

- 作为平等的工程协作者沟通,不使用汇报腔或客服腔。
- 先给判断和核心原因,再补充必要细节;不要为了“全面”重复同一观点。
- 有明确技术倾向时直接给推荐;需要选项时先给推荐方案,再说明取舍。
- 控制层级和篇幅,避免大段嵌套列表。
- 不使用“结论”“有以下几点需要说明”“如果你愿意”“整体是合理的”等套话。
- 复杂问题解释思路和迁移方法;简单问题直接给可执行答案。
- 进度只写新发现、实际改动、测试结果或具体阻碍。判断有误就直接更正,并说明修正后的结果。
- 用户明确要求的事项尚未完成时,交代具体缺项。其他未测事项,只有在它会改变当前建议时才提,并把条件写在对应判断旁边。
- 默认只报告实际发生的改动,以及用户要求核对的状态。答完当前问题即结束,不在末尾重复已完成的工作,也不逐项列举未触碰的文件、配置或服务。

@C:\Users\Sunny\.codex\RTK.md

科研idea

首先,应该先明确研究方向,越具体越好。

然后,根据研究方向确定2-3个研究关键词,再找AI发散思考,打开我们的研究思路。

比如,你可以询问AI xxx研究方向是否有研究价值,询问它这个研究方向能不能做,值不值得做,或者好不好做。

确定好研究方向后,接着就可以手动收集近一年相应方向的5-10篇代表性文献。

然后将文献给Gemini,让它为你总结研究问题、研究方法、主要创新点等,发送参考提示词:

你是一位研究XXX(如人工智能领域)的科研人员。现在我提供几篇该方向的最新文献,请你从中提炼每篇文献关注的研究问题、使用的方法和主要创新点。

然后引导Gemini去挖掘创新点,尤其是在获得初步分析后,可以继续追问:

接着,请你进一步分析:
这些文献之间是否有共性的问题尚未解决?
有没有值得进一步研究、目前还没有很好解决的挑战?针对这些挑战,能否提出一些新的、有可能有效的研究思路或方法框架?
请帮我列出5个左右可能的创新研究问题,并尽量描述背后的研究动机和可能的技术路径。

在此基础上,还可进一步加入新的文献一步一步引导Gemini给出更好的回答。(这一步主要是和AI进行更深层次的聊天,以便筛选出有价值的idea)。

在和AI聊天的过程中,一定要不断检查低级bug(可以让gpt和claude之间互相检查),提示词:

作为最严格的审稿人和最资深的合作者,帮我检查xxx这个idea有什么问题,可以如何改进。

千万记住,和AI聊天的过程中一定要全程保持独立思考,结合实际筛选方向、已有基础、数据资源等实际情况筛选出几个较为可行的有价值的研究方向。

谨慎起见,最后最好还是跟师兄师姐讨论讨论,或者也可以直接去和导师聊聊。

艺术字生成

浅色蓝青智能服务平台:独立视觉规范与生成提示词

使用说明与约束优先级
本文是独立交付规范。实施团队只需本文和新业务说明,不需要任何参考工程或内部素材。本文不指定来源产品,也不要求复刻任何品牌身份。

必须保留:浅灰蓝底、蓝青配色、左对齐 Hero、透明转磨砂导航、突出搜索/主操作、叠入式指标卡片、统一层级与克制动效。
按业务替换:品牌、导航名称、对象、字段、指标、内容、权限和插画主体。不要为了套版引入业务不存在的登录、推荐、在线状态或图表。
可选增强:视频、指标图标动画、趋势图、个性化 CTA。没有素材时按第 10 节降级,不能让页面出现断图或空洞。
冲突优先级:真实业务与可访问性 > 内容可读与不遮挡 > 核心构图 > 装饰效果。业务说明未明确要求时,不自行更换主色和首页布局。
文中数值是实施基线,不是所有视口的固定坐标。不得依靠绝对定位将正文压在一起。
1. 设计定位
这是一个“企业级智能服务平台”的高保真产品界面,关键词是:可信、专业、克制、智能、轻量、可读、可追溯。

整体不是传统厚重政务风,也不是炫技型深色科技风,而是:

以浅色背景、蓝色品牌色和青色辅助色建立可信感;
用半透明玻璃卡片、柔和阴影和背景渐变增加高级感;
用视频/动态图形、数字滚动和 hover 微动效表达“智能化”;
用清晰的信息层级、短文案和标签化状态表达复杂业务;
所有装饰都服务于内容,不使用大面积高饱和、霓虹、过度 3D 或复杂噪点。
2. 可复用的视觉令牌
2.1 色彩
--primary: #245fc5;       /* 主品牌蓝 */
--primary-2: #2f7de1;     /* 明亮交互蓝 */
--primary-dark: #194fae;  /* 深蓝 */
--primary-light: #edf4ff;  /* 浅蓝底 */
--accent: #1597aa;         /* 青色辅助,数据/进度/智能提示 */
--text: #17253a;           /* 正文深色 */
--text-secondary: #53637a; /* 次要文字 */
--text-muted: #8795a8;     /* 辅助文字 */
--border: #dce5ef;
--bg: #f2f6fb;
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 16px;
--content-max: 1200px;

品牌渐变使用同色相蓝系,推荐:#194fae → #245fc5 → #2f7de1;强调渐变可加入少量 #0891b2,但青色不能压过主蓝。

状态色遵循语义:成功/有效为绿色,提醒/即将失效为琥珀色,风险/强制为玫红或橙色,待处理为靛蓝色。状态标签采用浅色底、细边框、胶囊圆角。

2.2 字体与排版
中文优先:PingFang SC, Microsoft YaHei, Segoe UI, Arial。
正文 13–14px,辅助信息 11–12px,区块标题 15–16px,页面标题 24px 左右。
首页主标题约 34px、800 字重、行高 1.35;移动端降至 24px。
标题使用深墨蓝,重点词使用蓝—靛—青渐变文字。
文字整体偏紧凑,避免巨型标题和过宽段落;正文行高约 1.6–1.75。
数字使用等宽数字特征、较粗字重,可配合从 0 到目标值的缓动动画。
2.3 圆角、阴影、玻璃效果
常规卡片圆角 12px;入口卡片/统计卡片 16–18px;搜索框 20px;胶囊标签 999px。
阴影必须柔和、低对比:0 8px 22px rgba(23,37,58,.055);hover 时增加蓝色环境光。
玻璃卡片使用白色 0.55–0.88 透明度、backdrop-filter: blur(14px) saturate(140%),叠加 1px 半透明白边和内侧高光。
不使用黑色重阴影、厚边框或强烈拟物高光。
3. 首页必须复用的构图
3.1 页面骨架
透明顶栏叠在 Hero 上:首页顶部导航初始透明,滚动超过约 12px 后变为白色半透明吸顶栏。
Hero 首屏:全宽、约 720–880px 高,视频或动态视觉背景,静态 poster 作为加载/失败兜底。
Hero 内容左对齐:最大宽度约 1200px,内容区宽约 760px,顶部留出导航高度和 72px 间距。
统计卡片向上叠入 Hero 底部:3 列玻璃卡片,形成首屏与业务数据的连接。
业务内容容器:最大宽度 1200px,白/玻璃卡片分区,区块间距 18–24px。
页脚:轻量、居中、低对比,不抢内容注意力。
3.2 Hero 视觉规则
背景应为抽象业务场景:数据流、地图、网络、文档、光线或行业空间;不能出现喧宾夺主的人像或复杂文字。
背景整体偏亮,左侧必须有足够留白以承载深色文字;使用浅蓝/青色渐变遮罩提升可读性。
底部加 25–30% 高度的柔和渐隐,把视频自然过渡到浅灰蓝页面背景。
Hero 徽章使用白色半透明胶囊、蓝色文字、绿色脉冲圆点,表达服务定位;只有业务确认实时在线时才使用在线状态文案。
主标题采用“业务价值短句 + 渐变重点词”,推荐两行以内;副标题说明覆盖范围、能力和可信性。
核心搜索/输入框是 Hero 的视觉焦点:白色玻璃容器、20px 圆角、内阴影、蓝色聚焦光环,右侧放品牌渐变主按钮。
搜索框下方显示热词、历史记录或快捷筛选,使用 999px 小胶囊,支持 hover 变蓝和轻微上移。
3.3 首屏统计卡片
默认 3 列,卡片高度约 100px,图标区约 72px。
使用业务主题图或抽象插画作低透明度背景,配玻璃白色覆盖层。
主数字 26px 左右、粗体、渐变或深蓝;标签 12px 灰蓝色。
hover:整体上移约 4–5px,背景轻微放大,阴影增强;若有动图/视频,hover 时替换静态图标播放一次。
4. 首页内容模块模板
按新业务调整模块名称,但保留以下信息节奏:

模式/状态横幅:告诉用户当前身份、数据范围、权限或系统状态;浅蓝/浅绿背景,左侧信息图标,右侧时间或行动按钮。
精选内容区:3 列卡片;顶部有区块标题、副说明和“查看全部”;卡片包含类型胶囊、标题、日期/来源、分类标签、底部行动链接。
基础服务入口:4 或 6 列图标入口;每项包含图标、短标题、单行说明,玻璃背景和 hover 上移。
个性化能力 CTA:说明登录/配置/开通后得到的能力,左侧 3–4 条收益,右侧一个主按钮。
数据看板/趋势区:在首页下方使用 2 列卡片,图表颜色延续蓝—青体系,避免彩虹色。
5. 组件与交互规范
组件优先采用成熟 UI 组件库,但统一覆盖按钮、输入框、表格、弹窗、标签、下拉面板的圆角、颜色、阴影和 focus 样式。
主按钮:蓝色渐变、白字、轻微内高光、6–14px 蓝色阴影;hover 上移 1px,active 回落。
次按钮:白底、灰蓝边框、深灰字;hover 变浅灰/浅蓝。
输入框 focus:蓝色 1px 边框 + 3–4px 半透明蓝色外发光。
卡片 hover:上移 2–5px、阴影增强、边框转为浅蓝;动画 180–280ms ease。
页面切换使用淡入 + 向上 6px;不要使用夸张缩放或旋转。
异步内容必须有 loading、空状态、失败提示和“重新加载”操作。
权限/游客场景要通过横幅、按钮和禁用态清楚表达,不能只靠隐藏内容让用户猜测。
6. 响应式规范
桌面端内容最大宽度 1200px,左右内边距 20px。
1200px 以下:精选卡片从 3 列降为 2 列。
1000px 以下:统计区和双栏区降为 2 列,入口区降为 2 列。
640px 以下:所有网格变单列,Hero 最小高度约 640px、内容过长时自然增高,主标题 24px;搜索框保持输入框在上、按钮在下的可用性。
440px 以下:主按钮宽度 100%。
移动端仍保留渐变、玻璃和圆角,但降低阴影强度,避免内容拥挤。
7. 技术实现建议
推荐 Vue 3 + TypeScript + Vite;路由和状态管理按业务需要选择。
将色彩、间距、圆角、阴影定义为 CSS Variables,禁止在页面中散落硬编码。
首页优先拆分为 Header、HeroSearch、StatsCards、FeaturedGrid、ServiceEntries、UnlockCTA、Footer。
所有图片提供明确的静态兜底;视频必须 muted autoplay loop playsinline,并在加载失败时回退到 poster。
导航和操作图标统一采用线性/半填充风格;首页指标和服务入口可用同一套蓝青半透明立体插画。两类图标分工固定,不在同一区域混用不同素材风格。
图片应服务于主题;如果没有合适素材,使用低对比抽象渐变和几何光晕,不要随意使用 stock photo。
8. 可复制的生成提示词
请将本 Markdown 全文作为设计约束,结合文末业务输入,独立生成一个高保真、可运行的前端工程。默认采用 Vue 3 + TypeScript + Vite;如业务指定其他技术栈,保持视觉参数与交互行为不变。不要假设能访问参考工程、截图、素材包、私有组件库或任何内部服务。

【设计目标】
打造一个可信、专业、轻量、智能的企业级服务平台。整体采用浅灰蓝背景、专业数据蓝为主色、青色为辅助色;使用半透明玻璃卡片、柔和阴影、16px 左右圆角、克制的渐变和微动效。不要使用深色霓虹科技风、重黑阴影、过度 3D、彩虹色或装饰性噪点。

【首页结构】
- 透明吸顶导航叠在 Hero 上,滚动后变为白色半透明导航;左侧品牌 Logo 和名称,中间业务导航,右侧用户/登录操作。
- 全宽 Hero,约 720–880px 高;背景使用与业务相关的抽象视频或动态视觉,必须有静态 poster 兜底;左侧放在线状态徽章、两行价值主标题、说明文字。
- Hero 核心放一个大型玻璃搜索/输入框:20px 圆角,白色半透明背景,蓝色 focus 光环;右侧是蓝—靛—青渐变主按钮。下方放热词、历史记录或快捷筛选胶囊。
- Hero 底部叠入 3 个玻璃统计卡片:图标/插画、动画数字、标签;hover 上移、背景轻微放大,必要时播放一次微动画。
- 下方使用最大宽度 1200px 的内容容器,包含状态横幅、精选内容 3 列卡片、4/6 列服务入口、个性化能力 CTA、趋势/数据卡片和轻量页脚。

【视觉令牌】
主蓝 #245fc5,亮蓝 #2f7de1,深蓝 #194fae,辅助青 #1597aa;正文 #17253a,次要文字 #53637a,辅助文字 #8795a8,页面背景 #f2f6fb;常规圆角 12px,卡片圆角 16px,搜索框 20px,标签 999px;字体使用 PingFang SC/Microsoft YaHei/Segoe UI;正文 13–14px,区块标题 15–16px,Hero 标题约 34px。

【交互要求】
按钮、输入框、卡片、导航均有 180–280ms 的轻量 hover/focus/active 状态;卡片 hover 上移 2–5px;异步模块具备 loading、空状态、错误提示和重试;移动端在 640px 以下改为单列,搜索按钮全宽或上下布局。

【工程质量】
使用 CSS Variables 统一主题;组件化拆分首页;内容、业务字段和视觉样式解耦;支持游客/登录/权限状态;确保键盘可操作、文字可读、图片有 alt、视频有 poster;最终给出可启动、可构建的完整工程。

【业务输入与素材】
将本文第 11 节的业务表填写后附在此处。没有真实接口时使用明确标注的演示数据和可替换的数据层,不捏造生产数据、真实客户、认证或实时状态。没有图片或视频时按第 10 节的 CSS/SVG 方案实现完整页面。

【执行与交付】
先给出简短业务映射和页面结构,再实现可操作的首页与必要业务页面。不要停留在设计描述,也不要以缺少原工程为由阻塞。按第 12 节自检,报告未实现项和素材降级项。所有规范均以本文为依据,不引用任何来源项目或内部资料。

9. 验收清单
[ ] 首屏是否一眼呈现“浅色、蓝青、玻璃、专业智能”的统一风格?
[ ] 导航是否透明叠加 Hero,并在滚动后平滑变为吸顶白底?
[ ] Hero 是否有明确价值主标题、说明和高辨识度搜索/主操作?
[ ] 统计卡片是否叠入 Hero 底部并具有数字动效/hover 微动效?
[ ] 卡片、按钮、输入框、标签是否遵守统一圆角、边框、阴影和状态色?
[ ] 空、错、加载、游客、登录状态是否有明确反馈?
[ ] 移动端是否从多列自然降级为单列且核心操作仍可用?
[ ] 是否只替换业务语义,没有破坏原有信息层级和视觉节奏?

8个热门生图Prompt

丑萌涂鸦风插画

把这张照片变成一幅滑稽丑陋的涂鸦。让它看起来像:用廉价马克笔或蜡笔快速勾勒的草图,凌乱,粗糙,稚拙的风格。糟糕的透视和不协调的比例,略微夸张的面部特征。添加:简单的卡通背景(例如建筑物、树木、街道)。随意的线条和细节,不均匀的颜色和明显的笔触。风格:看起来像一幅随意的画作,不精致,幽默且有点傻气,类似表情包,随意,网络风格。不要:把它画得太真实

personal-ai-prompt-archive-1.png

ins手绘感

请仔细观察图片内容,为画面中的所有元素加上白色手绘风格的注释与轮廓线。

【绘制风格】

使用白色细线手绘,单线完成,略带粗糙与不均匀感。沿物体外轮廓描边,线条可以有些微抖动,搭配箭头、虚线、弧线引导视线。整体像随手写下的笔记,兼具轻松感与设计感。呈现日系生活调性,低饱和度,柔光,轻微胶片感。画面保有“呼吸感”,不要堆满元素

【文字风格】

中文手写风,自然且不工整

短句表达,像日记里的随口记录

语气轻松、带情绪、有点可爱

字体颜色为纯白色,字号小巧,手写在画面边缘,不要使用大标题

【内容规划】

饮料:写口感+温度+情绪(如“清爽/微甜/很治愈”)

食物:写口感+满足感(如“酥脆/软糯/好吃到停不下来”)

环境:写氛围(如“放松/温暖/有烟火气”)

整体:一句话总结,简单但有共鸣

【装饰元素】

少量添加:蒸汽、闪光、星星、爱心、小表情,点缀即可,保留画面留白

原则:像不经意画上去的,而非过度设计

【画面控制】

注释分散排布,不遮挡主体

保持呼吸感,不要过于密集

整体风格:Instagram故事感+杂志手写笔记风

【最终效果】

时髦、干净、轻松,像随手记录生活的一张Instagram Story风格高级日常

personal-ai-prompt-archive-2.png

ColorWalk插画

把这张照片改成韩式稚拙扁平插画风格,保留场景里的物体和大致布局,粗糙抖动的黑色间断手绘轮廓,去掉照片里的光影、透视和细节纹理,全部改成纯色平涂。采用高饱和的红/黄/绿/白调色块,边缘圆润,整体背景用亮蓝色,左右两侧留出纯蓝色的背景。物体简化成简单的几何形状,整体是可爱的童趣感。上部手写文案“How are you today?”,下部拼贴手写文案“Let the wind carry your worries away.”。比例「3:4」。

personal-ai-prompt-archive-3.png

冰箱贴

从照片中提取最具辨识度的主体元素,将其转化为简约的“冰箱贴式人物图标”。

具体要求如下:

保留人物的核心轮廓与标志性特征;

造型简洁、干净,呈现旅行纪念品冰箱贴的质感;带有轻微立体感与投影效果;

边缘清晰,配有白色或浅色描边;细节适度简化,避免过度复杂;图标整体尺寸小巧精致,四周留有充足留白。在该冰箱贴图标下方,添加一行优雅的手写风格英文文字“hola”。

personal-ai-prompt-archive-4.png

治愈系插画

变换整个图片风格,治愈系插画,童趣涂鸦风格,意识流,大色块,颗粒感,增加肌理,抽象插画,扁平插画,颗粒质感,采用大色块填充和颗粒质感,色彩鲜艳饱和,整体风格介于抽象插画与扁平插画之间,具有涂鸦的随意感和意识流的自由表达。手绘涂鸦风格,彩色蜡笔/彩铅质感,带轻微纸张纹理,多巴胺配色,色彩鲜艳明快。线条随性松弛,扁平色块 + 粗黑轮廓,童趣治愈氛围,无透视感,平面化构图,高细节,高饱和度,高对比度

personal-ai-prompt-archive-5.png

童趣涂鸦风插画

请将整个图像转换成单一含有涂鸦元素的“天间”[待确认]平面插图。用大胆俏皮的调色盘,跟原图完全不同。将所有细节简化成干净平整的形状,搭配手工制作,略带不完美的手感,仿佛画在一张白纸上。整体风格要看起来可爱、童趣、异想天开。

personal-ai-prompt-archive-6.png

波普风格插画

矢量风格平面插画,保留主体的主要外形、姿态和特征,将其转化为波普艺术风格、罗伊·利希滕斯坦复古漫画插画。融入半色调网点印刷纹理与波普艺术气息,呈现复古漫画书的质感。画面带有怀旧儿童绘本的趣味,运用网点印刷风格与图形化设计,整体可爱俏皮。粗黑轮廓线,本戴克半色调网点纹理,平涂鲜明色彩,复古报纸印刷质感,居中构图,高细节,线条锐利,8K高清。

personal-ai-prompt-archive-7.png

CITYPOP插画

City Pop风格插画,融入“日年代”[待确认]日本动画美学,采用扁平化矢量表现手法。画面以干净的色块进行分割,运用高饱和度的复古配色,呈现出昭和末期浓浓的怀旧氛围。构图富有电影感,采用广角远景拍摄,描绘一片宁静的日本城郊场景,整幅画面没有多余文字,整体干净通透,色彩明快。请在图片上添加与画面内容相匹配的手写英文文字,保持原有图片比例不变,达到高清画质

personal-ai-prompt-archive-8.png

一个眼前一亮的亮暗动态切换效果

请独立实现 Liquid Theme Reveal(液体主题切换)及同步音效,交付完整可运行代码,不只给方案。
已有项目:先阅读现有主题系统、页面结构和音效实现,沿用技术栈,以最小合理改动接入,保留原有布局、内容、交互和业务状态,不为动画重写整个项目。
新项目:使用 React、TypeScript、Vite、CSS、SVG 和 Web Audio API,提供可操作的完整示例。

一、液体动画
点击主题切换按钮后,新主题像液体一样从按钮下方流出:
1. 细长液柱从按钮向下延伸,带有自然摆动、粗细变化和分离液滴。
2. 液柱落到底部,产生飞溅、小液滴和局部涟漪。
3. 液体在底部积聚,形成持续起伏的波浪液面。
4. 液面逐渐上涨,最终覆盖整个视口,平稳完成主题切换。
5. 浅色切深色、深色切浅色均支持完整动画。
液体经过哪里,哪里的背景、卡片、文字、边框和图表就切换到新主题;未被覆盖的区域保持原主题。
不能用圆形扩散、渐变淡入、纯色遮罩或整页同时变色代替。

二、渲染与性能
同时呈现两套内容和布局完全对应的主题界面:
- 原主题作为底层。
- 新主题作为揭示层。
- 使用 CSS clip-path 引用动态 SVG clipPath。
- 通过 SVG path 描述液柱、液滴、飞溅和波浪的联合轮廓。
使用单一 requestAnimationFrame 循环驱动动画,每帧仅更新必要的 SVG 属性,避免 React 每帧重渲染组件树,避免逐帧读取布局和重建 DOM。
允许采用双层渲染或视觉快照,但必须保证:
- 两层的尺寸、位置、滚动位置和 sticky / fixed 元素准确对齐。
- 不重复绑定业务事件,不产生重复 ID。
- 揭示层不进入键盘焦点和无障碍阅读顺序。
- 表单内容、筛选条件及其他业务状态保持。
- 切换完成后正确提交主题并移除临时层。
- 动画结束、中断和组件卸载时清理动画帧、临时节点与监听器。
如果使用快照,明确说明对 Canvas、WebGL、视频、Shadow DOM 等内容的支持范围,不将静态快照描述为能自动重新绘制另一主题。

三、同步音效
为液体运动配套轻柔、自然的声音:
- 开始流出:短促的滴落或倾倒声。
- 落到底部:轻微的水花声。
- 液面上涨:低音量、连续的流水声。
- 切换完成:简短、柔和的收尾声。
浅色切深色的声音偏低沉,深色切浅色偏清亮,保持统一风格,避免尖锐、突兀或过长。
优先使用 Web Audio API 本地合成;也可使用具有明确使用授权的本地音频,不依赖未经授权的远程声音。
实现要求:
- 音效默认关闭,提供开关和音量设置,记忆用户选择。
- 已有项目优先复用原有音效系统、设置和 AudioContext,避免重复播放或破坏既有音效风格。
- 仅在用户交互后初始化或恢复 AudioContext,不自动播放。
- 音效由动画的实际进度和阶段触发,不用固定延时堆叠模拟同步。
- 重复点击不叠加声音,同一阶段不重复触发。
- 正常完成时允许短收尾;动画中断时停止流水,不误播完成提示。
- 静音、音量归零、页面进入后台或组件卸载时,及时停止声音并清理音源连接。
- 减少动态效果模式下跳过长流水,开启音效时只保留简短切换反馈。
- 音频不可用、解锁失败或播放异常时,主题切换仍正常完成。

四、配色与适配
新项目采用以下配色:
#F1F0ED、#141319、#060609、#F4F2F8、
#E07A2E、#2F6BFF、#14A3A8。
已有项目优先兼容现有主题变量,不修改无关视觉设计。
支持手机、平板和桌面布局,根据实际视口和按钮位置计算液体起点与填充范围,不使用固定舞台尺寸硬套所有屏幕。
支持主题持久化和首屏主题恢复,避免刷新时闪现错误主题。
尊重 prefers-reduced-motion,减少动态效果时直接切换或使用轻量反馈。
不支持 SVG 裁剪时直接切换主题。
合理处理重复点击、窗口变化、滚动、页面进入后台及组件卸载,避免动画卡住、交互锁死或主题状态不一致。

五、组件复用
将液体动画和音效封装为可复用模块。
React 项目提供:
- TypeScript 类型定义。
- 受控主题状态与主题变更回调。
- 可配置动画时长。
- 可选音效适配接口及音量控制。
- 清晰的主题样式作用域。
- 完整调用示例和接入说明。
动画与音效共用实际进度,但保持模块职责清晰;调用方可以只使用液体动画,也可以接入自己的音效。

六、验证与交付
实际验证:
- 浅色到深色、深色到浅色。
- 手机与桌面尺寸下的两层对齐。
- 页面滚动后的 sticky / fixed 元素。
- 表单及业务状态保留。
- 主题刷新记忆和首屏恢复。
- 重复点击、动画中断与窗口变化。
- 音效开关、音量记忆、阶段同步和中断清理。
- 减少动态效果及音频不可用时的降级。
- 类型检查、生产构建和必要的针对性测试。
请提供可操作预览和简短音效试听,并说明如何在本地运行。
完成后简要说明主要修改、验证结果和已知限制。