Skip to main content Home Creators martin65536 liquid-glass-webgl riso-product
riso-product Risograph 印刷质感的产品页 / 品牌页 / 落地页模板 — 奶油纸底 + 半调点纸纹 + 两到三色叠印 + 隷書 / 毛笔体大标题带错位色阴影 + Neobrutalism 硬阴影按钮卡片。7 套配色预设（粉+蓝 / 薄荷+珊瑚 / 柠檬+紫电 / 橄榄+玫瑰 / 暗夜荧光 / 天蓝+芥末 / 赤陶+鸭蓝）× 4 套版式骨架（单页长滚动 landing / home+单详情页 / 杂志独立刊物 / 海报式单屏）。触发：用户要"印刷感 / riso 风 / 复古丝网 / 奶油纸感 / 中式杂志感"的品牌官网、产品 landing、限量发售页、独立刊物页。当用户只说"做个产品页"且无明确风格时不要用它。
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/martin65536/liquid-glass-webgl --skill riso-productThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name riso-product description Risograph 印刷质感的产品页 / 品牌页 / 落地页模板 — 奶油纸底 + 半调点纸纹 + 两到三色叠印 + 隷書 / 毛笔体大标题带错位色阴影 + Neobrutalism 硬阴影按钮卡片。7 套配色预设（粉+蓝 / 薄荷+珊瑚 / 柠檬+紫电 / 橄榄+玫瑰 / 暗夜荧光 / 天蓝+芥末 / 赤陶+鸭蓝）× 4 套版式骨架（单页长滚动 landing / home+单详情页 / 杂志独立刊物 / 海报式单屏）。触发：用户要"印刷感 / riso 风 / 复古丝网 / 奶油纸感 / 中式杂志感"的品牌官网、产品 landing、限量发售页、独立刊物页。当用户只说"做个产品页"且无明确风格时不要用它。 visibility public mode template carrier web-page scenario brand-landing pattern_source reference.html source_priority skill-first triggers ["做个 riso 风产品页","印刷感品牌页","奶油纸 landing","复古丝网产品页","中式杂志感品牌页","限量发售页","独立刊物页"] related_patterns saas-landing
riso-product — riso 印刷质感页面
把 risograph 油印机的"两到三色叠印 + 半调点 + 奶油纸"翻译成网页。骨架来自 NOIRLAB 声学家居品牌的设计原型（见 reference.html），但这份 skill 给的是气质和积木，不是模板 。
怎么用这份 skill
看气质 ：先 Read reference.html，理解颜色叠加方式、阴影方向、字体层级、半调点疏密。这一步只是为了"知道对的样子长什么样"。 挑配色 ：从下面 7 套预设里选一套（或按用户描述自由调），不要默认用 reference 的粉+蓝 。挑骨架 ：从下面 4 个版式原型里选一个（或混搭）；禁止整页 clone reference 的 home + 4 详情页 + 故事页结构 。抄积木 ：CSS 片段（halftone、paper、neobrutalism shadow、riso shade、错位标题阴影）可以直接拿用。过红线 ：写完对照"必须 / 禁止"清单自检。
视觉 DNA — 这些不能丢
少了任意一条，就不再是 riso：
奶油纸底 ：背景不能是纯白也不能是冷灰，必须带温暖的米黄/燕麦/亚麻色（明度 88–94，饱和度 8–18）半调点叠印 ：全局 body::after 用 radial-gradient(circle at 1px 1px, ...) 5–8px 网格、mix-blend-mode: multiply、opacity 30–55%。色块大区域上再叠一层不同色的更大颗粒（8–12px）两到三色叠印 hero ：hero / 大色块用 2-3 个 radial-gradient ellipse 不同位置不同色（粉 + 蓝 + 黄 是经典三色组合，但可以全替），mix-blend-mode: multiply，让色彩在交叠处自然产生第三色隷書/毛笔体大标题 + 错位色阴影 ：text-shadow: 4px 4px 0 var(--accent-a), 8px 8px 0 var(--accent-b)，模拟丝网印刷套印错位的物理瑕疵Neobrutalism 硬阴影 ：按钮/卡片用 box-shadow: Npx Npx 0 var(--ink)（N=4–8），hover 偏移到 0，元素位移 translate(Npx, Npx)，2px solid 实色边框
必须 / 禁止（写完自检）
必须 ：
禁止 ：
<section>
七套配色预设（任选一套，禁止默认） 每套都满足"低饱和奶油底 + 两强色 + 一辅色（可选)"的结构。复制到 :root。
--paper :#F1EBDA ; --ink :#1B1A18 ; --a :#FF3F8E ; --b :#2240FF ; --c :#FFD23A ;
--paper :#EFEEE5 ; --ink :#1F2A28 ; --a :#FF6B5A ; --b :#2BB7A1 ; --c :#FFC857 ;
--paper :#F4EFE4 ; --ink :#16151A ; --a :#F4E04D ; --b :#6A2EE8 ; --c :#FF4D8D ;
--paper :#EFE9D8 ; --ink :#1E1C18 ; --a :#C24A6C ; --b :#5C6E2C ; --c :#D9A24A ;
--paper :#1B1A18 ; --ink :#F1EBDA ; --a :#FF3F8E ; --b :#4DE0C7 ; --c :#FFD23A ;
--paper :#EDE8D8 ; --ink :#1B1B1B ; --a :#3D89C7 ; --b :#D6A92E ; --c :#E0625E ;
--paper :#F0E7D5 ; --ink :#1F1A16 ; --a :#C25538 ; --b :#2F6B7D ; --c :#E4B83B ;
替换原则：把 reference.html 里 var(--pink) 换成你选的 var(--a)，var(--blue) 换成 var(--b)，var(--yellow) 换成 var(--c)。整套统一替换 ，不要某处粉某处红。
四套版式骨架（任选一套，不要再做"home + 4 详情页 + 故事页"组合） 每套都自带 riso 视觉，但结构截然不同 ，让产物不撞脸。
骨架 A — 单页长滚动 landing [announce marquee] → [hero w/ 错位标题] → [3 列 USP] → [产品概览 grid 3-6 卡]
→ [大单品 spotlight w/ 半身图 + 规格表] → [创始人引言段 + 数字 counter]
→ [社区/真实评论 3 卡] → [FAQ 5–7 条手风琴] → [订阅条] → [footer]
没有详情页 。所有产品/详情都在同一页折叠展开。适合 1–4 个 SKU 的窄品牌。
骨架 B — 双页：home + 单详情页（无 hash 路由） home: [hero 全屏图+错位标题] → [4 卡产品 grid] → [品牌故事 2 列长文] → [footer]
detail: 独立 detail.html → [大 hero 图 + 价格胶囊] → [左长文 + 右 sticky 规格表]
→ [3 张细节图 dgallery] → [其他系列 3 卡] → [返回 home]
适合 1 个主推产品 + 一些次要 SKU 的品牌（比如 1 款香水 + 3 个配件）。
骨架 C — 杂志/独立刊物布局 [封面页：单大字 + riso 噪点全屏 + 期号/日期 mono]
[目录 contents：左竖排序号，右每篇标题+作者+栏目]
[内页：左右栏不对称，长文 6:4 / 引文 7:3 / 大图 1:1 / 图文混排]
[书脊页脚：mono 小字 章节名 + 页码]
适合品牌内容站 / brand magazine / 文化品牌 / 出版相关项目。可以没有任何 CTA 按钮。
骨架 D — 海报式单屏（fold-only） 首屏一整页占满：
上：announce + brand
中：超大错位标题（屏幕 60% 高度）+ 一句话副标
下：单个 CTA + 一个细节图缩略（可点开 lightbox）
不需要滚动。适合 waitlist / drop / 限量发售 / event。
可直接抄的 CSS 积木
全局纸纹 + 半调点（必备） body {
background : var (--paper);
color : var (--ink);
position : relative;
}
body ::before {
content :"" ; position :fixed; inset :0 ; pointer-events :none; z-index :9000 ;
background-image :url ("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12 0 0 0 0 .10 0 0 0 0 .08 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>" );
opacity :.45 ; mix-blend-mode :multiply;
}
body ::after {
content :"" ; position :fixed; inset :0 ; pointer-events :none; z-index :8990 ;
background-image : radial-gradient (circle at 1px 1px , rgba (27 ,26 ,24 ,.08 ) 1px , transparent 1.4px );
background-size : 5px 5px ;
mix-blend-mode : multiply; opacity :.55 ;
}
错位色标题阴影 .headline-riso {
font-family : var (--hanli);
text-shadow : 4px 4px 0 var (--a), 8px 8px 0 var (--b);
letter-spacing : .04em ;
}
.headline-riso--invert {
color : var (--paper);
text-shadow : 3px 3px 0 var (--a), 6px 6px 0 var (--c);
}
隷書/毛笔字体栈（中文标题专用） :root {
--hanli : "白舟隷書教漢" , "HakushuReisho" , "Yuji Mai" , "Yuji Boku" ,
"ZCOOL XiaoWei" , "STLiti" , "华文隶书" , "LiSu" , "SimLi" , Georgia, serif;
}
@font-face {
font-family :"HakushuReisho" ; font-display :swap;
src : local ("HOT-ReishoR-K" ), local ("Hakushu Reisho R" ), local ("白舟隷書教漢" );
}
禁止 用 PingFang / Source Han Sans / Microsoft YaHei 做标题——会立刻没有 riso 味。正文可以用 Inter / 系统 sans。
riso 三色叠印（大色块/hero 用） .riso-shade {
position : absolute; inset : 0 ; pointer-events : none;
background :
radial-gradient (ellipse 55% 65% at 18% 25% , rgba (255 ,63 ,142 ,.55 ) 0% , transparent 60% ),
radial-gradient (ellipse 50% 55% at 82% 75% , rgba (34 ,64 ,255 ,.50 ) 0% , transparent 60% ),
radial-gradient (ellipse 30% 35% at 65% 18% , rgba (255 ,210 ,58 ,.40 ) 0% , transparent 70% );
mix-blend-mode : multiply;
}
关键 ：3 个 ellipse 必须位置错开 （左上 / 右下 / 中右）才有套印错位感。三色都对齐中心 = 失败。
Neobrutalism 按钮 .btn-riso {
display :inline-flex; align-items :center; gap :14px ;
padding :16px 28px ; font-weight :600 ; letter-spacing :.05em ;
border :2px solid var (--ink); border-radius :999px ;
background : var (--ink); color : var (--paper);
box-shadow : 5px 5px 0 var (--a);
transition : all .25s cubic-bezier (.2 ,.8 ,.2 ,1 );
}
.btn-riso :hover {
background : var (--a); color : var (--paper);
box-shadow : 0 0 0 var (--a);
transform : translate (5px , 5px );
}
4 种变体：--ink（实心黑底）/ --paper（白底蓝阴影）/ --ghost（透明 + ink 边框）/ --accent（强色底）。hover 偏移到 0 + translate 是这套阴影的关键，hover 是阴影"消失"而不是"加深"。
Neobrutalism 卡片 .card-riso {
border : 2px solid var (--ink);
box-shadow : 6px 6px 0 var (--ink);
background : var (--paper-2 );
transition : transform .3s , box-shadow .3s ;
}
.card-riso :hover {
transform : translate (-3px , -3px );
box-shadow : 9px 9px 0 var (--a);
}
图片半调叠加（不糊掉图） .img-riso {
position : relative; overflow : hidden;
border : 2px solid var (--ink); box-shadow : 5px 5px 0 var (--a);
}
.img-riso > img ,
.img-riso > .img {
width :100% ; height :100% ; object-fit : cover;
filter : contrast (1.05 ) saturate (.9 );
}
.img-riso ::after {
content :"" ; position :absolute; inset :0 ; pointer-events :none;
background-image : radial-gradient (circle at 1px 1px , rgba (34 ,64 ,255 ,.18 ) 1px , transparent 1.4px );
background-size : 5px 5px ;
mix-blend-mode : multiply;
}
核心 ：半调点叠在图之上但只用 18% 不透明度，图本身保持清晰；图加 filter: contrast(1.05) saturate(.9) 把数字感拉回油墨感。
跑马灯公告条（可选） .announce {
background : var (--a); color : var (--paper);
border-bottom : 2px solid var (--ink); text-shadow : 1.5px 1.5px 0 var (--b);
height :40px ; display :flex; align-items :center; overflow :hidden;
}
.announce__track { display :flex; gap :64px ; white-space :nowrap; animation : marquee 38s linear infinite; }
@keyframes marquee{ from {transform :translateX (0 )} to {transform :translateX (-50% )} }
中文 webfont 加载（必做） 谷歌的 Yuji Mai / ZCOOL XiaoWei 是中文 + 日文 webfont，文件大。按"四件套"加载：
<link rel ="preconnect" href ="https://fonts.googleapis.com" >
<link rel ="preconnect" href ="https://fonts.gstatic.com" crossorigin >
<link rel ="preload" as ="style" fetchpriority ="high"
href ="https://fonts.googleapis.com/css2?family=Yuji+Mai&family=ZCOOL+XiaoWei&display=swap" >
<link rel ="stylesheet"
href ="https://fonts.googleapis.com/css2?family=Yuji+Mai&family=ZCOOL+XiaoWei&display=swap"
media ="print" onload ="this.media='all'" >
<noscript > <link rel ="stylesheet"
href ="https://fonts.googleapis.com/css2?family=Yuji+Mai&family=ZCOOL+XiaoWei&display=swap" > </noscript >
然后 font-display: swap + 系统隶书兜底（已写在 --hanli 里）。
反模式速查（看到这些就回头改） 症状 错在哪 修正 标题用 PingFang 加粗 没用毛笔/隷書字体 换 var(--hanli) 标题没阴影 / 阴影是黑色 没做错位色阴影 text-shadow:4px 4px 0 var(--a),8px 8px 0 var(--b)背景是 #FFFFFF / 冷灰 paper 底色不对 换温暖奶油色 #F1EBDA / #EFE9D8 半调点要么没有要么糊一片 opacity 错、颗粒太大或太密 5–8px 网格，opacity 30–55% 图片灰蒙蒙看不清 加了重 overlay 只叠半调点 18% + filter: contrast(1.05) saturate(.9) 按钮 hover 阴影变大 方向反了 hover 阴影应该缩到 0 + 元素 translate 全用 NOIRLAB 粉+蓝 撞脸 换七套预设之一 写了 4 个 hash 路由详情页 整页 clone 了 reference 结构 用骨架 A/B/C/D 之一
关于 reference.html 放在 skill 同目录，所有图片已 base64 内联 （用 CSS :root 变量 --img-01..06 去重）—— 单文件 ~2.6MB，直接双击就能打开看完整效果。只看气质，不要照抄结构 。如果你只是想知道"对的样子大概长啥样"，看它；如果你想知道"我这个新项目该怎么搭"，看上面的骨架 A/B/C/D 和积木。
输入信息核对
品牌名 + 一句话定位
1–6 个产品 / 1 个主推 / 单事件（影响选骨架）
配色偏好（用预设名 or 描述）
图片：用户给 or 用 picsum 占位
风格描述里有没有"撞脸 NOIRLAB"的禁区（用户要"低调克制" → 别用骨架 A 全屏跑马灯）
输出要求
单文件 HTML（可选 hash 路由，骨架 A/D 不要，B/C 可选）
移动端响应式（≥1024 / 900 / 520 三档断点至少做两档）
中文 webfont 按上面四件套加载
不写注释解释 CSS 是什么，CSS 自己会说话
More from this repository
ACADEMIC PRIORITY: Activate this skill whenever the user's query involves academic, scholarly, or research-related topics — including but not limited to: papers, publications, citations, scholars, researchers, professors, institutions, universities, labs, journals, conferences, venues, patents, research fields, h-index, impact factor, co-authorship, dissertations, theses, peer review, grant projects, research trends, or any question about "who published what / where / when". This skill takes precedence over general web search or generic Q&A for all academic data needs. Full-featured AMiner skill with 28 APIs and 5 workflows. Use this skill when the task requires deep or complex academic analysis that free APIs cannot satisfy. Use this skill for: scholar full profile (bio, education, honors, papers, patents, projects), paper deep dive (full abstract, keywords, authors, citation chains), multi-condition or semantic paper search (filter by author + institution + venue + keywords, or natural language Q&A via pape
