安静网页设计 · 提示词样板间 01

【用途与规则范围】
生成可直接运行的 HTML 样板间。左侧列出术语、意思及对应提示词，用引线关联右侧实际效果，可隐藏讲解层。右侧包含无字风格展示、链接卡片、完整文章与阅读目录、输入框。
全局无字规则用于风格展示区；文章、输入框与链接卡片按以下局部规则允许功能所需的文字。输入框和链接卡片的局部视觉规则优先于全局的玻璃禁用、粗黑轮廓和硬阴影规则。页面不添加页头或页脚。

【全局页面风格】
温暖、稚拙的儿童蜡笔手绘风格。使用暖米白纸张背景，带细腻可见的纸纤维与颗粒纹理。轮廓使用粗黑色马克笔线条，略微抖动、不规则，保留手绘的不完美感。色块呈现蜡笔涂抹的颗粒、轻微留白和不均匀边缘。
配色柔和、低饱和，以蛋黄黄、鼠尾草绿、浅蜜桃粉、雾蓝和淡紫为主。形状简洁，边角自然圆润，允许轻微倾斜。搭配少量错位的黑色硬阴影，像手工剪下、贴在纸上的卡片。布局清爽、有秩序，保留充足留白，整体安静、亲切、朴素。
不要人物、脸部、吉祥物或角色形象。
无字展示区中不要出现任何文字、字母、数字、标点、标签、标题、Logo、水印或模拟文字的笔画。所有区域保持无字，只通过形状、色彩、纹理和布局表达。
避免写实、动漫、3D、光滑矢量图、玻璃质感、金属质感、霓虹色和过度精致的商业插画。

【如有输入框】
整体风格：接近透明玻璃的轻盈质感，背景能直接透出。不要毛玻璃，不使用 backdrop-filter、模糊或背景折射。使用较大的圆角、细薄的半透明白色边缘、轻微内侧高光和柔和阴影。不使用棕色描边、厚重边框或明显光圈。
背景状态：输入框为空时，背景完全透明。输入框有文字时，底色平滑过渡到约 80% 不透明度，提升文字可读性。底色沿用产品背景色，例如暖白色 #FBFAF6。清空文字后，平滑恢复透明。仅聚焦、没有输入内容时，背景仍保持透明。
工具栏交互：默认隐藏底部的附加操作、模型选择等工具栏。鼠标悬停输入框、输入框内任意控件获得焦点，或者输入框有内容时，工具栏淡入显示。鼠标离开、失去焦点且内容为空时，工具栏淡出。淡入淡出时长约 220ms。隐藏工具栏只改变透明度、可见性和点击能力，必须保留原有布局空间。输入框的高度、宽度、内边距和位置不能因工具栏显隐发生跳动。工具栏完全隐藏后不能拦截鼠标，也不能进入键盘焦点。
功能保护：停止生成、错误提示等关键状态必须始终可见。保留原生输入、光标、选区、输入法、附件及键盘操作。不要误隐藏预测输入、自动补全或“按 Tab 接受”等功能提示。支持键盘聚焦，并尊重系统减少动态效果设置。
请基于现有组件实现，先检查当前结构，避免影响其他输入框。完成后验证空白、有内容、悬停、聚焦、清空以及窄屏状态。

【如有文章和对应目录的阅读进度】
布局：左侧是窄目录，右侧展示一篇完整文章。目录由文章标题生成，点击目录滚动到对应章节，正文始终完整保留。
隐藏正文原生滚动条，保留浏览器原生滚动，支持滚轮、触控板、触屏和键盘。
目录随正文滚动高亮当前章节。选中项采用圆角浅色背景、同色文字强调，不使用左侧竖杠。
当前目录项的背景从左向右逐渐填充，表示“本节”的阅读位置。标题到达正文顶部的阅读线时为 0%，接近下一标题时为 100%。
填充颜色沿用当前模块配色，柔和且不影响文字阅读。界面不增加百分比数字、额外进度条或按钮。
按实际正文滚动容器计算位置，目录跳转与进度计算使用相同的顶部偏移。
滚动到底时显示末节 100%；点击尾部无法滚到顶部的短章节时，保留点击项的高亮，直到用户继续手动滚动。
图片加载、窗口尺寸变化后重新计算。使用 requestAnimationFrame 合并滚动更新，ResizeObserver 监听尺寸变化，卸载时清理监听。
可用 CSS 变量和 linear-gradient 实现背景填充。保留键盘焦点提示和 aria-current；尊重 prefers-reduced-motion。
验收：检查桌面和手机尺寸下的自然滚动、目录跳转、背景填充、尾部短章节与图片加载后的定位，确保没有横向溢出。

【如有需要 hover 切换内容的链接卡片】
设计一组克制、安静、轻盈的链接卡片，并延续现有页面的视觉语言。
多张卡片横向等宽排列，移动端自动变为单列或合理换行。卡片高度约 96px，圆角约 24px。默认使用极浅的半透明白色背景和非常淡的暖灰色描边。不使用强渐变、厚重阴影、发光效果或高饱和色。
默认状态只显示简短名称，例如“anjing aigc”。文字水平、垂直居中，保持单行，不允许随意换行。字体简洁，约 14px，中等字重，使用低对比度暖灰色。
鼠标移入时，整张卡片轻微向上移动 3px。同时出现柔和、扩散范围较大的浅阴影。正面名称淡出，并向上移动约 4px，轻微缩小。背面的简短介绍从下方轻轻浮现，同时由透明变为可见。
前后内容使用同一位置叠放，不翻转卡片，不产生明显的 3D 效果。动效时长约 280ms，使用自然、克制的 ease 或 cubic-bezier(0.4, 0, 0.2, 1)。整张卡片必须可以点击，并显示明确的链接鼠标样式。不添加多余箭头、按钮、“了解更多”或操作提示。
触屏设备不依赖 hover 才能获得必要信息。避免点击后卡片停留在错误的 hover 状态。文字不能溢出、截断或挤压变形。保证卡片拥有舒适的点击区域。
整体气质：年轻、干净、温和、有一点淡淡的设计感；像个人长期维护的数字花园，而不是商业 SaaS、营销落地页或炫技作品集。留白要充足，动画只用于传递层级和可点击性。
实现方式采用两层内容在同一 CSS Grid 区域叠放，通过 opacity、translateY 和 scale 完成正反文案切换，不使用 rotateY、复杂 JavaScript 或 3D 翻牌动画。

【本次试稿的补全选择，尚待审美反馈】
输入框底色过渡：260ms。目录阅读线：顶部12px。移动端保留窄目录，卡片单列。卡片键盘聚焦复用hover效果，触屏同时显示名称和一句简介。正面按详细参数14px名称实现，未采用“大标题”。
文章为本地样例；链接跳转文章相应章节。发送、停止、错误和模型切换只是本地状态演示，无真实服务调用。附件只展示本地文件名，不上传。延迟图片用于检验尺寸变化后的目录重算。