每日所学 RSS

2026年11月10日星期二

一套可以直接丢给 AI(或自己照着写)的落地页构建提示词,目标:1:1 深度致敬 GitHub 官网首页的工业级质感。技术栈 Next.js (React) + Tailwind CSS + Framer Motion。

视觉基调:深空光影

  • 背景:纯粹宇宙冷黑(#040d21 → #0d1117 渐变)+ 微弱网格噪点 overlay
  • 极光光斑:局部放超大模糊(filter: blur(120px))的荧光蓝 / 紫罗兰 / 青绿光雾,撑出浩瀚感
  • 卡片:1px 半透明磨砂边框(rgba(255,255,255,0.1)),悬停时边缘出现跟随鼠标的径向微光

页面五段结构

  1. 吸顶导航:全宽毛玻璃(backdrop-blur-md);左 Logo、中间极简链接、右侧带键盘快捷键 / 的圆角搜索框 + 渐变高亮登录按钮
  2. Hero 巨幅区:超大 H1 用白银→浅青渐变文字(text-transparent bg-clip-text);双 CTA——主按钮发光实色胶囊,次按钮幽灵线框带箭头平移悬停;右侧放交互式 3D 发光地球,或一个实时流式打字的 AI 代码补全编辑器界面
  3. 光纤生命线(全页灵魂):屏幕左侧一条垂直贯穿整页的微光细线,随滚动逐渐充能点亮,在每个功能区块交汇处亮起发光脉冲节点徽章
  4. Bento 功能网格:不对称 2×2 / 3×3;卡片内不放静态文字,放活的极客微界面——Git PR 红绿 diff、CI/CD 流水线节点流动动画、绿光标闪烁的终端窗口
  5. 背书与页脚:平滑滚动的 Logo 走马灯 + 极简多列 Footer

动效与纪律

  • Framer Motion:滚动渐入(fade-in + slide-up)、视差微动效
  • 禁止任何 Emoji,图标一律 Lucide-react 单色精密线框
  • 字体锁死:正文 Inter 或 Geist Sans,代码与数据 JetBrains Mono

一句话复用

深空黑 + 极光模糊光斑定调,光纤生命线串场,Bento 卡片全部塞「活界面」,Lucide 图标 + 双字体锁定——照这四条写,出来的就是「GitHub 级」而不是「模板级」。

提示词 提示词示例:让出图更稳定的负面词 #comfyui #stable-diffusion

出图人物崩坏时,往负面提示词里加这组:

lowres, bad anatomy, bad hands, extra fingers, worst quality, jpeg artifacts

为什么有效

  • bad anatomy 直接对准肢体崩坏的高发区
  • 质量类词(worst quality 等)在多数 SDXL 模型上都认识
  • 记住:负面词不是越多越好,堆太多会互相干扰

这里是「每日所学」的第一条记录。以后每天学到的东西都记在这里。

这站怎么用

  • 时间线按天分组,最新的在最上面
  • 左侧可以按分类筛选
  • 每条都是独立页面,可以单独分享链接

格式都支持什么

分级标题

像这样一级一级往下组织内容,再杂的知识也能理顺。

代码块

def learn(something):
    return f"今天学了 {something}"

图片

演示图片:时间线示意

提示词 「历史谜局」海报视觉体系:历史事件 × 艺术风格 #历史谜局 #海报设计 #提示词工程

给「历史谜局」项目定的设计原则:不做千篇一律的历史海报,而是让每种历史事件配对最合适的艺术风格,365 天不重样,但布局永远长了一张「同一个网站的脸」。

八种风格速查(附可直接复用的提示词)

风格 适用事件
历史胶片纪实 柏林墙、冷战、20 世纪大事
艺术电影海报 有深刻社会意义的戏剧性事件
古典铜版画 大航海、工业革命、科学发现
古典油画 文艺复兴、王朝、重大发现
瑞士现代主义 现代科技、思想变革
复古未来主义 登月、太空竞赛、早期计算机
日本浮世绘 日本史、江户、东亚交流
中世纪手稿 中世纪、宗教艺术、神秘历史

历史胶片纪实(Analog Documentary)

1980s analog documentary photography, faded color film, heavy 35mm grain,
imperfect exposure, muted colors, authentic historical atmosphere,
candid composition, analog imperfections, archival photo aesthetic

艺术电影海报(Arthouse Cinema)

arthouse cinema poster, poetic visual storytelling, restrained composition,
dramatic negative space, subtle symbolism, muted cinematic palette,
understated typography, emotionally evocative atmosphere, fine art film photography

古典铜版画(Copperplate Engraving)

19th-century copperplate engraving, intricate etched linework, fine cross-hatching,
antique print texture, sepia ink, aged paper, historical book illustration,
museum-quality engraving

古典油画(Classical Oil Painting)

classical European oil painting, dramatic chiaroscuro lighting, rich pigments,
visible brushstrokes, aged canvas texture, historical composition,
museum painting aesthetic, restrained elegant atmosphere

瑞士现代主义(Swiss Modernism)

Swiss International Typographic Style, asymmetric grid layout,
bold oversized typography, geometric composition, restrained color palette,
strong negative space, editorial graphic design, clean visual hierarchy

复古未来主义(Retro Futurism)

1960s retro futuristic space poster, vintage screen printing, limited color palette,
halftone texture, mid-century graphic design, optimistic space age aesthetic,
bold graphic shapes, nostalgic scientific illustration

日本浮世绘(Ukiyo-e)

traditional Japanese ukiyo-e woodblock print, Edo-period illustration,
flat color blocks, expressive outlines, washi paper texture,
hand-printed imperfections, elegant historical composition

中世纪手稿(Illuminated Manuscript)

medieval illuminated manuscript, antique parchment, hand-painted marginal illustrations,
gold leaf ornamentation, historical calligraphy, faded pigments,
intricate decorative borders, authentic manuscript texture

万能海报公式

$$\text{事件场景} + \text{艺术风格} + \text{视觉构图} + \text{年代质感} + \text{文字布局}$$

比堆砌 masterpiece, best quality 高效得多。五个维度里最关键的一条洞察:

一张海报只要一个视觉主角——可以是一个翻越围墙的人、一只伸出的手、裂缝里透出的光。不要把所有历史细节塞进同一张画面。

例:柏林墙海报不用 arthouse cinema poster 这种泛词撑场面,而是写死 one powerful human gesture as the visual focal point。

工程决定:AI 不碰文字

  • AI 只生成无文字的历史艺术底图
  • 标题、日期、名言、签名全部由网站 HTML/CSS 固定渲染,签名用固定艺术字体
  • 最终海报由网页导出

为什么:① 字体/布局/签名跨 365 天完全一致,一眼认出同一个网站;② AI 写中文必出错,绕开。

品牌一致性原则

建立 8~12 种艺术风格轮换,但标题位置、日期设计、艺术签名永远固定。风格管「每天不一样」,布局管「一看就是你」。

另外两条红线:艺术底图要注明「艺术再现,非真实历史照片」;用真实档案照片必须核查版权。

一套 Kaggle / Google 设计语言的仪表盘构建提示词(Streamlit / React 均可描述,落地推荐 React + Tailwind)。整体气质:极简纯白 × 深灰高对比,与「GitHub 深空暗色风」正好凑成明暗两套皮肤方法论。

六段页面骨架

1. 左侧常驻侧边栏

  • 顶部品牌 Logo(如 ≡ minerva)
  • 全宽纯黑大胶囊主按钮(如 + Create Bounty),整页唯一的重色块,视觉锚点
  • 导航项:全圆角胶囊菜单,选中态浅米黄背景 #fbf7ee,不带原生 radio 圆点
  • 下方浅灰色分组子菜单(Your Work、Documentation 类)

2. 页面顶栏

全圆角居中药丸搜索框;右侧悬浮圆形用户彩色头像。

3. 抬头横幅(Hero Banner)

  • 高度 290px,纯白背景卡片
  • 右侧 16:9 高清画作,background-size: auto 100% 且靠右对齐——主体(人物/动物)绝不被裁切
  • 左侧叠多段白色平滑渐变遮罩,托底欢迎标题 / 副标题 / 名言
  • 右侧画面区域绝不堆叠任何遮挡卡片——留白就是高级感

4. 数据指标横条(Metric Strip)

紧贴横幅下方,上下 1px 细浅灰分割线;单行 Flex 平铺 5-6 个指标单元:图标 + 灰色小标签 + 黑色加粗数据。

5. 焦点引导卡片网格(Focus Cards)

3 列自适应;卡片上半部分柔和暖黄色径向渐变,正中悬浮带黑边框的白色圆形徽章图标;下半部分标题 + 简短说明;悬停 -3px 微上浮 + 投影。

6. 任务 / 内容列表流(Task Feed)

顶部白底浅灰边紧凑下拉过滤器;下方圆角卡片列表,右侧绿色胶囊赏金标签,点击平滑展开查看 Markdown 详细说明。

为什么这是条好提示词

把最容易翻车的审美判断预先写死成数字:290px、-3px、#fbf7ee、auto 100%——AI 没有自由发挥的空间,就没有翻车的空间。

可补的两块

  1. 配色只给了米黄高亮,缺正文灰阶 token——建议补 Google 灰一族(正文 #5f6368、次级 #80868b、分割线 #dadce0)
  2. Streamlit 的组件自定义度撑不起这套细节,React + Tailwind + Framer Motion 才是对等落地栈;图标可沿用 Lucide 线框(与暗色版规范一致)