提示卡 / Note
小贴士
在合适的地方给用户清晰的下一步，不用让他猜。
01 · TINY DESIGN SYSTEM
把设计做成
可复用的习惯
一套从 Tiny Ray 当前网站提炼出来的视觉语言、组件配方与体验规则。它帮助人和 AI 用同一套判断，持续把事情做得更清楚、更有温度。
今日从这里开始
- 1确定任务先说清页面要帮谁完成什么。
- 2选用配方用组件和 tokens 组织内容。
- 3自检体验按 UX 基线验证实现。
从组件库开始，能让后续迭代更轻松。
LIVE · 组件速览
现在就能复用
轮播 / Carousel
01 / 03
色彩 / Colour
inkorangebluepapercanvaslinegreenSoft
02 · UX BASELINE
给 AI 的执行规则
UX-002
方向、文案与结果必须自然对应
操作提示的方向、页面运动和结果必须符合用户的空间预期。右箭头的下一张对应向前的横向切换；左箭头相反。
UX-003
自动轮播始终让用户重新掌握控制权
自动轮播必须提供清楚的停止/继续控制；鼠标悬停或键盘焦点进入后暂停，不自行恢复。
UX-005
移动端不把阅读任务塞进卡片内部滚动
移动端卡片的文本区可以由统一最小高度承托，但不能依赖内部滚动才能读完核心内容。
UX-007
键盘、焦点与触控同等成立
鼠标悬停只能增强，不是理解或完成核心操作的唯一途径；可互动元素必须有清晰焦点与可点击触控区域。
排版 / Typography
页面标题 clamp(42px, 6vw, 76px)
章节标题 28px
正文示例 16px / 1.75
设计令牌 / Tokens
- 画布
- #fbfaf7
- 纸面
- #fffdf9
- 主文字
- #24231f
- 强调蓝
- #4f8dea
- 暖橙
- #e5a34a
- 卡片圆角
- 24px
04 · COMPONENT RECIPES
组件不是堆砌，是可复用的判断
01
主次按钮
页面需要一个明确的下一步，或一个并列但更轻的操作。
默认做法
- 主按钮墨黑底白字
- 次按钮纸面细边框蓝字
- 触控高度不低于 44px
避免：同一区域出现两个主按钮；仅用图标表达关键操作
02
纸张卡片
内容是独立对象，适合被打开、比较、加入轮播或承载行动。
默认做法
- paper 背景
- 24px 圆角
- 1px line 描边
避免：为了分隔而把每一行都做成卡片；多层嵌套卡片
03
内容轮播
一组同等重要但不需要并列浏览的叙事内容，例如瞬间、作品或照片。
默认做法
- 横向连续切换
- 相邻内容预载
- 悬停与聚焦暂停
避免：上下切换配左右箭头；先清空后加载
05 · FOR AI & TEAMS
让 AI 理解为什么这样设计
把视觉 tokens、组件配方和 UX 基线一起提供给 AI。它就能先处理已验证的通用问题，再表达 Tiny 的风格，而不是每次从截图里猜。
Tiny Design System · v0.1.0
# 给 AI 的 Tiny 设计执行说明 ## 目标 做出有纸张温度、手作痕迹和真实行动感的中文产品页面；它应当清晰、安静、可阅读，而不是把所有元素做成“可爱装饰”。 ## 先后顺序 1. 先读取 `tokens.json` 与 `ux-rules.json`，遵守 `must` 规则。 2. 再根据页面任务选择组件配方；没有任务价值的卡片、标签、图标不要添加。 3. 视觉从内容层级、留白、对齐开始，边框和阴影最后才用。 4. 最后加入少量纸张、贴纸、手绘线条等点缀；小屏幕优先减法。 ## 视觉约束 - 背景使用 `canvas`，可叠一层极轻纸张纹理；内容容器使用 `paper`。 - 主文字是 `ink`，正文使用 `muted`；蓝色用于信息和链接，橙色只用于少量行动或暖点。