可以导入
@tinyray/tiny-ui
按钮、纸张卡片、章节标题、写作文件夹、瞬间轮播、作品卡、可撕贴纸、Tiny 指针拖尾、社交叠层与点阵字标。
01 · SOURCE-DRIVEN DESIGN SYSTEM
不是参考风格。
是从网站里
长出来的组件。
这套系统以 aitiny.top 的现有实现为唯一视觉来源：把已经被验证的卡片、文件夹、轮播、贴纸和交互，整理成 AI 与后续项目可以直接使用的代码。
如何真正复用
- 1导入组件不是复制截图，而是使用 React 组件。
- 2传入内容图片、文案与链接由项目自己决定。
- 3继承规则保留 Tiny 已验证的体验基线。
所有演示都由页面下方的真实组件代码渲染。
REAL · 组件工作台
同一套代码，直接运行
可验证的行为
下方工作台实时运行
色彩 / Colour
inkorangebluepapercanvaslinegreenSoft
02 · SOURCE MAP
每个组件都能回到它在网站里的来源
PortfolioHome结构与节奏
浮动导航、章节标题、按钮、作品卡、瞬间轮播。
WritingFolder内容容器
文件夹预览、弹层书架、文章阅读入口。
SocialStack / FooterDotWordmark人味与收尾
联系方式叠层、局部物理反馈与点阵字标。
Sticker Forge可撕的点缀
贴纸参数、渐进加载与静态兜底均可复用；不让外部渲染成为唯一内容。
03 · 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
05 · LIVE COMPONENT WORKBENCH
在这里点击，验证后再带走
LIVE COMPONENTS · 直接运行
这不是参考图，是当前网站模式的可复用版本。
纸张卡片
承载可阅读的内容，而不是把所有信息框成同一种 UI。
拖拽或撕开试一下；第三方效果未加载时，静态贴纸仍会完整显示。
01 / 02
data-cursor-label 可切换文字。06 · FOR AI & TEAMS
让 AI 先用组件，再表达风格
把 tokens、组件代码、来源映射和 UX 基线一起给 AI。它不再从截图猜样式，而是在已验证的结构中完成新的内容与页面。
Tiny Design System · v0.1.0
# 给 AI 的 Tiny 设计执行说明 ## 目标 做出有纸张温度、手作痕迹和真实行动感的中文产品页面；它应当清晰、安静、可阅读，而不是把所有元素做成“可爱装饰”。 ## 先后顺序 1. 先读取 `tokens.json` 与 `ux-rules.json`，遵守 `must` 规则。 2. 再根据页面任务选择组件配方；没有任务价值的卡片、标签、图标不要添加。 3. 视觉从内容层级、留白、对齐开始，边框和阴影最后才用。 4. 最后加入少量纸张、贴纸、手绘线条等点缀；小屏幕优先减法。 ## 视觉约束 - 背景使用 `canvas`，可叠一层极轻纸张纹理；内容容器使用 `paper`。 - 主文字是 `ink`，正文使用 `muted`；蓝色用于信息和链接，橙色只用于少量行动或暖点。