创作资源库 · 设计灵感与工具

把作品做得
好看、好用的一批好站

CADAL 资源库解决「用什么内容做」,这一页解决「怎么把它想清楚、做好看好用」——从老师的产品创新方法论,到网站设计灵感、真实产品 UI 参考、设计语言拆解、配色与字体工具。动手前先来逛一圈,给自己的作品定个调子。每个人都可以继续往里加。

15 个精选站点 12 个现实参照 7 类资源 持续补充中
★

延伸学习 · 课程方法库

置顶精选 · 课程自有

先把「想清楚」补上。这一组是本课自有的方法资源——老师邱懿武的 AI 产品创新方法论体系(方法母体),加上两张「方法课」可视化,以及我们自建的数字资产中心。设计与工具让作品好看,这一组让作品想得对、做得深、兜得住底。

课程方法论 · 作者 邱懿武

AI 产品创新 · 方法论体系

把感性的产品直觉,翻译成可对齐、可验证、可迭代的系统逻辑。含「总论 / 本质论 / 方法论 / 设计系统」四层,以及可直接复用的工具:产品定义画布、AI 机会地图(一句话生成机会画布的在线工具)、动态价值评估、设计系统 Method DS。我们站内的产品定义课,正脱胎于这里的「产品定义画布」——想往深里走,从这套体系入手。

qiuyiwu.com/ai-product-innovation

打开方法论体系 →
方法课 · 链路图

一个数字产品藏着多少专业

用「开一家餐厅」打比方,把做产品背后的三大阶段、十三个专业环节逐个点开讲透(一句话速懂 + 再细一点 + 举例 + 配图)。Vibe Coding 让「做」变容易,但要避免「看着能用、其实站不住」,得看懂水面下每个环节——和站内创作心法的「做深」是一条思路。

teaching.alimq.com/chain.html

打开链路图 →
方法课 · 知识图谱

做产品的知识图谱

把「做产品」水面下的全图做成可交互的知识图谱——领域节点、聚类、连线一目了然,点开看每块知识与它们之间的关系。链路图的可视化姊妹篇,帮你建立做产品的全局地图。

teaching.alimq.com/graph.html

打开知识图谱 →
数字资产中心 · 需登录

数字资产中心 DAM

我们自建的数字资产管理中心:收藏、集合、智能文件夹,跨设备保留、各人隔离。把创作过程里的素材、参考与产出集中管起来。首次输入用户名即注册。

dam.alimq.com

打开资产中心 →
01

网站设计灵感 · 看好网站长什么样

先建立审美

精选全球优秀网站的画廊。不知道作品该长什么样时,先来这里滑一遍,记下三五个让你眼前一亮的,作为整体感觉的参照。

设计画廊

Land-book

精选全球优秀网站 / 落地页的设计画廊,可按风格、行业、类型筛选。想知道「一个好网站长什么样」,从这里开始最快。

land-book.com

打开站点 →
设计奖项

Awwwards

全球网页设计奖项站,收录最前沿、最炫技的网站。适合看交互动效与视觉天花板——欣赏即可,别照搬它的复杂度。

awwwards.com

打开站点 →
设计画廊

Godly

精选「高水准」网站灵感,偏当代、克制、有高级感,整体质量很稳,适合找「不花哨但好看」的方向。

godly.website

打开站点 →
设计画廊

SiteInspire

老牌网页设计精选库,分类清晰、收录严谨,适合按类型(作品集、电商、活动页…)快速找对口参考。

siteinspire.com

打开站点 →
02

真实产品 UI 参考 · 看交互怎么做

抄对的结构

要做某个功能(登录、搜索、支付、上传…)时,先看成熟产品是怎么做的。学它「对的结构」,比从零空想省一大半时间。

UI 截图库

Mobbin

海量真实 App / 网页的界面截图库,可按用户流程和组件检索。想做某个功能,先看一线产品怎么排、怎么走。

mobbin.com

打开站点 →
UI 参考

Refero

真实产品的 UI / 落地页参考库,可看整页布局也能看细节。适合「抄对的结构」,把好框架套到自己的内容上。

refero.design

打开站点 →
03

设计语言拆解 · 把好设计「拆」给你看

可喂给 AI

看灵感容易,落地难。这一类把知名产品的设计语言拆成可直接参考、甚至可直接「喂给 AI」的规范——配色、字体、圆角、组件、do/don’t 一应俱全。

设计语言

OpenDesign

把知名产品的设计语言拆解成结构化规范:色板、字体、圆角、组件、注意事项,还能生成一段「喂给 AI 的设计提示词」。本站的设计语言就出自这里。

opendesign.cc

打开站点 →
04

配色与字体 · 快速定下视觉基调

新手友好

作品「土不土」,一大半在配色和字体。这几个工具能让没学过设计的同学,几分钟内定下一套不出错的颜色和字体。

配色工具

Coolors

最快的配色方案生成器。按空格不断换色,锁定喜欢的颜色再生成整套搭配,导出即用。

coolors.co

打开站点 →
配色预览

Realtime Colors

把一套配色实时套到一个真实网页上预览,避免「单看色块好看、放到页面上就翻车」。定色前先在这里试。

realtimecolors.com

打开站点 →
字体库

Google Fonts

免费可商用的字体库,含大量中文字体(思源黑体 Noto Sans SC 等)。本站用的就是它,复制一行代码即可接入。

fonts.google.com

打开站点 →
配色示范

Happy Hues

把每套配色放进真实页面场景里示范,并标好「哪个颜色用在哪里」。对分不清主色辅色的新手特别友好。

happyhues.co

打开站点 →
05

现实参照 · 已落地的同类实践

看哪条路走通了

这些不是本营作品,而是国内外已经落地的同类实践——古籍活化、数字人、文物 3D、壁画修复、沉浸大展。动手前看一圈,判断「哪条路有人走通了、做到什么程度」,给自己的作品找个坐标。

现实参照 · 看得懂 · 连成网

资治通鉴 · 数字阅读与历史探索

294 卷《资治通鉴》文白对照原文,在时间、人物、势力与地图之间理解司马光笔下的治乱兴衰——把一部大部头古籍做成可读、可探索产品的完整范例,特别值得对着学。

tongjian.yongle.school

查看 →
现实参照 · 连成网 · 数据可视化

CBDB 仕途流场

基于 CBDB(中国历代人物传记数据库),在中国地图、动态流场与桑基图中,呈现历代群体的入仕来源、首任任官地与父祖三代任官关系的空间路径——把史料里的关系做成可探索的人文数据可视化,正对应我们赛道里的「连成网 / 数据可视化」。

dynasty-migration-vis.buyixiao.xyz

查看 →
现实参照 · 看得懂

中华古籍智慧化服务平台

整合上万种古籍,融合大模型与知识图谱,向公众开放检索、阅读与智能问答。

中国国家图书馆

查看 →
现实参照 · 能问答 · 校得准

云四库古籍智能问答

古籍垂域大模型,问答时对所有引用材料明确出注,直面「模型幻觉」。

浙江大学 · 徐永明团队

查看 →
现实参照 · 能问答

国博数智人「艾雯雯」

国博首位 AI 数字员工,展厅大屏当讲解员,还能 AR「附身」历史人物讲故事。

中国国家博物馆

查看 →
现实参照 · 听得见

杜甫草堂数字人杜甫

高度还原杜甫形象的数字人,能答诗歌创作、生平与草堂历史,并延伸引导深思。

成都杜甫草堂博物馆

查看 →
现实参照 · 修复重生

敦煌 / 永乐宫 AI 壁画修复

AI 对褪色壁画数字补色与图像重建,在数字展中呈现「修复前后」对比。

敦煌研究院 · AMD × 永乐宫

查看 →
现实参照 · 长出实体

三星堆裸眼 3D「破屏」

裸眼 3D 大屏上青铜神树破屏而出、金面罩人头像浮现,文物「走出」展柜。

万物有灵 · 三星堆—金沙

查看 →
现实参照 · 动起来

马王堆汉代文化沉浸数字大展

「生命艺术——马王堆汉代文化沉浸式数字大展」,把汉代生活做成可走入的大展。

湖南博物院 等

查看 →
现实参照 · 长出实体

应县木塔「数字孪生」

用多模态 AI 与 3D 视觉为应县木塔建数字孪生,可拆解结构、监测与展示。

多模态 AI + 3D 视觉方案

查看 →
现实参照 · 连成网

Gen-Diaolou 开平碉楼交互系统

面向开平碉楼的 AI 辅助交互系统,支持其历时演变的理解与保护。

学术项目 · arXiv 2026

查看 →
现实参照 · 再生长

兰奔锦缎元宇宙保护

把生成式 AI 与元宇宙结合,用于泰国兰奔(Lamphun)织锦这一非遗的保护与再生。

Humanities & Social Sciences Comms

查看 →
06

值得关注的创作者

卡壳时翻一翻

这几位创作者长期分享 Vibe Coding / AI 编程实战,没思路时去翻一翻,常有惊喜。

Vibe Coding 创作者

创作者 A

Vibe Coding 实战分享 · 小红书

去主页 →
Vibe Coding 创作者

创作者 B

AI 编程 / 产品原型 · 小红书

去主页 →
Vibe Coding 创作者

创作者 C

创意 Demo / 设计工程 · 小红书

去主页 →
07

同学推荐 · Vibe Coding 项目

已并入项目总库

同学推荐的好项目,现在和官方精选的种子项目汇总在同一个总库里,可按来源、按标签一起筛。看到好项目?登录 提交中心 贴个链接,即时并进总库。

前往 Vibe Coding 项目库 →

08

怎么把这些灵感用进作品

第一步 · 定调

先逛,定一个整体感觉

动手前花 20 分钟逛灵感站,先定下一个你喜欢的「整体感觉」(克制 / 活泼 / 复古…),别边做边换方向。

第二步 · 借形

抄结构,不抄像素

参考别人「怎么排版、怎么分区」,而不是 1:1 复制某一页。把好结构借过来,装上你自己的内容。

第三步 · 喂参考

把参考喂给 AI

把灵感截图或 OpenDesign 的设计语言,直接丢给 Vibe Coding 工具说「照这个感觉做」,比空口描述准得多。方法见创作心法。

这是一份起步清单,会持续补充。逛到更好用的设计 / 灵感 / 工具站,发到班级群,我们陆续加进来。