#杂志风格信息卡

4天前

「杂志风格信息卡」提示词又来了，效果更好了！上一版杂志风格信息卡分享后，得到了非常多朋友的关注和点赞喜欢，非常非常开心！你知道一个中年程序员，被夸有设计品位时，那种嘴角压不住的笑吗 😄😄😄 这不，连夜又搞了几个不同的版本，还厚着脸皮在公众号让朋友们投票（差中选差？😂）最终得票更多的是基于杂志风格，加入了琉光效果的版本！我在公众号也会持续维护这个系列的提示词，常用公众号的朋友们欢迎扫码关注！又是一个我自己很得意的版本，话不多说，提示词在这：核心哲学：融合印刷品的饱和秩序感与高级玻璃拟态的未来感，打造水晶般通透的数字艺术品。 I. 视觉与布局页面蓝图 (Blueprint)：严格遵循四段式结构：页头 (Header)：专业刊头主内容区 (Main Body)：4+8 非对称网格4列侧边栏：巨大、描边、空心的视觉锚点4列侧边栏：巨大、描边、空心的视觉锚点 8列核心区：紧凑布局的玻璃卡片8列核心区：紧凑布局的玻璃卡片中段分隔区 (Mid-Breaker)：全宽、风格化的玻璃区块深色页脚 (Dark Footer)：必须使用深色背景 (#1f2937) 核心风格 (Core Style)：高级玻璃拟态 (Advanced Glassmorphism) 页面背景：克制的玻璃质感背景，带大范围柔和光晕内容容器：模糊：backdrop-filter: blur(20px+)模糊：backdrop-filter: blur(20px+) 边框：1px 锐利高光边框边框：1px 锐利高光边框圆角：减少 (0.5rem - 0.75rem)圆角：减少 (0.5rem - 0.75rem) 光影：柔和 box-shadow + 微弱 inset 阴影光影：柔和 box-shadow + 微弱 inset 阴影 II. 设计基因字体系统 (Typography)：结构性反差中文：Noto Serif SC (大字号，粗字重 700+) 英文：Poppins (小字号，轻字重 300) 色彩系统 (Color)：辉光渐变 (Aura Gradients) 选择一个明亮、柔和的主题色以半透明到透明的渐变形式，微妙地应用在玻璃卡片背景上元素 (Elements)：图标：Font Awesome 线稿风格 (light/regular) 视觉流（推荐）：背景中加入抽象、柔和的引导线 III. 技术规格交付物：单一、自包含的 HTML5 文件技术栈：TailwindCSS, Google Fonts, Font Awesome (均通过 CDN) 内容：中文为主，不省略要点，无图表适配：优先 1200x1600 宽高比，确保响应式

#杂志风格信息卡 #提示词 #琉光效果 #设计品位 #HTML5

6天前

「杂志风格信息卡」提示词来了！昨天发出"预告"后，收到很多朋友的期待互动，非常感谢朋友们，我也是突感这份提示词的重要性 😂 昨晚反复测试了不同模型、多次生成相同/不同内容的表现，还好比较稳定，我就敢放出来分享给朋友们了。我把正文贴在下面，也有一篇图文公众号展示效果和提示词。制作不同风格「信息卡」的提示词，也会再专门做一个系列，感兴趣的朋友们欢迎关注公众号：AI 启蒙小伙伴（下方二维码） ------ 提示词全文 ------ 杂志风格网页信息卡提示词角色与哲学：你是一位世界顶尖的视觉总监，负责创造一个独立的 HTML 页面。你的核心设计哲学是“数字时代的印刷品”。这意味着：页面必须信息饱和、布局紧凑、字体突出。你的目标是用强烈的视觉冲击力彻底取代不必要的留白，营造一种内容丰富、引人入胜的“饱和感”。 I. 页面蓝图请严格遵循以下四段式页面结构，这是不可协商的。每一部分都有其明确的功能，共同构成页面的节奏感。 1. 页头 (Header)：专业的“刊头”，位于页面最顶部，包含主副标题和发布信息。 2. 主内容区 (Main Body)：页面的核心，必须采用 4+8 的非对称网格布局。 · 视觉锚点区 (4列侧边栏)：此区域的唯一焦点是一个巨大、描边、空心的视觉锚点（字母/数字/图标）。这是整个设计的灵魂，必须足够大，以创造压倒性的视觉冲击力。 · 核心信息区 (8列)：展示主要内容。布局必须紧凑，使用卡片、列表等形式，但元素间距要小。 3. 中段分隔区 (Mid-Breaker)：在页面中下部，必须设置一个全宽的、风格不同的区域（例如，使用不同的背景色或布局），用于展示次要信息、数据或引用。它的作用是打破主内容的节奏，增加视觉趣味。 4. 深色页脚 (Dark Footer)：必须使用深色背景（例如 1f2937），与页面的浅色主调形成强烈对比。页脚用于放置总结性观点或行动号召，为页面提供一个坚实、有力的视觉收尾。 II. 设计基因：这是风格的精髓，请严格执行：字体系统: · 中文: 使用 Noto Serif SC 字体。所有标题和正文的字号都必须比常规网页更大，字重加粗，以此来填充画面，实现“饱和感”。 · 英文: 使用 Poppins 字体，字号相对较小，作为副标题、标签和点缀。 · 核心原则: 严格执行“中文大而粗，英文小而精”的排版策略，通过尺寸、字重和风格的巨大反差来驱动设计。视觉元素: · 图标: 只使用 Font Awesome 的线稿风格图标。严禁使用 emoji。 · 高光: 选定一个单一主题色，并用它创建微妙的、从半透明到透明的渐变，为卡片或区块增加深度。 III. 技术规格交付物: 单一、自包含的 HTML5 文件。 · 技术栈: 必须使用 TailwindCSS、Google Fonts (Noto Serif SC, Poppins) 和 Font Awesome，均通过 CDN 引入。 · 内容: 不得省略我提供的核心要点，不要使用图表组件，以中文为主体。 · 适配: 优先适配 1200x1600 的宽高比，并确保响应式布局。自我检查清单在生成最终代码前，请检查以下几点是否都已满足： · 页面是否有深色背景的页脚？ · 侧边栏是否有一个巨大、描边、空心的视觉锚点？ · 布局是否是清晰的 4+8 非对称网格？ · 页面整体感觉是“饱和”和“紧凑”的，还是“稀疏”和“松散”的？（必须是前者） · 中文字体是否比常规网页明显更大？

#杂志风格信息卡 #提示词 #AI 启蒙小伙伴 #视觉总监 #HTML5