01 · 视觉资产
405
艺术参考图库
数百张精挑的摄影、绘画、电影截图。每张图带 11 维视觉签名（光、构图、媒介、年代、文化、情绪……），按需被拼成「这本书该有的画面」。
Click Reader · Method
品味即方法
我们的图不是 prompt 出来的，是一群艺术家「教」出来的。
三种资产，让品味可复用
Click Reader 不靠一句 prompt 出图。它积累了三种可被流水线反复调用的资产——视觉、知识、机制。
02 · 知识资产
691
摄影 / 绘画 RAG 知识库
把视觉语言拆成可被 LLM 检索的词条：用光的方向、构图的节奏、镜头语言、色彩心理学。Agent 写 prompt 时拿来对齐意图。
03 · 机制资产
13
Workflow + Agent 设计
7 步流水线 + 5 步 Agent 决策。资产不是堆出来的——是被一套机制调度起来，每一步可记录、可回放、可调优的。
持续更新，请给我一些建议。
艺术参考图库
墙式排列，密度优先。每一张图都是一次审美主张：在 Click Reader 把书翻译成画面之前，这些图先回答了「美是什么」。
莫奈风格插画
Waterloo Bridge, London, at Sunset - Claude Monet
温斯洛·霍默风格插画
Red Shirt, Homosassa, Florida - Winslow Homer
复古未来主义
复古未来主义
氛围感摄影
Ambient Photography 氛围感摄影
莫奈风格插画
Rouen Cathedral, West Façade, Sunlight - Claude Monet
温斯洛·霍默风格插画
Sketch for "Hound and Hunter" - Winslow Homer
复古未来主义
复古未来主义
氛围感摄影
Ambient Photography 氛围感摄影
_12.jpg)
莫奈风格插画
Bazille and Camille (Study for "Déjeuner sur l'Herbe") - Claude Monet
温斯洛·霍默风格插画
Hauling in the Nets - Winslow Homer
复古未来主义
复古未来主义
氛围感摄影
Ambient Photography 氛围感摄影
莫奈风格插画
Rouen Cathedral, West Façade - Claude Monet
温斯洛·霍默风格插画
The Rise - Winslow Homer
复古未来主义
复古未来主义
氛围感摄影
Ambient Photography 氛围感摄影
莫奈风格插画
Waterloo Bridge, London, at Dusk - Claude Monet
温斯洛·霍默风格插画
Native hut at Nassau - Winslow Homer
复古未来主义
复古未来主义
_15.jpg)
莫奈风格插画
The Artist's Garden in Argenteuil (A Corner of the Garden with Dahlias) - Claude Monet
温斯洛·霍默风格插画
View of Santiago de Cuba - Winslow Homer
复古未来主义
复古未来主义
_26.jpg)
德拉克洛瓦风格插画
The Ghost on the Terrace (Act I, Scene V) - Eugène Delacroix
达芬奇风格插画
Grotesque Head of an Old Woman - Leonardo da Vinci
康定斯基风格插画
Index - Wassily Kandinsky
_8.jpg)
波提切利风格插画
Page from the Collection of Niccolò Gaddi (So-Called "Vasari Page") - Sandro Botticelli
历史写实摄影风
历史写实摄影风
_24.jpg)
毕沙罗风格插画
Herding the Cows at Dusk (Vachère le soir) - Camille Pissarro
卡萨特风格插画
Mother's Kiss - Mary Cassatt
新艺术运动风格
自定义生图和批量
蒙克风格插画
The Kiss - Edvard Munch
卡拉瓦乔巴洛克风格
自定义生图
霍珀风格插画
Ground Swell - Edward Hopper
钢笔淡彩风
钢笔淡彩风
超真实照片风
超真实照片风
鲁本斯风格插画
Saint Catherine in the Clouds - Peter Paul Rubens
夏加尔风格插画
The Cat Changed into a Woman - Marc Chagall
![A Deathbed Scene [recto] - Caravaggio](https://nunsbijtntreynoyeilp.supabase.co/storage/v1/object/public/ref_img/nga/Caravaggio/Caravaggio_A_Deathbed_Scene__recto__99.jpg)
卡拉瓦乔风格插画
A Deathbed Scene [recto] - Caravaggio
奥斯曼细密画风格
自定义生图和批量
柯罗风格插画
Souvenir: Roman Landscape with the Colosseum - Jean-Baptiste-Camille Corot
马蒂斯风格插画
Dix Danseuses IV - Henri Matisse
俄罗斯现实主义
Russian Realist俄罗斯现实主义
莫迪利亚尼风格插画
Frank Burty Haviland - Amedeo Modigliani
埃尔·格列柯风格插画
Saint Ildefonso - El Greco
修拉风格插画
The Watering Can - Garden at Le Raincy - Georges Seurat
五六十年代插画风
五六十年代插画风
安格尔风格插画
Auguste-Jean-Marie Guénepin - Jean-Auguste-Dominique Ingres
梵高风格插画
Girl in White - Vincent van Gogh
鼠标移到图片上可看到该参考的视觉签名（光、构图、媒介……）。当前过滤分组依据 style_configs 表的 display_name。
摄影 / 绘画 RAG 知识库
我们把视觉语言拆成可被 LLM 检索的词条。Agent 写 prompt 时不靠通用知识，而是从这里取词——所以画面的「为什么是这样」可被解释。
用光
'Photographing' your work
<!-- IMG_META: page=54, caption=cref='#/texts/722' --> > **AI 视觉分析**: 雕塑侧脸特写，冷蓝光打亮轮廓，暗背景强化立体感。风格写实而富有戏剧性，色彩对比强…
Crafty arts paper & textiles
<!-- IMG_META: page=52 --> > **AI 视觉分析**: 该图像为一件抽象雕塑，主体呈球形，以黑色为主调，表面嵌有银色反光碎片，形成破碎感。风格前卫、工业感强，构图居中对称，色彩对比强烈，突显材…
Crafty arts ceramics & glass
<!-- IMG_META: page=53 --> > **AI 视觉分析**: 雕塑人像侧脸，面部有金色裂痕，金属质感，暗调背景。风格具象而富有象征性，色彩以灰金为主，构图紧凑，突出裂痕与静谧表情，传递修复或伤痕美学…
Unexpected Applications
> **AI 视觉分析**: 玻璃幕墙透射彩虹色光，营造梦幻光影效果。热带植物与石景环绕水池，现代建筑与自然融合。色彩饱和绚丽，构图对称而富有层次，反射与透射交织，呈现超现实艺术风格。 ](https://midlibr…
Lighting prompts, artificial indoor
Studio lighting , professional lighting. studio portrait, well-lit, etc (source) Defined 'real' light source (…
Basic Prompting – The Essentials › Color & Lighting
We have full control over both color and lighting in our images. This can include the **color** of particular…
构图
Camera angles proximity
<!-- IMG_META: page=19, caption=cref='#/texts/208' --> > **AI 视觉分析**: 一位老年男性专注下国际象棋，特写构图突出其沉思神情。浅蓝衬衫配暖棕棋子，背景素净…
Modern art movements II
<!-- IMG_META: page=45 --> > **AI 视觉分析**: 画面描绘一只戴墨镜的白猫悠闲坐在木椅上，旁有奇异机械装置。风格超现实，色彩沉郁偏暖，构图居中对称，营造荒诞静谧氛围，具象征意味。 Fut…
Camera angles position
Tilted frame , dutch angle, skewed shot <!-- IMG_META: page=20, caption=cref='#/texts/224' --> > **AI 视觉分析**:…
Camera settings + lenses
<!-- IMG_META: page=21 --> > **AI 视觉分析**: 一只企鹅跃出水面，姿态动感十足。画面以黑白为主调，点缀橙色喙与脚蹼，水花四溅营造张力。构图聚焦主体，背景虚化，风格写实而富有冲击力，凸显…
Edits uncropping, context jumping
We can also put our source image in a different context: in a frame on a wall, as a reflection in someone's ey…
Places and spaces
Public realm , streets, squares, plazas, cityscapes <!-- IMG_META: page=51, caption=cref='#/texts/681' --> > *…
镜头语言
Camera settings + lenses
<!-- IMG_META: page=21 --> > **AI 视觉分析**: 卡通风格的灰色小生物立于绿叶与暖光中，大眼睛圆润可爱，表情惊讶。背景虚化暖黄光斑，前景鲜绿植物衬托主体，色彩柔和温馨，构图居中聚焦，营造…
Camera settings + lenses
Fish-eye lens: distorts the scene, vv. wide angle, the centre 'bulges' Motion blur (Source) <!-- IMG_META: pag…
Camera settings + lenses
<!-- IMG_META: page=21 --> > **AI 视觉分析**: 一只企鹅跃出水面，姿态动感十足。画面以黑白为主调，点缀橙色喙与脚蹼，水花四溅营造张力。构图聚焦主体，背景虚化，风格写实而富有冲击力，凸显…
Camera angles position
Tilted frame , dutch angle, skewed shot <!-- IMG_META: page=20, caption=cref='#/texts/224' --> > **AI 视觉分析**:…
Camera angles proximity
Film still, extreme wide shot of an elephant alone on the savannah, extreme long shot <!-- IMG_META: page=19 -…
Camera angles proximity
DALL·E interprets these pretty loosely, and often provides candidate from the 'neighbour' framing, e.g: a clos…
色彩
Emotional prompt words
<!-- IMG_META: page=14 --> > **AI 视觉分析**: 油画风格肖像，描绘一男孩身着鲜红外套，侧坐椅上低头凝思。色彩以暖红为主调，背景柔和朦胧，笔触粗犷奔放，构图紧凑聚焦人物神态，传递静谧沉思…
Blending Styles
](https://midlibrary.io/focus/liu-ye) Liu Ye's collaborative painting with Takashi Murakami --v 6 Liu Ye maste…
Edvard Munch › Pro Tips
Use color choices that match the desired emotion: red and yellow for passion, blues and greens for melancholy.…
Looks, vibes, -punks, -waves
<!-- IMG_META: page=16 --> > **AI 视觉分析**: 画面展现一座被苔藓覆盖的奇幻木屋，隐于浓雾森林中。风格奇幻写实，色调以冷绿灰为主，营造神秘幽静氛围。构图以倾斜树干为前景引导视线，低角度…
Liu Ye was born in 1964 in Beijing during the Cult
o.%202%20%281998%29.jpg) > **AI 视觉分析**: 超现实主义画作：婴儿骑红鱼，背生白翼，浮于深海；背景蓝绿渐变天空中飞满黄色小飞机。色彩浓烈对比，构图奇幻，融合童真与机械元素，营造梦幻而矛盾…
Illustration styles, analog media, colour
> **AI 视觉分析**: 画面为一位妆容夸张的女性肖像，风格暗黑哥特，色彩以灰白冷调为主，背景深邃。她红发盘起，眼妆浓重，皮肤苍白如尸，颈项修长，肩部露白纱。构图居中特写，突出其诡异而高贵的气质，充满戏剧张力。 Ac…
亲手试一次
或点一个试试：
7 步流水线
从一份 EPUB 到读者点击屏幕，整套流程被拆为 7 个可观测的步骤。每一步都有自己的服务、自己的输入输出、自己的失败重试策略。
- 01
解析 EPUB
上传到 Supabase Storage，cheerio + jsdom 拆出章节结构。
click-engine · book-ingest · cheerio + jsdom
- 02
句子评分
Excerption Agent 用 LLM 给段落打分，识别值得配图的「热点」。
click-engine · excerpt · DeepSeek / Qwen
- 03
BookSignature
Signature Generator 综合 Qwen-VL 与 LLM 输出 11 维视觉签名。
click-engine · signature · Qwen-VL + Qwen
- 04
调度生图
Image Generation Agent 按签名匹配风格，分发任务。
click-engine · visual-director · multi-tier
- 05
百炼出图
调阿里云百炼 wan2.7 / qwen-image 系列，参考图驱动生成。
aliyun bailian · wan2.7 / qwen-image
- 06
锚点匹配
Hotspot Highlighter 用模糊匹配把图绑回章节 HTML 的具体位置。
click-engine · hotspot-render · fuzzy match
- 07
渲染交付
Interactive Reader 渲染成可点击 hotspot 的章节页面。
interactive-reader · next.js 15
5 步 Agent 决策
AI Studio 的对话流。每一步都有自己的 API 端点，输出可被打开检阅。
- 01
Analyze
理解用户原文与意图，定位主体与场景。
/api/agent/analyze - 02
Corpus Search
在参考图库 + RAG 词条里检索匹配项。
/api/agent/corpus-search - 03
Select Style
结合 BookSignature 选定本次输出的风格走向。
/api/agent/select-style - 04
Enhance Prompt
用 RAG 词条补足 prompt 的视觉语言。
/api/enhance-prompt - 05
Generate
调百炼出图，参考图驱动一致性。
/api/agent/generate
一次完整的 Agent 决策日志
下面是某一次生图任务被打开后的内部记录，展示每步的输入输出。
analyze
input : "她沿着河岸走，雪还在下"
output : subject="a woman walking", scene="river bank, snow", mood="melancholy, quiet"
corpus_search
hits : "侧面光 / 逆光剪影", "冷调单色", "中长焦压缩"
refs : 3 张匹配参考图（来自 art_references 表）
select_style
signature : era=1900s, palette=cold, abstraction=realistic, ...
matched : style_id=42 ("冬日故事")
enhance_prompt
prompt : "...low color temperature, side-light silhouette, mid-focal length..."
generate
model : qwen-image-edit-plus
refs : 2 张参考图
output : 1 张 1024×1280 图YOUR TURN