1- 一个生成手绘风格的提示词

欢迎体验这个独特的网页设计任务！在这个提示中，您将化身为一名富有创意的前端开发专家和视觉设计师，专注于打造一个美观、现代且带有手绘风格的中文可视化网页。您的目标是通过手绘元素与现代设计的结合，创造一个既引人入胜又易于阅读的用户界面，为用户带来愉悦的浏览体验，同时传递内容的精髓。

# 任务描述

您的核心任务是设计并实现一个中文可视化网页，突出以下关键特点：

将手绘元素融入设计中，例如手绘插图、线条、图标或背景纹理，营造温暖、自然、亲切的感觉，仿佛页面是由艺术家手工绘制而成。

设计一个在视觉上令人惊艳的页面，通过手绘风格与现代排版的结合，立即抓住用户的注意力并激发他们的探索兴趣。

确保文本内容清晰易读，无论用户使用桌面设备还是移动设备，都能享受舒适的阅读体验。

以美观且直观的方式呈现信息，突出关键内容，帮助用户快速理解页面的核心思想。

通过手绘风格和设计元素，激发与内容主题相符的情感，例如轻松愉悦、温暖励志或创意无限的氛围。

# 设计指导

在设计这个手绘风格的网页时，您可以参考以下建议，灵活运用您的专业判断和创造力：

采用手绘与现代简约设计的融合风格。想象这是一个数字化的手账页面，既有手绘的随性与温度，又不失现代网页的结构感和功能性。

在页面中加入手绘风格的插图、边框、分割线或装饰性图标。可以考虑使用数字工具模拟水彩、铅笔或马克笔的效果，增添艺术气息。

设计一个醒目的开场区域，包括大标题、副标题和一段引人入胜的引言，搭配手绘背景图或插图，让用户一进入页面就被吸引。

选择带有手写感或圆润风格的字体（如手写中文字体或 Noto Sans SC等），并结合清晰的无衬线字体，形成视觉层次。使用不同的字号和字重突出重点内容，同时保持整体协调。

选择柔和、自然的色调（如水彩般的浅蓝、淡粉、草绿），搭配一到两个高对比度的强调色，用于按钮或关键信息。避免过于鲜艳或生硬的颜色，保持手绘的温暖质感。

基于网格系统组织内容，但允许手绘元素打破规则，增加趣味性。充分利用留白，让页面既有呼吸感，又能突出手绘设计的细节。

整体设计应轻松自然，带有艺术感和高级感，让用户感受到创意的温度。

通过手绘风格的图表或插图展示关键概念，例如用手绘线条连接的内容关系图、手绘时间线或主题聚类图，确保既美观又有信息价值。

# 技术要求

在实现这个网页时，请遵循以下技术要求，确保功能与设计的完美结合：

使用 HTML5 构建页面结构，搭配 Tailwind CSS 快速实现样式，并通过必要的 JavaScript 添加交互功能。

引入 Font Awesome 图标库，为手绘风格添加精致的点缀，例如小型手绘风图标。

使用适合中文的字体组合，例如 Noto Serif SC 和 Noto Sans SC等，确保排版美观且易读。

实现深色和浅色模式切换功能，默认跟随系统设置，同时提供手动切换按钮，让用户根据喜好调整体验。

确保代码结构清晰，使用语义化标签并添加适当注释，便于理解和维护。

设计响应式布局，保证网页在手机、平板和桌面设备上都能完美展示，手绘元素在不同屏幕尺寸下保持比例和美感。

同时为按钮、图标或手绘元素添加微妙的动画效果，例如悬停时的轻微放大、描边变化或颜色过渡，提升用户互动的乐趣。

# 输出要求

请提交一个完整、可运行的单一 HTML 文件，包含所有必要的 CSS 和 JavaScript 代码。确保文件符合 W3C 标准，无错误或警告，并且能够在现代浏览器中正确显示手绘风格的网页效果。

2- 结语

这是一个展现您设计才华和前端技能的绝佳机会！请充分发挥您的创造力，将手绘风格与现代网页设计相结合，打造一个既实用又令人惊艳的中文可视化网页。期待看到您独特的艺术视角和专业水准，让用户在浏览时感受到设计的温度与美感！