构成主义 Web 设计 · 资源清单

验证规则：本清单中每一条都标注了验证方式。星数与许可证来自 api.github.com 的实际返回（不是搜索结果摘要），字体西里尔覆盖来自 Google Fonts 官方元数据（1950 个字族逐族查询），CSS 兼容性来自 MDN 页面上的 Baseline 标识。 未验证的会明确标注「未验证」——请勿把未验证条目当作已确认事实使用。

1. 核心结论（先看这个）#

要开始一个构成主义网页项目，真正需要装的其实只有 6 样东西：

其余都是"锦上添花"或"仅作参考，不要抄代码"。

2. GitHub 资源#

2.1 ⭐ 最值得先拿的（实测星数 + 许可证，全部已验证）#

2.2 快速试风格 / 原型比稿#

2.3 风格相近的 Agent Skill（可读其"设计原则"章节当 brief）#

2.4 与构成主义直接相关的作品复刻（个人项目，作参考）#

提醒：这些都是 0–5 星的小项目，未经生产验证。参考做法可以，不要指望代码质量。

2.5 为什么没有现成的「构成主义 CSS 框架」#

实测：以 constructivist 搜索 GitHub 全站，总共只有 78 个仓库，排在前面的全是机器学习/教育学（"constructivism" 在教育学里是"建构主义"）——与视觉设计无关。

结论：这个风格的 CSS 框架生态是空白的。 GitHub 上不存在高星、在维护的"构成主义 CSS 框架"，也不存在独立的、维护中的"印刷套印错位（misregistration）CSS 库"（css+overprint 搜索仅 1 个 0 星无许可证仓库）。

这不是坏事——意味着你做出来的东西不会像某个模板。本项目的 constructivism-kit/kv.css 就是为填补这个空白写的。

3. ⚠️ 许可证红灯清单（无许可证 = 默认保留所有权利）#

"没有 LICENSE 文件"不等于"可以随便用"。 以下仓库经实测确认没有许可证文件，不可直接复制代码进项目，只可阅读借鉴思路：

yoksel/svg-filters（最全的 SVG 滤镜配方，含 paper/dust/zebra/contour preset）、cjimmy/grainy-gradients（最好的 CSS 噪点配方）、tomren1/dither-with-css（Bayer 抖动算法）、bennettfeely/clippy、yoksel/relative-clip-path、davetron5000/brutalist-web-design、codrops/PageTransitions、codrops/DistortedButtonEffects、Volorf/Processing-Posters、gsbm/web-avant-gardes、desandro/breathing-halftone、stewdio/stereoscopic、Kyles-World/Futura-Font

特别点名两个高价值但高风险： - yoksel/svg-filters —— 最全的 SVG 滤镜配方库，但无授权 - cjimmy/grainy-gradients —— 最好的纯 CSS 噪点渐变配方，但无授权

替代方案：这两者的效果都可用 MIT 的 lsqkk/gallery 写法 或 Apache-2.0 的 paper-design/shaders 等价实现，授权干净。

非标准/易误读许可证（用前必须读原文）：

已归档/停止维护（可读不可依赖）： picocss/pico（16,847★，API 实测 archived: true）、zichy/vicco、imperavi/kube、gsbm/web-avant-gardes（已归档）、kristoferjoseph/flexboxgrid（2020）、desandro/breathing-halftone（2015）、stewdio/stereoscopic（2014）、grsmv/bauhaus.css（2015）

4. 字体资源#

4.1 结论速查（全部实测西里尔覆盖）#

数据来源：https://fonts.google.com/metadata/fonts（1950 个字族逐族查询 subsets 字段），非凭印象。

✅ 支持西里尔：Oswald、Unbounded、Russo One、Rubik Mono One、Jost、Play、PT Sans / PT Serif / PT Mono、PT Sans Narrow、Roboto Condensed、Alumni Sans、Manrope、Onest、Golos Text、Commissioner、Noto Sans / Serif、Source Serif 4、IBM Plex Sans / Mono、JetBrains Mono、Fira Sans、Alegreya Sans、Comfortaa、Prata、Podkova、Oranienbaum、Yeseva One、Ruslan Display、Prosto One、Kelly Slab、Iceberg、Marmelad、Inter、Geist / Geist Mono

❌ 不支持西里尔（页面出现俄文即掉字体）：Anton、Bebas Neue、Archivo、Archivo Black、Barlow、Barlow Condensed、Bricolage Grotesque、Anybody、Chivo、Space Grotesk、Syne、Teko、Saira Condensed、Fjalla One、League Gothic、League Spartan、Big Shoulders、Alfa Slab One、Ultra、Rye、Bevan、Rozha One、Chonburi、Michroma、Orbitron、Syncopate、Bodoni Moda

🔴 这是本次调研最有价值的单条信息。 - Anton / Bebas Neue / Archivo Black / Barlow Condensed 是设计师做"海报标题"时最顺手的四个选择 —— 全都没有西里尔支持。 - League Gothic 是"窄体大写"的最佳选手之一，可惜不能上西里尔。 - 所有开源"工业木活字 / slab"字体（Alfa Slab One / Ultra / Rye / Bevan / Rozha One / Chonburi）全部无西里尔。 该气质只能靠 Oswald / Russo One / Ruslan Display / PT Sans Narrow 近似。

⚠️ 未找到：Molot（常被推荐用于构成主义海报的西里尔展示体）在 Google Fonts 元数据中 NOT-IN-GF，也未定位到可信的开源仓库 → 不要使用来路不明的副本。

4.2 中文字体（GitHub API 实测星数与许可证）#

🔴 中文授权陷阱：阿里巴巴普惠体、MiSans、HarmonyOS Sans、OPPO Sans 都不是开源许可证 —— 它们是厂商的「免费商用授权」，条款与 OFL 不同（通常不可修改、不可再分发字体文件、有附加限制）。 必须逐字读官方授权说明，不要当成 OFL 用。本次未能取得这些厂商授权页的可引用 URL，请自行到官方页面确认。

🔴 中文字体必须做 unicode-range 分包：思源黑体全量有数 MB，直接 @font-face 引入会严重拖慢首屏。

4.3 其他含西里尔的开源怪诞体（非 Google Fonts）#

拿字体请认准 google/fonts 仓库中每个 family 目录内的 OFL.txt / LICENSE.txt。

4.4 字体获取与判定技巧#

# ① 权威判定西里尔覆盖（查 1950 个字族的官方元数据）
$m = Invoke-RestMethod 'https://fonts.google.com/metadata/fonts'
$m.familyMetadataList | Where-Object { $_.subsets -contains 'cyrillic' } | Select-Object family

# ② 另一条判定路径：带 text= 请求西里尔字符，字体不含该字形会报错
Invoke-WebRequest 'https://fonts.googleapis.com/css2?family=Oswald&text=%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82'

4.5 ⚠️ 字体授权的两个"看起来能用、其实有坑"#

① Fontshare（ITF FFL）—— 建议整个排除

→ 本项目排除 Fontshare。授权文本取自它自己的 402KB bundle（fontshare.com/js/main.<hash>.js，因为授权页是纯 JS 单页）。

② Velvetyne —— 官网挂了，但 GitLab 给了一手授权

velvetyne.fr 全站 HTTP 500（首页是罢工公告），但官方 GitLab 群组可用： https://gitlab.com/api/v4/groups/velvetyne/projects → 34 个项目 + 每个仓库根目录的 LICENSE.txt 原文，全部 OFL 1.1。

❌ 未找到：用户点名的 Cirrus（官网 500、Velvetyne GitLab 34 项里没有、GitLab 全站搜 cirrus 40 条无字体项目）。 ❌ Druk 没有任何免费授权，也没有可核实的免费替代授权原文 → 可靠替代只有 Oswald / Anton / Archivo Black 这类 OFL 体。

4.6 字体事实的三处更正与补充（二进制 cmap 实测）#

比 Google Fonts 的 subsets 元数据更硬一级 —— 直接下载字体二进制、解析 cmap 表逐字形判定。

• 新增有西里尔的选项：Stalinist One、Tektur、Lack（cyr-ext +124）—— 其中 Stalinist One 名字与气质都很对口。
• Jost 需要限定：俄文完整，但乌克兰文不完整（26/31，缺 ұ / є / і / ї）。只做俄文没问题。
• Space Mono 没有西里尔（此前未列入）。
• "Archivo Expanded" 不是一款独立字体 —— 它就是 Archivo 变量字体把 wdth 轴拉到 125，同样没有西里尔。
• Oswald 的西里尔覆盖最完整（cyr-ext，+140 字形），且 OFL 允许 subset → 依然是本项目标题字的第一顺位。

5. 参考站点#

⚠️ 状态图例：✅ 已完成真实 HTTP 请求验证 ｜ ⚠️ 真实存在但被反爬拦截（403） ｜ ❌ 已实测失效（404）

5.1 ⭐ 主题即构成主义的站点（含实测抓到的技术证据）#

这一组是最有价值的参考——不是"看起来像"，而是实测到了它们的 CSS 令牌。

5.2 字体厂牌 / 活字标本（可直接看"巨型怪诞体 + 红黑白 + 硬边"）#

5.3 工作室 / 机构（实测存活，附色板令牌）#

5.4 可用性纪律参考（不是视觉参考）#

5.5 灵感目录#

Awwwards SOTD ✅ https://www.awwwards.com/websites/sites_of_the_day/ ｜ Godly ✅ https://godly.website/ ｜ Httpster ✅ https://httpster.net/ ｜ Cargo ✅ https://cargo.site/ ❓未实测：SiteInspire、Behance 专题页；Awwwards 粗野主义分类页 https://www.awwwards.com/websites/brutalism/ 返回 200 但列表由前端渲染，抓不到内容。

5.6 实测已失效的链接（不要写进页面）#

5.7 一手史料#

ROSTA 橱窗（马雅可夫斯基 + 罗德琴科，1919–1921）—— 俄罗斯电讯社宣传窗，最"原始"的构成主义排版范本。建议单独检索 ROSTA Windows 图像。

6. 一手史料来源#

6.1 找到但未能读取的重要资料（缺口，建议人工获取）#

7. ✅ 公有领域图像素材（已实测验证）#

7.1 方法突破：Commons 网页被拦，但 API 通#

本环境的 web_fetch 访问 commons.wikimedia.org 的网页会失败，但 commons.wikimedia.org/w/api.php 完全可用。这是一条通用经验：被 Cloudflare 拦的是网页，不代表 API 也被拦。

可复现的查询方式：

# 按关键词搜文件，并直接带出许可元数据
$u = "https://commons.wikimedia.org/w/api.php?action=query&generator=search" +
     "&gsrsearch=El%20Lissitzky%20poster&gsrnamespace=6&gsrlimit=6" +
     "&prop=imageinfo&iiprop=url|extmetadata&format=json"
Invoke-RestMethod -Uri $u -Headers @{ 'User-Agent' = 'your-tool/1.0 (contact)' }

⚠️ Commons API 限流较严（实测连续请求会返回 429）。请放慢节奏（每次间隔 15–20 秒），并在 User-Agent 里写明用途与联系方式。

7.2 已实测确认的公有领域作品#

以下每一条都通过 Commons API 逐件查询，extmetadata.LicenseShortName 返回 Public domain：

同批查询中还确认了下列文件为 Public domain（文件页 URL 用下面的稳定模式构造即可）：

🔴 但请先读 7.4 的版权判定表再动手。 下表里凡是克卢西斯（Klutsis）相关的，虽然 Commons 标了 Public domain， 仍可能因"死后平反"条款保护到 2027 年 —— 2027 年前建议回避。

7.3 稳定链接模式（已验证）#

不要硬编码 upload.wikimedia.org 的具体哈希路径（会变）。用 Commons 的官方重定向模式：

文件页：https://commons.wikimedia.org/wiki/File:<文件名>
直链  ：https://commons.wikimedia.org/wiki/Special:FilePath/<URL编码后的文件名>

已实测：Special:FilePath/Beat%20the%20Whites%20with%20the%20Red%20Wedge.jpg → HTTP 200，301 KB，正确重定向到 upload.wikimedia.org 原图。

7.4 🔴 版权判定：一个必须先看的陷阱表#

依据：Wikimedia Commons 官方模板 Template:PD-Russia-1996/en 的逐字原文。 俄罗斯 PD 的判定条件是「作者卒于 1942-01-01 之前」；美国侧依据「URAA 日（1996-01-01）时在母国已 PD」。

🔴 克卢西斯陷阱（这是本次最容易被忽略的一条） 他虽然 1938 年去世（表面符合「卒于 1942 前」），但 PD-Russia-1996 模板有脚注规定： 若作者曾遭镇压并获死后平反，保护期自平反年起算。 若他的平反发生在 1956 年，则保护期顺延至 2027-01-01。 （他的确切平反年份我未能在可达页面核实 —— 标记为「未找到」，因此按最保守口径处理。） → 本项目的海报一律不使用克卢西斯作品。

🟠 Rodchenko 同样处于边缘状态：俄罗斯侧 2027 年才到期；美国侧只认 1930 年及以前的出版物。 我在 soviet-press 页面里用的是李西茨基（零风险），没有用罗德琴科或克卢西斯的图像 —— 这是刻意的选择。

7.5 🔴 翻拍件陷阱（比版权到期更容易踩）#

Commons 上大量标着"构成主义海报"的文件，其实是 2021/2022 年现代摄影师的翻拍照片， 授权是 CC BY / CC BY-SA —— 翻拍件本身是新的版权客体，用它必须署名并以相同方式共享。

实测两例： - Varvara stepanova, giocatori di biliardo → CC BY-SA 4.0，摄影 Francesco Bini，2022 - Long Live the USSR! 1935 → CC BY 2.0，摄影 Steve Knight，2021

筛选方法：查 extmetadata.Artist 是不是画家本人，再看 DateTimeOriginal 是不是 1920s。 两个条件都满足才是真·扫描件。

真·PD 高清件（实测像素）：

7.6 ⚠️ 其他仍需注意#

1. ⚠️ LicenseShortName = Public domain 是 Commons 社区自己的判定，不是法律意见。商用前请逐件复核。
2. ⚠️ Art Institute of Chicago API 也可调用（https://api.artic.edu/api/v1/artworks/search，返回 is_public_domain），但实测以 constructivism 检索出的俄国纺织品设计 多为 not-PD，价值有限。
3. ❌ 已实测失效的 API：Met Museum（HTTP 410）、Rijksmuseum（410）、Europeana（401，需 key）。

7.7 纹理与纸张素材（全部实测授权原文）#

❌ 未找到：Rawpixel（只返机器人壳）、NYPL（JS 壳）、Met（429）、MoMA（403）、Smithsonian（403）、Lost&Taken / Toptal（403）、Transparent Textures（超时）、Hero Patterns（授权页未读到）、扫描划痕类位图来源。

💡 6 类效果里有 5 类可以零字节用 CSS/SVG 实现：feTurbulence 纸纤维、radial-gradient + <pattern patternTransform="rotate(45)"> 真 45° 网屏、非等向 baseFrequency="0.015 0.6" 做横向扫描划痕、repeating-conic-gradient 颗粒、mix-blend-mode: multiply + 伪元素位移做套印错位、六层 repeating-linear-gradient 做毫米工程格。只有真实纸浆纤维建议用 CC0 位图。

7.5 作者生卒年（版权判定的起点）#

⚠️ 上表只是起点，不构成法律意见。 俄罗斯 70 年规则、美国"出版年 + 95 年"规则、以及"二战期间作品可能延长"等因素都会改变结论。

替代方案（无需版权图片）： 1. 用自己的照片做双色调/半调加工 —— 最安全，且符合构成主义"用真实照片当材料"的精神 2. 用 CSS/SVG 纯几何生成 —— 楔形、圆、射线、网点全部可代码生成，零版权风险 3. 用 AI 生成图像后自行加工 —— 注意你自己对生成结果的权利

8. 检索方法论备忘（下次可直接复用）#

本环境的网络限制与绕行方案（这本身是有价值的发现）：

未认证 GitHub API 的省流技巧（避免海量 JSON 挤爆上下文）：

$r = Invoke-RestMethod "https://api.github.com/search/repositories?q=brutalist+css&sort=stars&per_page=5" `
     -Headers @{ 'User-Agent'='x'; 'Accept'='application/vnd.github+json' }
$r.items | Select-Object full_name, stargazers_count, @{n='lic';e={$_.license.spdx_id}}, pushed_at

9. 交付缺口清单（我知道自己没做到的）#

1. ✅ 公有领域海报的高清下载链接 —— 已通过 Commons API 解决，见第 7 节（李西茨基、马列维奇等作品的直链已实测 200）。剩余缺口：克卢西斯、斯捷潘诺娃、波波娃的具体直链未逐条取（文件已确认为 PD，但为避免再次触发 429 未逐一取 URL），可自行用 Special:FilePath 模式构造
2. ❌ 每件作品的精确版权状态 —— 只给了作者生卒年作为起点，未逐件核定
3. ⚠️ RGB 以外的深度案例 —— 第 5 节已补入 11 个实测抓到 CSS 证据的真实站点，但 Behance / SiteInspire 上的俄语区案例未逐页核实
4. ❌ 俄文论文《构成主义对现代网页设计的影响》全文 —— PDF 无法读取
5. ❌ 真实的构成主义印刷网点/纸张扫描素材 —— 未找到可验证的免费商用下载源
6. ❌ reyrove/Deconstructed-Stage-Generative-Art、josiebb/about2squares、oziomarc/poster-recreation —— 检索结果可见，但独立核实未成功（API 限流 / 404），标记为未验证
7. ⚠️ @property / animation-timeline / text-spacing-trim 的兼容性 —— MDN 未取到 Baseline 标识，未做断言（animation-timeline 在 05-前端技术方案.md 中有更细的 BCD 数据）
8. ⚠️ 几个仓库的许可证细节 —— pinecreativelabs/Brutalist-Framework（Other）需人工确认
9. ❌ 厂商中文字体的官方授权页 URL —— 阿里巴巴普惠体 / MiSans / HarmonyOS Sans / OPPO Sans 的授权页未取得
10. ⚠️ shape() 与 color-mix() 的精确 BCD 版本号 —— 已标注未核实，未填数字

这些缺口的共同原因都是网络访问限制，不是没去找。 建议在能访问外网的机器上补齐。

其中真正影响动手的只有第 1 条（找不到合法可用的历史海报素材）。但它有干净的替代方案：用自己的照片做双色调/半调加工，或用 CSS/SVG 纯几何生成——两者都零版权风险，且更符合构成主义"用真实照片当材料"的精神。