25 个资源，到底怎么用

2000+ 真实产品风格库，带截图、字体、颜色和 AI 可读的 DESIGN.md。

具体怎么用

1. 筛 3 个深色金融/数据产品，不要多。
2. 对比它们的 color role、字体搭配、圆角、信息密度、动效克制程度。
3. 把差异写进我们的 DESIGN.md：保留什么、改什么、为什么；标注参考来源。

放进 Launchpad：设计规范 2.0 的 Visual Theme、Color、Typography 三段。

本周产出：DESIGN.md 的 Visual Theme 段初稿（5–10 行）+ 3 个参考链接。

它的 DESIGN.md 当结构参考，不当 token 源。

2600+ 组件案例，把同一个组件在不同设计系统里的解法聚合在一起。

具体怎么用

1. 选一个组件（先 Button，再 Table）。
2. 看 3 个系统的 anatomy、states、a11y、do/don't。
3. 填我们的 20 字段模板，标清楚“借用 / 改造 / 不采用”，差异写一句原因。

放进 Launchpad：组件页 20 字段 + 12 态矩阵；先做 Button 和 Table 两个样板。

本周产出：Button 和 Table 两个组件的 20 字段表，含 3 个参考系统。

案例不是规范；每个案例的 license 要单独看。

几百套“AI 能读”的设计系统 Markdown；每套按 9 段组织，是写 DESIGN.md 的现成骨架。

具体怎么用

1. 挑 2 套结构完整的（一个深色、一个数据产品）。
2. 对照仓库实际 9 段，列出我们缺的段。
3. 每缺一段写 5–10 行，先写“禁止什么”，再写“推荐什么”。

放进 Launchpad：设计规范 2.0 的 DESIGN.md 目录与 9 段内容。

本周产出：补齐 4 段：Visual Theme / Layout / Responsive / Do's & Don'ts。

优先看仓库实际 schema；粉丝站文章只当理念参考。

162 个 CSS/React 动效示例，带代码与 prompt。

具体怎么用

1. 只选一个动作，别一次看 162 个。
2. 复制 CSS / React 代码。
3. 压到我们的 100/150/200/300ms，换成 --ease-out，去掉弹跳。

放进 Launchpad：按钮、toast、modal、tab。

本周产出：3 个微交互的 CSS，时长与缓动已统一。

只动 transform/opacity；常驻动画不超过 2 个。

可组合、可访问的 React 组件底座；不是传统组件库，代码直接进项目。

具体怎么用

1. 选 5 个核心组件：Button / Input / Dialog / Table / Toast。
2. 接我们的 token 和 12 态。
3. 补测试：键盘、focus、aria、截图。

放进 Launchpad：组件底座；交易前台也用它，但视觉和状态由我们重写。

本周产出：5 个核心组件可运行，token 与状态已接。

它给行为与 a11y，我们给品牌与规范。

50 个可直接复制的微交互，覆盖按钮、hover、loading、卡片。

具体怎么用

1. 选 3 个（hover、press、loading）。
2. 复制 CSS，换成我们的 token。
3. 统一到 150ms 与 --ease-out，删掉弹跳。

放进 Launchpad：按钮、卡片、输入框。

本周产出：3 个微交互，时长与缓动统一。

只做微交互，不做页面转场。

24 个单色圆形加载动画，像 agent 状态，干净克制。

具体怎么用

1. 选 1 个最像“处理中”的。
2. 用 currentColor 接我们的 mint/gold。
3. 配 aria-live 文案：处理中 / 预计 10 秒 / 不要关闭。

放进 Launchpad：交易、验证、异步卡片。

本周产出：三个加载态（交易/验证/数据）。

单色最适合我们；别做无限旋转大图。

1200+ 条设计提示词库，按风格、版式、组件组织。它解决的是“我知道想要什么，但说不出来给 AI”。

具体怎么用

1. 选一个和我们接近的方向（深色、金融、数据产品），复制它的风格段。
2. 把颜色、字体、圆角、间距替换成我们的 token：--bg / --mint / --r-md / 字号阶梯。
3. 在 prompt 里写死结构：hero → 数据 → 证明 → CTA，并注明“不要自由发挥布局”。

放进 Launchpad：W6 落地页 hero、组件示例页的生成起手、空态文案草稿。

本周产出：一段 150 字以内的 hero prompt，含我们的 token 与 4 段结构。

生成结果只当草稿，最终仍走设计评审；不要把它当设计系统。

浏览真实产品界面，并把任意设计映射成可复制的 prompt。

具体怎么用

1. 选一个竞品页面（项目详情 / 拍卖 / 持仓）。
2. 用 Kage 生成页面结构与风格 prompt。
3. 删掉品牌名和原文案，改成我们的 4 段结构，替换真实数据与 CTA。

放进 Launchpad：项目详情、拍卖页的布局参考。

本周产出：一份改过的页面结构 prompt，能直接喂给 agent。

生成结果要过一遍“是否像竞品”的检查，避免撞脸。

dashboard / landing page 的现成 prompt，偏通用 SaaS 风格。

具体怎么用

1. 选一个 dashboard prompt。
2. 把数据字段换成项目 / 拍卖 / 持仓 / 验证。
3. 删掉不需要的卡片，只保留 3 个核心区：概览、列表、操作。

放进 Launchpad：内部后台、项目详情页骨架。

本周产出：一版可用的 dashboard 结构，字段全部换成我们的。

生成后跑状态与 a11y 检查，通用组件不能直接上交易页。

12000+ React/Tailwind 组件，支持 MCP 让 agent 直接搜索和接入。

具体怎么用

1. 让 agent 通过 MCP 搜一个区块（FAQ / 定价 / 社交证明）。
2. 复制到项目，先跑通。
3. 替换 token、删多余动画、补键盘与 aria。

放进 Launchpad：W6 landing 的 social proof / FAQ / 定价区。

本周产出：一个 landing 区块，token 已替换、a11y 已检查。

检查 license、依赖体积、是否带追踪脚本。

可访问的动画/交互组件 kit，Motion + React 实现。

具体怎么用

1. 选一个组件，先看它的 reduced-motion 与焦点处理。
2. 接到我们的 token 与状态。
3. 补键盘与 aria 测试。

放进 Launchpad：React 组件中间态。

本周产出：toast 或 modal 的 React 实现，含 reduced-motion。

MIT；适合参考，不适合整包复制。

完整的 shadcn 设计系统 + 后台模板，偏 dashboard。

具体怎么用

1. 选一个 dashboard 模板。
2. 换 token、删掉不需要的模块。
3. 把关键表补上 12 态与空态。

放进 Launchpad：内部后台 / 运营工具。

本周产出：一个内部后台页面，token 已替换。

模板不是产品设计；别把后台风格带到前台。

2000+ 手绘插画，SVG/PNG 可下载。

具体怎么用

1. 选同一风格 5–8 张。
2. 统一颜色到我们的 mint/gold/paper。
3. 导出 SVG，压缩后使用。

放进 Launchpad：空态、错误、引导。

本周产出：3 个空态插画，风格统一。

注意 license；选一个系列，不要一张一个风格。

1440+ 免费 3D 图标，开源可商用。

具体怎么用

1. 选 6 个同一材质/角度的。
2. 统一颜色与光照。
3. 导出 PNG/WebP，做 2x 适配。

放进 Launchpad：W6 landing。

本周产出：6 个 landing 功能图标。

3D 图标 ≠ 3D hero；不要因此上 WebGL。

精选高端站点，按视觉风格分类，主要用来建立“高级感”的参照。

具体怎么用

1. 选 5 张同一气质的截图（深色、克制、数据感）。
2. 标注它们的共同点：底色、字体、留白、圆角、动效数量。
3. 把共同点写成 10 行以内的视觉 brief，给 agent，而不是直接喂整站。

放进 Launchpad：W6 落地页 moodboard；产品页不用。

只做灵感；素材不授权，不直接商用。

App Store 截图灵感库，偏移动端与 ASO 包装。

具体怎么用

1. 找 5 个同类金融 App。
2. 看它们首屏怎么讲价值、怎么放证明。
3. 只借信息顺序，不抄视觉与文案。

放进 Launchpad：移动端 onboarding / 分享卡片。

ASO 截图不是产品设计；别把营销图当组件。

200+ 动画营销组件，视觉冲击强、偏展示型。

具体怎么用

1. 只选 1 个效果。
2. 保留动效，重写结构与文案。
3. 做 reduced-motion 与移动端降级。

放进 Launchpad：W6 landing。

多数组件偏营销，注意性能与可访问性。

营销页组件与模板，第一眼漂亮，但不适合高密度产品。

具体怎么用

1. 选 1 个效果。
2. 换成我们的品牌色与字体。
3. 关掉持续动画，只保留进入时一次。

放进 Launchpad：W6 landing。

只做点缀；产品页不用。

社区上传的 UI 元素与微交互，风格非常多。

具体怎么用

1. 搜一个效果（如 loading、toggle、card hover）。
2. 看代码结构，不抄视觉。
3. 用我们的 token 与类名重写。

放进 Launchpad：微交互灵感库。

逐个看 license；不要引入不明来源的代码。

美观、可访问的地图组件：标记、路线、弹窗。

具体怎么用

1. 等有真实地理数据。
2. 选 marker/route 组件。
3. 接真实数据，做空态与加载。

放进 Launchpad：未来项目地图 / 区域数据。

先不做，避免增加复杂度。

Apple 风格玻璃折射，实时折射 DOM 内容。

具体怎么用

1. 只选一个容器。
2. 做静态 fallback。
3. 测对比度、移动端帧率与 reduced-motion。

放进 Launchpad：landing 一个卡片。

性能与可读性优先；不要用在表格和数字上。

117 个 CSS 文字特效：glitch、neon、typewriter、3D。

具体怎么用

1. 只选 1 个。
2. 只用于 h1，不动正文。
3. 做 reduced-motion 与移动端降级。

放进 Launchpad：W6 标题。

容易变成 AI slop，慎用。

几百个渐变按钮，一键复制 CSS。

具体怎么用

1. 如果非要用，只取一个低饱和渐变。
2. 做对比度测试。
3. 不要做主 CTA。

放进 Launchpad：不建议用。

直接跳过；我们的 CTA 用纯色 mint。

轻量 JS 动画引擎，时间轴、SVG、DOM 都能做。

具体怎么用

1. 先写 CSS。
2. 确实需要时间轴再评估。
3. 做体积与性能测试，确认值得。

放进 Launchpad：未来 landing。

先不引；现有 CSS 够用。