杂志ui

你是一位深谙瑞士国际主义风格与先锋独立杂志（如《Lumière》《Kinfolk》《Cereal》）排版艺术的顶级 Editorial UI/UX 设计师。 现在，你需要为我设计一个**“提示词图鉴与灵感仓库（Prompt Archive & Anthology）”**的 Web 界面。 请完全抛弃传统 SaaS 软件或工具类网站的“组件化”思维（拒绝圆角、阴影、卡片堆叠、标准的输入框），将这个网站视为一本**“正在不断连载的数字出版物”**。 **【核心业务与杂志语言映射】** 1. **提示词录入区（Input Area）** -> 设计为**“主编案头（Editor's Desk）”**或**“手稿提交页”**。 2. **分类与标签（Categories）** -> 设计为**“卷宗（Vol.）”、“章节（Index）”**或**“脚注（Footnotes）”**。 3. **提示词瀑布流（Masonry Gallery）** -> 设计为**“视觉散文（Visual Essay）”**与**“档案快照（Plates & Snippets）”**。 **【视觉与排版铁律】** - **色彩与质感**：以骨白色/羊皮纸色（如 `#FDFBF7`, `#F4F1EA`）为底，极具分量的纯黑（`#000`）为对比色，石灰色（Stone-400/500）用于元数据。拒绝任何渐变和弥散光。 - **极致的线条（Hairlines）**：大量使用 1px 的实线（`border-black` 或 `border-stone-200`）进行全屏的纵横切割，形成严格的模块化网格（Modular Grid）。 - **三层字体系统**： - **展示大字（Display）**：使用 Playfair Display 等优雅的衬线体，字号极大（60px-120px），用于页面大标题，行高收紧。 - **优雅正文（Serif Body）**：使用 Source Serif 4 等，18px左右，宽大行距，用于提示词的具体内容展现，部分使用*斜体（Italic）*增加文学感。 - **无情功能字（Utility Sans）**：使用 Inter 等无衬线体，极小字号（9px-11px），**全大写（UPPERCASE）**，**极宽的字间距（tracking-widest / 0.2em+）**，用于标签、日期、作者、分类、按钮。 - **排版特技**：必须包含首字下沉（巨大尺寸的 Drop Cap）、垂直排列的文字（Vertical Text，用于侧边栏或分隔带）、以及带有“§”等符号的复古分隔线。 **【功能模块的具体设计指令】** **1. 录入区（The Submission / Editor's Desk）：** - 放弃传统的带有边框的输入框 `<input>` 和 `<textarea>`。 - 使用“下划线填空”的形式（Border-bottom only），或者让整个输入区域看起来像一张带有打字机网格的空白信纸。 - “提交”按钮不要用圆角矩形，使用全大写的极小无衬线体，外加 1px 的纯黑边框，Hover 时背景全黑、文字反白。 **2. 瀑布流与图鉴展示（The Archive / Masonry）：** - **边框切割**：不要使用带有阴影的悬浮卡片。每一张“提示词卡片”应该被 1px 的直线严格框定在网格中，卡片之间甚至共用边框。 - **图文混排**：如果提示词包含生成的图片，图片默认使用低饱和度（Grayscale）或带有噪点，Hover 时才恢复全彩。 - **卡片信息层级**： - 顶部/侧边：极小的全大写分类标签（例如：`VOL.04 — MIDJOURNEY PORTRAIT`）。 - 中间：提示词的截断文本，使用衬线体排布，宛如诗歌或散文。 - 底部：作者署名（Words by...）和生成参数（如同摄影作品的相机参数 EXIF，用极小的无衬线字展示）。 **3. 导航与侧边栏（Index & Marginalia）：** - 侧边栏可以悬浮固定（Sticky），包含当前分类的巨大序号（如 **01**, **02**）。 - 引入边注（Marginalia）概念，将一些额外的控制面板、搜索框化简为极简的 Icon（如 Lucide 的 Search）和纯文字链接，散布在页面的边角（四角布局）。 **【交互与动效】** - 平滑的阻尼滚动。 - 鼠标悬停（Hover）在文字卡片时，可触发背景色的细微变化（如变浅米色）或部分文字变为斜体。 - 顶部可增加一个极细的反色阅读进度条。 请根据以上设定，为我输出具体的 UI 设计方案/前端代码结构，确保整体传达出一种“时间静止、充满呼吸感、极其注重文字本身的重量”的先锋阅读体验。