手绘涂鸦
Hand-drawn UI
别名:手绘风涂鸦风格手绘描边歪歪扭扭的线纸感手写界面hand-drawn UIdoodle UIsketchy UI
这是什么
用抖动线条、歪斜描边、纸张纹理和马克笔高亮表示「人手画的」的界面视觉语言。 圆故意画不圆，边框带手感抖动，图标像随手勾的。以人的温度对抗机器级完美。
开发规格
字体
手写感无衬线或圆体，标题略歪
色彩
纸白 #FAF6EE × 墨色 #2B2B2B × 高亮黄 #FFE566
边框
2px 抖动描边，非对称圆角
阴影
极浅纸质投影，几乎贴地
间距
随手贴的错位与轻微倾斜
动效
150–250ms 的轻微抖动式位移，带一点回弹，尊重 prefers-reduced-motion
状态反馈
hover 歪斜并加深抖动描边；focus 用 2px 手绘感可见外框；active 压平抖动；disabled 去色保留描边；error 用红笔涂改感
风格演示
先看整页效果，再试交互场景整页预览
画歪一点
没关系
人手的温度，比完美的像素更可信。
随手记一笔PERFECT CIRCLES ARE A LIE.
抖动描边
圆画不圆
纸张纹理
横线本底
马克笔高亮
划重点
交互场景
正在加载演示…
✓ 适用场景
- 独立创作者、手作品牌、教育类产品，需要亲和与在场感
- 空状态、引导气泡、彩蛋等轻量场景，涂鸦当调味
- 想打破 AI 生成界面的过度光滑与同质
✕ 不适用场景
- 金融、法务、医疗等需要精确与权威的界面
- 高密度数据表格与仪表盘，抖动线条干扰数字对齐
- 长文阅读区，纸纹与高亮叠多了伤阅读
常见形式
马克笔草图
Marker sketch
粗头马克笔线，高亮笔刷色块压在字下
笔记本涂鸦
Notebook doodle
横线纸底 + 圆珠笔细线 + 边角小图标
贴纸乱贴
Sticker chaos
手绘贴纸元素随机倾斜叠放，像活页本封面
实现要点
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255pxborder: 2px solid #2B2B2Bbackground: linear-gradient() #FFE566 高亮transform: rotate(-1deg)box-shadow: 2px 2px 0 rgba(0,0,0,0.08)抖动边框用非对称 border-radius 四角不同值即可，不必上 SVG filter；要更抖可用 SVG feTurbulence 位移， 但要包进 @media (prefers-reduced-motion: no-preference) 或默认静止。马克笔高亮是一条半透明黄色 background 线性渐变压在文字下 60% 高度。纸纹用低透明度噪点或 repeating-linear-gradient 横线，透明度低于 0.12。 每页倾斜元素 2～4 个即可，多了像没做完。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中实现 Hand-drawn UI 手绘涂鸦视觉风格。 先检查现有组件与纹理资产，手绘效果限制在展示层，不改交互命中区域。 要求： - 非对称圆角抖动描边，2～4 个轻微倾斜元素 - 纸纹底（横线或噪点，透明度 < 0.12）与马克笔高亮 - 图标用手绘路径或粗描边简笔，装饰 aria-hidden - 按钮命中区域保持规则矩形，只让视觉描边抖动 - 深色模式牛皮纸深棕底；动效尊重 prefers-reduced-motion - 文字对比度达标，不新增依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
以自然形态、温暖材质和低饱和大地色建立亲近感的视觉语言。页面通过不规则曲线、圆润容器和宽松留白形成舒展节奏，文字与按钮仍保持明确边界。适合生活方式与可持续主题；自然装饰应衬托内容，而不能牺牲可读性、信息层级或操作效率。
风格相似概念用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。
风格相似概念以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格替代方案当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式搭配使用用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件