手绘草图（移动）Sketch Hand-Drawn (Mobile)
每个角圆度都不同、虚线描边、硬偏移阴影，配马克笔红与圆珠笔蓝。像写在便签上的界面，亲切但精度低。
典型场景教育 · 手账/笔记 · 创意工具
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
每个角圆度都不同、虚线描边、硬偏移阴影，配马克笔红与圆珠笔蓝。像写在便签上的界面，亲切但精度低。
关键词
别名
效果与动效
Wobbly borderRadius (unique per corner: 15/25/20/10), borderWidth 2–3 solid/dashed, hard offset shadow via rear View (4px,4px) #2D2D2D, Kalam Bold headings, PatrickHand Regular body, slight rotation (-1deg/1deg) on cards, absolute SVG scribble overlays (arrows/tape/tacks), jiggle -2deg↔2deg on error, LayoutAnimation spring on layout changes, Haptics on press, paper texture repeating background
设计系统变量
--bg#FDFBF7--text#2D2D2D--accent-red#FF4D4D--accent-blue#2D5DA1--postit#FFF9C4--border-width3px--shadow-offset4px 4px--font-headingKalam Bold--font-bodyPatrick Hand--rotation-card-1deg to 1deg配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Red Marker #FF4D4D, Pencil Black #2D2D2D
辅色 / Secondary
Warm Paper #FDFBF7, Old Paper #E5E0D8, Blue Ballpoint #2D5DA1, Post-it Yellow #FFF9C4
强调色在页面底色上的对比度约 3.2:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Low-fidelity prototyping
- creative brands
- children/picturebook apps
- education tools
- journaling apps
- gamified puzzles
避开 / Do Not Use For
- Enterprise dashboards
- high-density data tables
- fintech precision tools
- medical or legal apps
框架兼容
能力矩阵
实现要点
落地清单
- Warm paper background texture applied,
- Kalam Bold headings,
- Wobbly corner radii on all cards,
- Hard offset shadow View (not blur),
- Cards slightly rotated,
- Button press shifts to cover shadow,
- SVG tape/tack decorations,
- PatrickHand for inputs,
- Jiggle error animation,
- Minimum 48x48 touch targets
CSS / 技术关键词
backgroundColor: '#FDFBF7', cardBg: '#FFFFFF', textPrimary: '#2D2D2D', accentRed: '#FF4D4D', accentBlue: '#2D5DA1', accentYellow: '#FFF9C4', border: '#2D2D2D', shadowView: 'offset 4px 4px #2D2D2D', wobblyRadius: [15,25,20,10], fontHeading: 'Kalam-Bold', fontBody: 'PatrickHand-Regular'
AI 提示词
Design a Sketch Hand-Drawn (Mobile) mobile interface using sketch, hand-drawn, handwriting, wobbly, imperfect, paper, kalam, organic. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.