「杂志风格信息卡」提示词来了!
昨天发出"预告"后,收到很多朋友的期待互动,非常感谢朋友们,我也是突感这份提示词的重要性 😂
昨晚反复测试了不同模型、多次生成相同/不同内容的表现,还好比较稳定,我就敢放出来分享给朋友们了。
我把正文贴在下面,也有一篇图文公众号展示效果和提示词。制作不同风格「信息卡」的提示词,也会再专门做一个系列,感兴趣的朋友们欢迎关注公众号: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 非对称网格?
· 页面整体感觉是“饱和”和“紧凑”的,还是“稀疏”和“松散”的?(必须是前者)
· 中文字体是否比常规网页明显更大?
点击图片查看原图
点击图片查看原图