Slides Storyboard

代码是一种讲故事的媒介

</>

Code is not only production machinery. It can be a canvas, a stage, and a camera.

当 HTML 成为画布，表达就不再被工具的默认样式限制。

Code as medium

A personal story told through software interfaces.

01/10
Before / After

我从来没有把自己当成一个 coder

2023

《为什么我不学写代码》

Blog screenshot: why I am not learning to code
2026

但我已经做了 10+ 个项目，现在在 GitHub 上有：

30k+ stars
Zara GitHub profile screenshot
Zara GitHub contributions screenshot
02/10
Frontend Slides

HTML 是画布

GitHub 上

21k stars

代码是媒介，HTML 是画布。它可以把结构、节奏、交互和视觉放进同一个文件。

03/10
Method

如何做出好看的 HTML slides？

不要只给 HTML 文件

HTML 是结果，不是审美系统本身。真正可复用的是设计规则。

Use this
design.md

模板应该是 design.md，而不是最终 HTML 文件。

github.com/zarazhangrui/frontend-slides/.../raw-grid/design.md

04/10
Taste System

如何避免设计里的 AI 味？

  • 使用 Claude Code
  • 给它有明确审美倾向的参考图
  • 把设计规范沉淀成 design.md
  • 明确禁止 AI 味设计：紫色渐变、斜体、Instrumental Serif 等
  • 在 HTML 里加入 SVG，例如 zaraintokyo.com
Opinionated visual references
Example of AI-looking purple gradient
Example of overused serif treatment
05/10
Interface Agency

你可以修改软件界面，让它服务于你自己的目标

01

把摩擦变成反馈

不是等待产品经理理解你，而是直接改变界面里的激励。

02

把内容变成材料

长视频、书签、tabs 都可以被重新包装成更适合你消费的形态。

03

把软件变成叙事

项目不只是功能列表，也是你如何看待世界的证据。

06/10
Project 01

Tab Out

让关浏览器 tabs 变得上瘾。

保留声音

这个 demo 不是静态截图。声音和动作一起构成了反馈回路。

07/10
Project 02

YouTube Digest

让 YouTube 长视频变成学习材料。

重点不是总结视频，而是把分散注意力的平台变成可复习、可引用、可沉淀的知识入口。

YouTube Digest demo screenshot
08/10
Personal Infrastructure

你可以创建自己的“个人广告系统”

不是让算法决定你看什么，而是让自己的目标反复出现在眼前。

Resurface what mattered.

Turn saved links into prompts.

Make attention programmable.

09/10
Project 03

X Bookmark Resurfacer

让你囤着的 X 书签真的被消费

收藏本来是一种承诺，但大多数承诺会沉到底部。这个项目把“以后再看”重新送回当下。

Code as storytelling: 每个小工具都在说明，你希望互联网怎样对待你的注意力。

X Bookmark Resurfacer demo screenshot
10/10