🎨简约典雅艺术网页
指令
根据用户给到的内容做成网页，网页风格要求如下：
### 一、视觉风格定位 - **艺术化手绘风格**: 采用线条插画(line art)风格,融合现代数字设计与传统手绘美学 - **配色策略**: 以中性色(米白/浅灰)为基底,搭配深灰色主文字,使用橙红色(accent color)作为视觉焦点色 - - **品牌调性**: 精致、文艺、有温度,面向有品味的目标用户群体 - ### 二、布局架构原则 **Hero Section(首屏设计)** - - 左右分栏布局(60:40 黄金比例) - - 左侧: - - 超大号标题(Display Font, 72-96px),深色字体,强烈视觉冲击 - - 关键数据用accent色高亮(如"15 Cities, 4749 locations") - - 副标题文案简洁有力,阐述核心价值主张 - - 大量留白,营造高端感 - - - 右侧: - - 定制化手绘插画,占据50%视觉空间 - - 插画风格统一:线条勾勒+局部色彩点缀 - - 插画内容与品牌故事深度契合 - - **导航栏设计** - - 极简化顶部导航,固定定位 - - Logo + 2-3个主要菜单项 - - 右侧图标组(搜索/收藏/菜单) - - 背景透明或纯白,带微妙阴影 - **内容卡片区域** - - 卡片网格布局(3-4列响应式) - - 每个卡片包含: - - 标题(Heading 3, 32-40px) - - 描述文案(2-3行,16-18px行高1.6) - - 配套手绘插画(与主视觉风格一致) - - 浅色背景(#F5F3F0),圆角(8-12px) - - 悬停态:轻微上浮+阴影加深 - - ### 三、配图系统规范 **插画创作指南** 1. 2. **线条处理**: - - 使用1-2px不规则手绘线条,模拟真实绘画质感 - - 保持线条流畅但带有人工感,避免过于机械 - 3. 4. **色彩运用**: - - 80%灰色线条 + 20%品牌色填充 - - 橙红色仅用于强调元素(人物、窗户、重点建筑) - - 背景采用渐变米色(#FDFBF7 → #F5F1EB) - 5. 6. **场景构图**: - - 城市场景:融合地标建筑+日常生活场景 - - 俯瞰视角或等距视角(isometric) - - 加入人物小品增加叙事性和亲切感 - 7. 8. **细节密度**: - - 前景细节丰富,中景适度简化,远景轮廓化 - - 保持视觉层次,引导视线流向关键信息 - 9. ### 四、字体系统 - - **Display Font**(标题): Serif字体,厚重有力 (如 Freight Display, Tiempos) - - **Body Font**(正文): Sans-serif,易读性强 (如 Inter, Manrope) - - **字号比例**: 采用模块化比例尺 (1.25 或 1.333) - - **字重层级**: Light(300) / Regular(400) / Medium(500) / Bold(700) - ### 五、交互细节 - - **微动效**: 卡片悬停上浮4-8px,过渡时间300-400ms - - **加载状态**: 使用骨架屏,保持品牌调性 - - **响应式断点**: - - Desktop: 1440px+ - - Tablet: 768-1439px - - Mobile: 375-767px - - ### 六、设计输出要求 每次设计输出时应包含: 1. 2. 清晰的视觉层级(通过尺寸/颜色/留白实现) 3. 4. 至少一处定制插画(与内容深度关联，用nano banana pro生成图片) 5. 6. 2-3个accent色高亮点(不超过) 7. 8. 充足的呼吸空间(section间距≥120px) 9. 10. 明确的用户行动路径 11. --- **设计哲学**: 用艺术化的视觉语言,传递品牌的独特性和温度感。每一个像素都服务于讲述故事,而非单纯的功能展示。设计应该让用户感受到"这是为懂生活的人准备的",而非冰冷的商业产品。
网页插图都由nano banana pro生成
描述
推荐自
nene@YouMind
为什么我们推荐这个技能
这款技能能将您的内容转化为简约典雅的艺术手绘风格网页，完美融合现代数字设计与传统美学。它能根据您的需求，智能生成定制插画，并运用精致的色彩与字体系统，打造充满艺术感和品牌温度的网页，让您的产品或服务在视觉上脱颖而出。
将内容转化为艺术化的手绘风格网页。精致的线条插画与配色，让你的信息充满温度与品味。
相关技能
查看全部
网页可探索式解说页面生成器
报告负责解释。页面让人自己去发现。 YouMind 已经能够构建网页。Explorable Explainer 负责决定要构建什么——它将一份研究、一个数据集或一个主题，转化为单个互动页面，延续新闻编辑部图形和可探索解释的传统：滚动驱动的叙事、真实的图表、可操作的控件、可查证的来源。 它先计划，再写代码。您首先批准一个构建计划：页面回答的核心问题；“揭示”时刻——读者应该感到“哦”的瞬间；五到八个部分的滚动主轴；两到四个交互，每个交互都要说明读者通过操作能学到什么；以及一份数据契约，列出每个数字及其来源。 然后，它会生成一个自包含的 HTML 文件，无需构建步骤。语义化标记。所有数字都集中在顶部的可编辑 DATA 常量中。滚动揭示在手机上不会失效。每个控件都是真正的、可通过键盘操作的表单元素，并带有描述其当前值的实时文本。 可访问性是内建的，而非事后附加：4.5:1 对比度、可见的焦点环、处处有替代文本、不单独依赖颜色传达含义、尊重减少动态效果设置、从 360px 起响应式适配。 在交付之前，它会进行五点自查，并如实报告结果：揭示是否真正奏效；关闭 JavaScript 后页面是否仍可阅读；Tab 顺序是否合理；每个数字是否可追溯；是否有读者想要停止的动画。 它有两条不可违背的规则：绝不为了美化图表而编造数据；当您的数字与草稿矛盾时，它会明确告知。 面向研究人员、分析师、记者、教育工作者、独立创业者和顾问——他们希望自己的作品被深入探索，而不是被匆匆略读。
网页柔光日间 浮世风格网页
柔光日间风格的网页设计系统：淡天蓝画布（#ebf5ff）、字重固定 500 的超大展示字（响应式最高 148px）、32px 圆角卡片 + 9999px 药丸、近黑 #181d27 实心 CTA、粉彩色块与漂浮 3D 黏土质插画。深度只靠画布到卡片的色阶位移，内容卡片零阴影。适用于「柔光日间风格」「3D 插画落地页」「淡蓝画布」「圆角卡片风」「SaaS 官网」「Linear/Framer 风格」等需求，内置无障碍与响应式约束。
网页Fashion Creative Design 风格网页
时尚编辑式海报风格的网页设计系统：暖奶油纸质画布（#fffef7）、300 字重超大标题（64–84px）、全出血摄影、零阴影、卡片直角 + 按钮 1440px 药丸圆角。 适用于「时尚设计风格」「杂志排版」「海报风」「艺术画册网页」「工作室作品集」「画廊页面」等需求，可将任意内容改写为高级时装编辑风页面。
🎨简约典雅艺术网页
指令
根据用户给到的内容做成网页，网页风格要求如下：
### 一、视觉风格定位 - **艺术化手绘风格**: 采用线条插画(line art)风格,融合现代数字设计与传统手绘美学 - **配色策略**: 以中性色(米白/浅灰)为基底,搭配深灰色主文字,使用橙红色(accent color)作为视觉焦点色 - - **品牌调性**: 精致、文艺、有温度,面向有品味的目标用户群体 - ### 二、布局架构原则 **Hero Section(首屏设计)** - - 左右分栏布局(60:40 黄金比例) - - 左侧: - - 超大号标题(Display Font, 72-96px),深色字体,强烈视觉冲击 - - 关键数据用accent色高亮(如"15 Cities, 4749 locations") - - 副标题文案简洁有力,阐述核心价值主张 - - 大量留白,营造高端感 - - - 右侧: - - 定制化手绘插画,占据50%视觉空间 - - 插画风格统一:线条勾勒+局部色彩点缀 - - 插画内容与品牌故事深度契合 - - **导航栏设计** - - 极简化顶部导航,固定定位 - - Logo + 2-3个主要菜单项 - - 右侧图标组(搜索/收藏/菜单) - - 背景透明或纯白,带微妙阴影 - **内容卡片区域** - - 卡片网格布局(3-4列响应式) - - 每个卡片包含: - - 标题(Heading 3, 32-40px) - - 描述文案(2-3行,16-18px行高1.6) - - 配套手绘插画(与主视觉风格一致) - - 浅色背景(#F5F3F0),圆角(8-12px) - - 悬停态:轻微上浮+阴影加深 - - ### 三、配图系统规范 **插画创作指南** 1. 2. **线条处理**: - - 使用1-2px不规则手绘线条,模拟真实绘画质感 - - 保持线条流畅但带有人工感,避免过于机械 - 3. 4. **色彩运用**: - - 80%灰色线条 + 20%品牌色填充 - - 橙红色仅用于强调元素(人物、窗户、重点建筑) - - 背景采用渐变米色(#FDFBF7 → #F5F1EB) - 5. 6. **场景构图**: - - 城市场景:融合地标建筑+日常生活场景 - - 俯瞰视角或等距视角(isometric) - - 加入人物小品增加叙事性和亲切感 - 7. 8. **细节密度**: - - 前景细节丰富,中景适度简化,远景轮廓化 - - 保持视觉层次,引导视线流向关键信息 - 9. ### 四、字体系统 - - **Display Font**(标题): Serif字体,厚重有力 (如 Freight Display, Tiempos) - - **Body Font**(正文): Sans-serif,易读性强 (如 Inter, Manrope) - - **字号比例**: 采用模块化比例尺 (1.25 或 1.333) - - **字重层级**: Light(300) / Regular(400) / Medium(500) / Bold(700) - ### 五、交互细节 - - **微动效**: 卡片悬停上浮4-8px,过渡时间300-400ms - - **加载状态**: 使用骨架屏,保持品牌调性 - - **响应式断点**: - - Desktop: 1440px+ - - Tablet: 768-1439px - - Mobile: 375-767px - - ### 六、设计输出要求 每次设计输出时应包含: 1. 2. 清晰的视觉层级(通过尺寸/颜色/留白实现) 3. 4. 至少一处定制插画(与内容深度关联，用nano banana pro生成图片) 5. 6. 2-3个accent色高亮点(不超过) 7. 8. 充足的呼吸空间(section间距≥120px) 9. 10. 明确的用户行动路径 11. --- **设计哲学**: 用艺术化的视觉语言,传递品牌的独特性和温度感。每一个像素都服务于讲述故事,而非单纯的功能展示。设计应该让用户感受到"这是为懂生活的人准备的",而非冰冷的商业产品。
网页插图都由nano banana pro生成
描述
推荐自
nene@YouMind
为什么我们推荐这个技能
这款技能能将您的内容转化为简约典雅的艺术手绘风格网页，完美融合现代数字设计与传统美学。它能根据您的需求，智能生成定制插画，并运用精致的色彩与字体系统，打造充满艺术感和品牌温度的网页，让您的产品或服务在视觉上脱颖而出。
将内容转化为艺术化的手绘风格网页。精致的线条插画与配色，让你的信息充满温度与品味。
相关技能
查看全部网页可探索式解说页面生成器
报告负责解释。页面让人自己去发现。 YouMind 已经能够构建网页。Explorable Explainer 负责决定要构建什么——它将一份研究、一个数据集或一个主题，转化为单个互动页面，延续新闻编辑部图形和可探索解释的传统：滚动驱动的叙事、真实的图表、可操作的控件、可查证的来源。 它先计划，再写代码。您首先批准一个构建计划：页面回答的核心问题；“揭示”时刻——读者应该感到“哦”的瞬间；五到八个部分的滚动主轴；两到四个交互，每个交互都要说明读者通过操作能学到什么；以及一份数据契约，列出每个数字及其来源。 然后，它会生成一个自包含的 HTML 文件，无需构建步骤。语义化标记。所有数字都集中在顶部的可编辑 DATA 常量中。滚动揭示在手机上不会失效。每个控件都是真正的、可通过键盘操作的表单元素，并带有描述其当前值的实时文本。 可访问性是内建的，而非事后附加：4.5:1 对比度、可见的焦点环、处处有替代文本、不单独依赖颜色传达含义、尊重减少动态效果设置、从 360px 起响应式适配。 在交付之前，它会进行五点自查，并如实报告结果：揭示是否真正奏效；关闭 JavaScript 后页面是否仍可阅读；Tab 顺序是否合理；每个数字是否可追溯；是否有读者想要停止的动画。 它有两条不可违背的规则：绝不为了美化图表而编造数据；当您的数字与草稿矛盾时，它会明确告知。 面向研究人员、分析师、记者、教育工作者、独立创业者和顾问——他们希望自己的作品被深入探索，而不是被匆匆略读。
网页柔光日间 浮世风格网页
柔光日间风格的网页设计系统：淡天蓝画布（#ebf5ff）、字重固定 500 的超大展示字（响应式最高 148px）、32px 圆角卡片 + 9999px 药丸、近黑 #181d27 实心 CTA、粉彩色块与漂浮 3D 黏土质插画。深度只靠画布到卡片的色阶位移，内容卡片零阴影。适用于「柔光日间风格」「3D 插画落地页」「淡蓝画布」「圆角卡片风」「SaaS 官网」「Linear/Framer 风格」等需求，内置无障碍与响应式约束。
网页Fashion Creative Design 风格网页
时尚编辑式海报风格的网页设计系统：暖奶油纸质画布（#fffef7）、300 字重超大标题（64–84px）、全出血摄影、零阴影、卡片直角 + 按钮 1440px 药丸圆角。 适用于「时尚设计风格」「杂志排版」「海报风」「艺术画册网页」「工作室作品集」「画廊页面」等需求，可将任意内容改写为高级时装编辑风页面。
发现下一个适合你的技能
继续探索更多精选 AI 技能，用于研究、创作和日常工作。