视觉风格expressive

手绘涂鸦风

Hand-Drawn Doodle

手绘线条、涂鸦插画、不规则形状和手写字体。像在笔记本上随手画出的设计，充满创意和趣味性，传达温暖亲切的手工感。

打开交互展示查看实现规则

主色#2c2c2c

次色#fffef5

强调色 1#ff6b6b

强调色 2#4ecdc4

强调色 3#ffd93d

强调色 4#a98d16

AI 实现规则

You are a Hand-Drawn Doodle design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Sharp geometric precision (rounded-none) - use rounded-sm instead
- Gradients of any kind (bg-gradient)
- Precise shadows (shadow-md, shadow-lg) - use hard offset shadows only
- Monospace fonts (font-mono)
- Solid borders (border-solid) - always use border-dashed
- Large border radius (rounded-lg and above)
- Dark backgrounds - always use paper-white

## Must Follow

- Paper-white background: bg-[#fffef5]
- Ink black text: text-[#2c2c2c]
- Dashed borders everywhere: border-2 border-dashed
- Sans-serif fonts only: font-sans
- Subtle rotations on elements for hand-drawn feel (rotate-[Ndeg])
- Marker colors: red #ff6b6b, teal #4ecdc4, yellow #ffd93d
- Offset shadows with marker colors: shadow-[Npx_Npx_0px_color]
- Notebook line backgrounds for sections

## Color Palette

Primary:
- Ink Black: #2c2c2c (text, borders)
- Paper White: #fffef5 (backgrounds)
- Red Marker: #ff6b6b (accents, highlights)
- Teal Marker: #4ecdc4 (shadows, accents)
- Yellow Marker: #ffd93d (highlights, tape)

## Special Elements

- Notebook line backgrounds (repeating-linear-gradient)
- Red margin line decorations
- Wavy underlines (text-decoration-style: wavy)
- Marker highlight effects
- Tape, pushpin, and paperclip decorations on cards
- Subtle element rotations for sketchy feel
- Spiral binding holes on left edge
- Coffee stain ring decorations
- Hand-drawn stars and squiggles via SVG

## Animation & Interaction Rules

- Stop-Motion Jitter: hover 通过微小旋转与位移制造手绘颤动感，避免平滑机械运动。
- Ink Filling: 可增强边框粗细或颜色对比来模拟“补笔”，但仍保持 border-dashed 手绘语义。
- Offset Smudge: 仅使用硬边偏移阴影，hover 时改变偏移量与标记笔颜色，像二次描边。
- Paper Press: active 状态压平阴影并轻微缩放（如 scale-[0.98]），呈现手指按纸反馈。

组件预览与实现

组件变体

font-sans font-semibold tracking-wide rounded-sm border-2 border-dashed transition-all duration-200 ease-in-out bg-[#2c2c2c] text-[#fffef5] border-[#2c2c2c] shadow-[3px_3px_0px_#ff6b6b] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[2px_2px_0px_#ff6b6b] hover:rotate-[-0.5deg] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none

button

按钮

Hand-Drawn Doodle 风格按钮 - 虚线边框标记笔阴影

<button className="
  px-6 py-3
  bg-[#fffef5] text-[#2c2c2c]
  font-sans font-bold tracking-widest uppercase
  rounded-sm
  border-2 border-dashed border-[#2c2c2c]
  shadow-[4px_4px_0px_#ff6b6b]
  hover:bg-[#2c2c2c] hover:text-[#fffef5]
  hover:-translate-y-1 hover:translate-x-[1px]
  hover:rotate-[1deg]
  hover:shadow-[6px_6px_0px_#4ecdc4]
  active:translate-x-[3px] active:translate-y-[3px]
  active:shadow-none active:scale-[0.98] active:rotate-0
  transition-all duration-150 ease-linear
">
  Doodle!
</button>

card

卡片

Hand-Drawn Doodle 风格卡片 - 笔记本纸张虚线边框

<div className="
  group
  p-8
  bg-[#fffef5]
  border-[3px] border-dashed border-[#2c2c2c]
  rounded-sm
  shadow-[5px_5px_0px_#ffd93d]
  hover:-translate-y-1 hover:rotate-[-1deg]
  hover:shadow-[8px_8px_0px_#ff6b6b]
  transition-all duration-150 ease-linear
">
  <h3 className="text-3xl font-sans font-black text-[#2c2c2c] mb-3 transform -skew-x-3 group-hover:skew-x-0 transition-transform duration-150">
    Sketch Note
  </h3>
  <p className="text-[#2c2c2c]/70 font-sans font-semibold leading-relaxed group-hover:text-[#2c2c2c] transition-colors duration-150">
    Scribbled with love, coffee, and a perfectly imperfect process.
  </p>
  <div className="mt-4 h-1 w-1/2 bg-[#4ecdc4] transform -rotate-1 transition-all duration-200 group-hover:w-full group-hover:bg-[#ff6b6b]" />
</div>

input

输入框

Hand-Drawn Doodle 风格输入框 - 虚线边框纸张背景

<input
  type="text"
  placeholder="Scribble here..."
  className="
    w-full px-4 py-3
    bg-[#fffef5]
    border-2 border-dashed border-[#2c2c2c]
    rounded-sm
    text-[#2c2c2c] placeholder-[#2c2c2c]/30
    font-sans
    focus:border-[#ff6b6b]
    focus:shadow-[2px_2px_0px_#ffd93d]
    focus:outline-none
    transition-all duration-200
  "
/>

hero

Hero 区块

Hand-Drawn Doodle 风格 Hero - 笔记本背景涂鸦装饰

<section className="
  min-h-screen
  flex items-center justify-center
  bg-[#fffef5]
  relative overflow-hidden
" style={{
  backgroundImage: 'repeating-linear-gradient(transparent, transparent 31px, rgba(168,200,232,0.35) 31px, rgba(168,200,232,0.35) 32px)'
}}>
  {/* Red margin line */}
  <div className="absolute left-[120px] top-0 bottom-0 w-px bg-[#ff6b6b]/20" />
  <div className="relative z-10 text-center px-6">
    <h1 className="text-6xl md:text-8xl font-sans font-black text-[#2c2c2c] mb-2 rotate-[-1.5deg]">
      Doodle
    </h1>
    <h2 className="text-4xl md:text-6xl font-sans font-bold text-[#ff6b6b] -mt-2 mb-6 rotate-[1deg]">
      & Sketch
    </h2>
    <p className="text-lg text-[#2c2c2c]/50 font-sans mb-8">
      Hand-crafted interfaces with creative charm
    </p>
    <button className="
      px-10 py-4
      bg-[#2c2c2c] text-[#fffef5]
      font-sans font-semibold tracking-wide
      rounded-sm
      border-2 border-dashed border-[#2c2c2c]
      shadow-[4px_4px_0px_#4ecdc4]
      hover:translate-x-[1px] hover:translate-y-[1px]
      hover:shadow-[2px_2px_0px_#4ecdc4]
      hover:rotate-[-0.5deg]
      transition-all duration-200
    ">
      Start Drawing
    </button>
  </div>
</section>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

Hand-Drawn Doodle 风格模拟手工绘制的质感，营造温暖、亲切、创意十足的视觉体验。

核心理念：

- 笔记本纸张：奶白色背景模拟真实笔记本，带有蓝色横线和红色页边线

- 手绘线条：使用虚线边框模拟手绘笔触，避免精确几何

- 不规则形态：微妙的旋转和偏移营造手工感

- 标记笔配色：红、蓝绿、黄三色标记笔点缀

- 装饰元素：胶带、图钉、回形针、咖啡渍等纸张装饰

- 涂鸦点缀：随手画的星星、波浪线、箭头等装饰

设计原则：

- 视觉一致性：所有组件必须遵循统一的视觉语言，从色彩到字体到间距保持谐调

- 层次分明：通过颜色深浅、字号大小、留白空间建立清晰的信息层级

- 交互反馈：每个可交互元素都必须有明确的 hover、active、focus 状态反馈

- 响应式适配：设计必须在移动端、平板、桌面端上保持一致的体验

- 无障碍性：确保色彩对比度符合 WCAG 2.1 AA 标准，所有交互元素可键盘访问

应该这样做

使用虚线边框（border-dashed）模拟手绘线条
使用奶白纸张色 #fffef5 背景
使用墨黑 #2c2c2c 作为主色
添加微妙旋转（rotate）模拟手绘不规则感
使用标记笔配色：红 #ff6b6b、蓝绿 #4ecdc4、黄 #ffd93d
使用无衬线字体，保持随意感
添加笔记本横线背景
使用胶带/图钉/回形针等装饰元素

避免这样做

禁止使用精确的几何形状和直角（rounded-none）
禁止使用渐变效果
禁止使用精确阴影（shadow-md 等）
禁止使用等宽字体
禁止使用实线边框（border-solid）
禁止使用大圆角（rounded-lg 及以上）

全局 CSS

/* Hand-Drawn Doodle Global Styles */

:root {
  --doodle-ink: #2c2c2c;
  --doodle-paper: #fffef5;
  --doodle-red: #ff6b6b;
  --doodle-teal: #4ecdc4;
  --doodle-yellow: #ffd93d;
}

/* Notebook lines background */
.doodle-lines {
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    rgba(168, 200, 232, 0.35) 31px,
    rgba(168, 200, 232, 0.35) 32px
  );
}

/* Red margin line */
.doodle-margin::before {
  content: "";
  position: absolute;
  left: 120px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 107, 107, 0.2);
}

/* Squiggly underline */
.doodle-underline {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--doodle-red);
  text-underline-offset: 4px;
}

/* Marker highlight */
.doodle-highlight {
  background: linear-gradient(
    104deg,
    transparent 0.9%,
    rgba(255, 217, 61, 0.3) 2.4%,
    rgba(255, 217, 61, 0.2) 97.1%,
    transparent 98.2%
  );
  padding: 0 4px;
}

/* Tape decoration */
.doodle-tape {
  position: relative;
}
.doodle-tape::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 60px;
  height: 20px;
  background-color: rgba(255, 217, 61, 0.4);
  border-radius: 1px;
}

/* Sketchy rotation */
.doodle-tilt-left { transform: rotate(-1.5deg); }
.doodle-tilt-right { transform: rotate(1.5deg); }

/* Spiral binding holes */
.doodle-binding-holes::before {
  content: "";
  position: absolute;
  left: 50px;
  top: 0;
  bottom: 0;
  width: 16px;
  background-image: radial-gradient(circle, transparent 5px, transparent 5px),
    repeating-linear-gradient(
      transparent,
      transparent 60px,
      rgba(44, 44, 44, 0.08) 60px,
      rgba(44, 44, 44, 0.08) 76px,
      transparent 76px
    );
}

布局、色板与 Tokens

主色#2c2c2c

次色#fffef5

强调色 1#ff6b6b

强调色 2#4ecdc4

强调色 3#ffd93d

强调色 4#a98d16

{
  "border": {
    "width": "border-2",
    "color": "border-[#2c2c2c]",
    "radius": "rounded-sm",
    "style": "border-dashed"
  },
  "shadow": {
    "sm": "shadow-[2px_2px_0px_#4ecdc4]",
    "md": "shadow-[3px_3px_0px_#4ecdc4]",
    "lg": "shadow-[4px_4px_0px_#4ecdc4]",
    "none": "shadow-none",
    "hover": "hover:shadow-[6px_6px_0px_#4ecdc4]",
    "focus": "focus:shadow-[2px_2px_0px_#ffd93d]",
    "colored": {
      "red": "shadow-[4px_4px_0px_#ff6b6b]",
      "teal": "shadow-[4px_4px_0px_#4ecdc4]",
      "yellow": "shadow-[4px_4px_0px_#ffd93d]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-200 ease-in-out",
    "active": "active:translate-x-[2px] active:translate-y-[2px] active:shadow-none",
    "hoverTranslate": "hover:translate-x-[1px] hover:translate-y-[1px]"
  },
  "typography": {
    "heading": "font-sans font-bold",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-8xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-12 md:py-20 lg:py-28",
    "container": "px-4 md:px-8 lg:px-12",
    "card": "p-5 md:p-8",
    "gap": {
      "sm": "gap-3 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-10"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#fffef5]",
      "secondary": "bg-[#f8f7f0]",
      "accent": [
        "bg-[#ff6b6b]",
        "bg-[#4ecdc4]",
        "bg-[#ffd93d]"
      ]
    },
    "text": {
      "primary": "text-[#2c2c2c]",
      "secondary": "text-[#ff6b6b]",
      "muted": "text-[#2c2c2c]/45"
    },
    "button": {
      "primary": "bg-[#2c2c2c] text-[#fffef5] shadow-[3px_3px_0px_#ff6b6b]",
      "secondary": "bg-[#ff6b6b] text-[#fffef5] shadow-[3px_3px_0px_#4ecdc4]",
      "danger": "bg-[#ff6b6b] text-[#fffef5]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "bg-gradient-to-b",
      "bg-gradient-to-br",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "font-mono",
      "backdrop-blur",
      "backdrop-blur-sm",
      "rounded-none",
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-full",
      "border-solid"
    ],
    "patterns": [
      "^bg-gradient-",
      "^shadow-(?:sm|md|lg|xl|2xl)$",
      "^font-mono$",
      "^backdrop-blur",
      "^rounded-(?:none|lg|xl|2xl|full)$"
    ],
    "reasons": {
      "bg-gradient-to-r": "Hand-Drawn Doodle uses flat marker colors only, no gradients",
      "shadow-md": "Hand-Drawn Doodle uses hard offset shadows (shadow-[Npx_Npx_0px_color]) to mimic marker strokes",
      "font-mono": "Hand-Drawn Doodle uses casual sans-serif fonts, never technical monospace",
      "backdrop-blur": "Hand-Drawn Doodle is opaque notebook paper, no blur or glass effects",
      "rounded-none": "Hand-Drawn Doodle uses rounded-sm for a slightly imprecise hand-drawn feel",
      "rounded-lg": "Hand-Drawn Doodle uses rounded-sm only - larger radii look too polished",
      "border-solid": "Hand-Drawn Doodle uses border-dashed to simulate hand-drawn line strokes"
    }
  },
  "required": {
    "button": [
      "rounded-sm",
      "font-sans font-semibold",
      "border-2 border-dashed",
      "transition-all duration-200 ease-in-out"
    ],
    "card": [
      "rounded-sm",
      "bg-[#fffef5]",
      "border-2 border-dashed border-[#2c2c2c]",
      "shadow-[4px_4px_0px_#4ecdc4]"
    ],
    "input": [
      "rounded-sm",
      "border-2 border-dashed border-[#2c2c2c]",
      "bg-[#fffef5]",
      "font-sans",
      "focus:outline-none"
    ]
  }
}

示例提示词

手绘涂鸦着陆页

笔记本风格的创意着陆页，带涂鸦装饰

Use Hand-Drawn Doodle style to create a landing page:
1. Background: paper-white with notebook lines and red margin
2. Title: bold sans-serif with subtle rotation like handwriting
3. Cards: dashed borders with marker-color shadows, tape/pin decorations
4. Use only marker colors (red, teal, yellow) for accents
5. Add notebook elements: spiral holes, coffee stains, tape strips
6. Overall hand-crafted, sketchy, creative notebook feel

SaaS 着陆页

生成手绘涂鸦风风格的 SaaS 产品着陆页

Create a SaaS landing page using Hand-Drawn Doodle style with hero section, feature grid, testimonials, pricing table, and footer.

作品集展示

生成手绘涂鸦风风格的作品集页面

Create a portfolio showcase page using Hand-Drawn Doodle style with project grid, about section, contact form, and consistent visual language.