موقع قصة العلامة التجارية
التعليمات
核心任务
任务背景： 品牌故事往往以文字文档或 PPT 形式存在，缺乏沉浸式的呈现方式。一个优秀的品牌页应该像一本可以滚动翻阅的视觉杂志，通过精心设计的排版、动效和节奏，让访客在浏览过程中自然地理解品牌理念、感受品牌调性。
具体目标：
将品牌故事拆解为 4-8 个叙事节点，每个节点对应一个视觉章节
研究对标品牌网站，提取视觉灵感和设计参考
设计符合品牌调性的高级视觉风格系统（配色、字体、排版、动效）
生成滚动式互动网页，包含时间线、里程碑、产品演进等模块
确保页面在视觉上具有"高级感、优雅、简约"的品质，避免廉价或过度装饰
关键约束：
视觉风格必须与品牌调性一致（例如：科技品牌→冷静克制，美妆品牌→温暖柔和）
动效要克制有度，服务于叙事而非炫技
页面加载速度和交互流畅度需保证良好体验
在执行任务前，先要求用户提供品牌故事、背景、价值观等相关的资料。
Step 1: 理解品牌故事与提取叙事结构
目标: 深入理解品牌故事的核心内容,识别关键叙事节点和情感曲线。
行动:
仔细阅读用户提供的品牌故事文案「{品牌故事文案}」,识别以下要素:
-品牌起源/创立背景
-核心理念/价值观
-关键里程碑事件(产品发布、获奖、用户突破等)
-创始人故事或团队故事(如有)
-品牌愿景/未来方向
-将故事拆解为 4-8 个叙事节点,每个节点包含:
-节点标题(简短有力,5-10 字)
-核心信息(1-2 句话概括)
-情感基调(例如:温暖、坚定、突破、展望)
构建叙事流程,确定节点之间的逻辑关系和情感递进
质量标准:
-叙事节点数量适中(过少显得单薄,过多导致冗长)
-每个节点有明确的叙事目的,避免信息重复
-整体叙事有起承转合,有情感高潮点
Step 2: 研究对标品牌与视觉灵感收集
目标: 根据品牌调性，搜索并分析同类型或相似气质的优秀品牌网站，提取视觉灵感和设计参考。
行动:
1、确定对标搜索方向：
根据 Step 1 提取的品牌调性关键词（如「{品牌调性关键词}」），构建搜索策略
确定 2-3 个搜索维度：
同行业标杆（如：同为国货美妆的优秀品牌）
同调性跨界（如：同样强调"东方美学"的其他品类品牌，茶饮、家居等）
设计获奖案例（如：Awwwards、FWA 上相似风格的获奖网站）
2、搜索并筛选对标品牌：
使用搜索工具，搜索关键词如：
"{行业} + 品牌官网 + 设计"
"{调性关键词} + brand website + award"
"best {行业} website design 2024"
筛选出 3-5 个视觉风格值得参考的品牌网站
优先选择：高端定位、设计精良、有滚动叙事特点的网站
3、深度分析对标网站：
对每个对标网站进行视觉拆解，记录以下要素：
配色方案：主色调、背景色、强调色的搭配方式
字体运用：标题与正文的字体选择、大小层级
排版特点：留白比例、网格系统、对齐方式
动效风格：滚动触发方式、动画时长、视差效果
叙事结构：章节划分、内容节奏、视觉焦点
截取关键页面或模块作为视觉参考
4、提炼设计启发：
总结对标网站的共性特点（如："这类品牌普遍使用大面积留白+衬线标题+渐显动效"）
识别可借鉴的独特设计手法（如："A品牌的时间线用横向滚动，很有新意"）
标注需要避免的设计陷阱（如："B品牌动效过多，显得花哨"）
形成 3-5 条明确的设计启发，作为后续设计的指导原则
质量标准:
对标品牌数量适中（3-5 个），覆盖同行业和跨界参考
分析维度全面，涵盖配色、字体、排版、动效、结构
设计启发具体可执行，而非泛泛的"要高级"
明确区分"可借鉴"和"需避免"的设计元素
完成研究后，和用户确认交付是否满意。如不满意，根据用户的反馈重新调整，直到用户满意为止。
Step 3: 定义品牌视觉风格系统
目标: 基于对标研究结果，结合品牌自身调性，设计一套高级、优雅、简约的视觉风格系统。
行动:
综合 Step 1 的品牌调性分析和 Step 2 的对标研究结果，确定视觉调性关键词
设计配色方案：
主色调：选择 1-2 个能代表品牌气质的主色（提供色值）
辅助色：2-3 个用于层次区分和视觉点缀的辅助色
背景色：优先使用柔和的米白、浅灰或深色背景，避免纯白（#FFFFFF）
强调色：用于 CTA 按钮或关键信息高亮的高对比度颜色
参考对标品牌的配色规律，确保配色方案符合行业审美标准
选择字体组合：
标题字体：选择具有设计感和品牌气质的字体（例如：衬线体显优雅，无衬线体显现代）
正文字体：高可读性的字体，与标题形成层次对比
避免使用过于常见的系统字体（如 Arial、宋体）
定义排版原则：
留白策略：大量留白营造高级感，避免信息拥挤
网格系统：使用规整的网格布局，保持视觉秩序
对齐方式：优先使用左对齐或居中对齐，避免两端对齐
确定动效风格：
滚动视差（Parallax）：不同层级元素以不同速度移动，营造空间感
渐显动画（Fade-in）：内容随滚动逐渐显现，节奏优雅
微动效：hover 状态、按钮交互等细节动效，提升精致感
动效时长：控制在 0.3-0.8 秒，避免过快或过慢
借鉴对标品牌中效果优秀的动效手法，避免已标注的设计陷阱
质量标准:
配色方案符合品牌调性，色彩搭配和谐不刺眼
字体选择具有设计感，避免廉价或过时的字体
排版呼吸感强，留白充足，信息层级清晰
动效克制有度，服务于叙事而非炫技
风格系统与对标研究中的优秀案例保持同等品质水准
完成定义之后，和用户确认交付是否满意。如不满意，根据用户的反馈重新调整，直到用户满意为止。
Step 4: 设计页面结构与交互流程
目标: 规划页面的整体结构和滚动交互流程，确保叙事节奏流畅。
行动:
设计页面整体结构，包含以下模块：
开场模块（Hero Section）：
品牌名称/Logo
一句话品牌 Slogan 或核心理念
引导滚动的视觉提示（例如：向下箭头动画）
可选：全屏背景视频或大图
叙事章节模块（根据 Step 1 的节点设计）：
每个节点对应一个独立的视觉章节
章节之间通过滚动过渡，可使用分隔线、留白或过渡动画
每个章节包含：标题、正文、配图/插画、时间标记（如适用）
时间线模块（可选，适合有明确时间节点的品牌）：
垂直或横向时间轴
关键年份/日期标注
每个时间点的事件描述和配图
产品/里程碑展示模块：
网格或卡片式布局
产品图片+简短描述
hover 效果：放大、显示更多信息等
创始人/团队故事模块（如有）：
人物照片+故事文案
可使用左右分栏或全屏沉浸式布局
结尾模块（Closing Section）：
品牌愿景或展望未来的文案
CTA 按钮（例如："了解更多"、"探索产品"、"联系我们"）
社交媒体链接或联系方式
规划滚动交互流程：
确定每个模块的滚动触发点（例如：滚动到视口 50% 时触发动画）
设计模块之间的过渡效果（淡入淡出、视差滚动、元素位移等）
确保滚动节奏自然，避免过于频繁的动效导致视觉疲劳
参考对标品牌中效果优秀的交互设计
设计响应式布局策略（确保在桌面端和移动端都有良好体验）
质量标准:
页面结构逻辑清晰，叙事流程自然流畅
每个模块有明确的视觉焦点，避免信息混乱
滚动交互节奏适中，不会让用户感到突兀或疲劳
响应式设计考虑周全，移动端体验不打折扣
Step 5: 撰写网页生成指令（Instruction）
目标: 将视觉风格系统和页面结构转化为清晰、详细的网页生成指令，供 generateWebpage 工具执行。
行动:
撰写结构化的 instruction，包含以下部分：
1. 整体风格描述：
用自然语言详细描述视觉风格（基于 Step 3 的风格系统）
示例："采用东方美学的克制优雅风格。背景使用柔和的米白色（#F9F7F2），主色调为温润的茶色（#8B7355）和淡雅的粉色（#E8D5C4）。标题使用衬线字体，正文使用无衬线字体，大量留白营造高级感。动效以渐显和视差滚动为主，节奏舒缓优雅。"
2. 页面结构说明：
按模块顺序描述页面结构
示例："页面从全屏 Hero Section 开始，展示品牌名称和 Slogan，背景为品牌主视觉图片，带有向下滚动提示。接下来是 4 个叙事章节，每个章节包含标题、正文和配图，采用左右交替的分栏布局。然后是垂直时间线模块，展示品牌发展历程。最后是结尾模块，包含品牌愿景和 CTA 按钮。"
3. 交互细节说明：
描述关键的交互效果和动画
示例："滚动时，章节内容以渐显动画进入视口。背景图片以较慢速度滚动，形成视差效果。时间线节点在滚动到对应位置时高亮显示。产品卡片 hover 时轻微放大并显示阴影。"
4. 内容占位符标记：
明确标注哪些内容需要从用户提供的素材中提取
示例："品牌名称使用「{品牌名称}」，Slogan 使用「{品牌 Slogan}」。叙事章节内容从「{品牌故事文案}」中提取。时间线事件从「{里程碑列表}」中提取。产品图片使用「{产品图片素材}」。"
5. 技术实现提示（可选）：
如有特殊技术需求，可简要说明
示例："使用 Intersection Observer API 实现滚动触发动画。使用 CSS Grid 实现响应式布局。"
质量标准:
Instruction 描述清晰详细，AI 能够准确理解设计意图
视觉风格描述具体（颜色有色值，字体有类型，动效有时长）
内容占位符标记明确，AI 知道从哪里获取数据
整体 instruction 长度适中（过短信息不足，过长可能导致理解偏差）
输出互动式品牌页（HTML 网页）：
包含完整的品牌故事叙事
具有滚动交互和动效
响应式设计，适配桌面端和移动端
视觉风格符合"高级、优雅、简约"标准
内容结构:
开场模块（Hero Section）
4-8 个叙事章节
时间线/里程碑模块（如适用）
产品展示模块（如适用）
创始人/团队故事模块（如适用）
结尾模块（Closing Section）
质量标准:
视觉品质：配色和谐高级，字体选择得当，排版清晰优雅，留白充足
交互体验：滚动流畅，动效自然克制，响应及时，移动端体验良好
内容完整性：品牌故事关键信息完整，叙事逻辑清晰，图文匹配准确
审美标准：整体呈现出高级感、优雅感和简约感，避免廉价或过度装饰
行业对标：视觉品质达到对标品牌的同等水准
风格与呈现
核心审美原则:
高级感：通过克制的配色、精致的字体、充足的留白和细腻的动效营造
优雅感：节奏舒缓，过渡自然，避免突兀或生硬的视觉元素
简约感：去除不必要的装饰，每个元素都有明确的功能和意义
视觉参考方向:
高端品牌官网（如 Apple、Aesop、Muji）
设计类杂志网站（如 It's Nice That、Awwwards 获奖作品）
艺术展览类网站（注重留白和视觉节奏）
Step 2 中研究的对标品牌网站
避免的风格:
过度装饰、元素拥挤的"淘宝风"
过于花哨、动效过多的"炫技风"
配色刺眼、排版混乱的"廉价风"
过于保守、缺乏设计感的"模板风"
الوصف
موصى بها من قبل
nene@YouMind
لماذا نحب هذه المهارة
تتيح هذه المهارة تحويل قصة العلامة التجارية إلى مجلة بصرية غامرة، من خلال التنسيق الدقيق والحركات الأنيقة والسرد السلس، لإنشاء صفحة ويب تفاعلية راقية وبسيطة، مما يجعل المستخدم يشعر بعمق جاذبية العلامة التجارية.
تحويل نصوص وقصص العلامة التجارية وموادها إلى صفحة ويب سردية متحركة بتصميم جمالي راقي، تنقل قيمة العلامة التجارية ومشاعرها عبر التصميم البصري والتأثيرات التفاعلية.
مهارات ذات صلة
عرض الكل
كتابة نصوص تسويقية بقصص دافئة
يساعدك في كتابة نصوص تسويقية دافئة ومقنعة. يعتمد على أساليب التسويق القصصي من خلال مصفوفة قصص المستخدمين، التعبير العامي والصدى العاطفي لجعل الترويج للمنتجات أكثر صدقاً وتأثيراً. مناسب لإطلاق المنتجات، العروض الترويجية، والإعلانات التجارية.
صوررسوم شبه مسطحة واقعية
هل سبق أن واجهت هذه المعضلة في التعبير البصري؟ تحتاج العلامة التجارية إلى إحساس بالفخامة، لكن الرسوم المسطحة تماماً تبدو رقيقة وتفتقر إلى الدفء والملمس؟ تريد استخدام أسلوب واقعي لإبراز تفاصيل المنتج، لكنك تخشى أن تصبح الصورة معقدة أكثر من اللازم، فتطغى على المحتوى نفسه؟ كيف يمكن تصوير المفاهيم المجردة أو السرد العاطفي أو الأفكار المعقدة؟ غالباً ما تكون النتيجة «ناقصة شيئاً ما»؛ إما مباشرة أكثر من اللازم أو غامضة أكثر من اللازم؟ تبحث في مكتبة الأصول ولا تجد صورة تجمع بين الحداثة والأناقة، وتعبّر بدقة عن المعنى الأساسي؟ ما نطمح إليه هو لغة بصرية «متوازنة تماماً» — تجمع بين الحس التصميمي والواقعية، وبين البساطة والقوة من جهة، والدقة والجاذبية من جهة أخرى. والآن، لا تحتاج إلا إلى إدخال فقرة نصية — ليولّد لك رسماً توضيحياً شبه مسطح وواقعياً، يمنح علامتك التجارية أو محتواك أو مفهومك جاذبية بصرية فريدة. ما هو؟ أداة ذكية تولّد رسوماً توضيحية عصرية شبه مسطحة وواقعية من المحتوى النصي. فهي تدمج بمهارة بين الخطوط الواضحة والبسيطة للرسوم المسطحة، والإضاءة الناعمة والإحساس بالحجم في الأسلوب الواقعي، لتجد نقطة التوازن الأكثر أناقة بين «البساطة المفرطة» و«التعقيد المفرط». كيف تستخدمها؟ ثلاث خطوات بسيطة أدخل نصك — سواء كان قصة لعلامة تجارية، أو جملة اعتراف عاطفية، أو وصفاً لمنتج، أو مفهوماً فلسفياً مجرداً؛ وستلتقط المعنى الأساسي بدقة؛ (اختياري) اضبط تفضيلات التكوين أو التوجه اللوني — يمكنك تحديد طابع الصورة، أو تركها لتبتكر بحرية؛ أنشئ الصورة — وسيظهر لك فوراً رسم توضيحي بتكوين مدروس، وألوان راقية، وملمس دقيق. لا تحتاج إلى أي خبرة في الرسم؛ ما عليك سوى تحديد «ماذا تقول»، وهي تتولى «كيف ترسمه». ما الذي يميز لغتها البصرية؟ خطوط واضحة، لكن ليست مسطحة — تحتفظ بالخطوط النظيفة والعصرية للرسوم المسطحة، وتستخدم الظلال الناعمة والإحساس الدقيق بالحجم لمنح العناصر حضوراً مجسماً، بعيداً عن الرقة والسطحية؛ واقعية، لكن ليست فوتوغرافية — تتجنب التفاصيل المعقدة على مستوى الصور الفوتوغرافية، ولا تحتفظ إلا بالدفء الذي تمنحه الإضاءة والخامات، لتبقى الصورة موثوقة وتترك مجالاً للخيال؛ نقية، لكن ليست فارغة — تستخدم خلفية بيضاء خالصة باستمرار، لتركيز الانتباه البصري بالكامل على العنصر الرئيسي، وضمان صورة نظيفة ومتزنة تتمحور دائماً حول رسالتك الأساسية. تحقق كل قطعة من توافق دقيق بين الحس التصميمي والقدرة على السرد. في أي سياقات يمكن استخدامها؟ تحويل قصة العلامة التجارية إلى صورة — رسوم عصرية مخصصة لطابع علامتك التجارية، تنقل رموزاً بصرية متزنة وغنية بالملمس؛ إضافة صور إلى المحتوى المتعمق — اجعل المقالات والتقارير أو الأعمدة أقل جفافاً، ودَع الصورة والنص يتناغمان؛ شرح المنتجات / عرض المفاهيم — حوّل الوظائف المعقدة أو الأفكار المجردة إلى لغة بصرية واضحة وأنيقة؛ اللوحات الزخرفية / تصميم الأغلفة — تتوافق الصور النظيفة والراقية طبيعياً مع الكتب والألبومات أو ديكور المساحات. ما تحصل عليه ليس مجرد صورة ستحصل على صورة رسم توضيحي نقية، خالية من أي تشويش نصي، مرفقة بتحليل للأسلوب البصري — يشرح بإيجاز سبب اختيار هذا التكوين والإضاءة والألوان لمواءمة نصك، ليساعدك على فهم المنطق التصميمي وراء الصورة بشكل أفضل، كما يسهّل عليك شرح الفكرة لفريقك.
كتابةكتابة نصوص مشهدية وعاطفية
يستخدم لإنشاء نصوص صينية متنوعة تحتوي على صور حية وعواطف وإحساس بالحركة، مناسبة لافتتاحيات الفعاليات، وقصص الشخصيات، والتعبير عن العلامات التجارية، وتقديم المنتجات، وسيناريوهات الفيديو القصير، ومحتوى المجتمعات، وافتتاحيات الخطب، ونصوص الملصقات، والنصوص الترويجية. يبدأ بالتقاط المشاهد المحددة، وحركات الشخصيات، وتوتر العلاقات، والتفاصيل الواقعية، ثم يستخلص الموضوع والعواطف، وأخيراً يكتب تعبيراً طبيعياً لا يُنسى ويدفع القارئ للاستمرار في القراءة.
موقع قصة العلامة التجارية
التعليمات
核心任务
任务背景： 品牌故事往往以文字文档或 PPT 形式存在，缺乏沉浸式的呈现方式。一个优秀的品牌页应该像一本可以滚动翻阅的视觉杂志，通过精心设计的排版、动效和节奏，让访客在浏览过程中自然地理解品牌理念、感受品牌调性。
具体目标：
将品牌故事拆解为 4-8 个叙事节点，每个节点对应一个视觉章节
研究对标品牌网站，提取视觉灵感和设计参考
设计符合品牌调性的高级视觉风格系统（配色、字体、排版、动效）
生成滚动式互动网页，包含时间线、里程碑、产品演进等模块
确保页面在视觉上具有"高级感、优雅、简约"的品质，避免廉价或过度装饰
关键约束：
视觉风格必须与品牌调性一致（例如：科技品牌→冷静克制，美妆品牌→温暖柔和）
动效要克制有度，服务于叙事而非炫技
页面加载速度和交互流畅度需保证良好体验
在执行任务前，先要求用户提供品牌故事、背景、价值观等相关的资料。
Step 1: 理解品牌故事与提取叙事结构
目标: 深入理解品牌故事的核心内容,识别关键叙事节点和情感曲线。
行动:
仔细阅读用户提供的品牌故事文案「{品牌故事文案}」,识别以下要素:
-品牌起源/创立背景
-核心理念/价值观
-关键里程碑事件(产品发布、获奖、用户突破等)
-创始人故事或团队故事(如有)
-品牌愿景/未来方向
-将故事拆解为 4-8 个叙事节点,每个节点包含:
-节点标题(简短有力,5-10 字)
-核心信息(1-2 句话概括)
-情感基调(例如:温暖、坚定、突破、展望)
构建叙事流程,确定节点之间的逻辑关系和情感递进
质量标准:
-叙事节点数量适中(过少显得单薄,过多导致冗长)
-每个节点有明确的叙事目的,避免信息重复
-整体叙事有起承转合,有情感高潮点
Step 2: 研究对标品牌与视觉灵感收集
目标: 根据品牌调性，搜索并分析同类型或相似气质的优秀品牌网站，提取视觉灵感和设计参考。
行动:
1、确定对标搜索方向：
根据 Step 1 提取的品牌调性关键词（如「{品牌调性关键词}」），构建搜索策略
确定 2-3 个搜索维度：
同行业标杆（如：同为国货美妆的优秀品牌）
同调性跨界（如：同样强调"东方美学"的其他品类品牌，茶饮、家居等）
设计获奖案例（如：Awwwards、FWA 上相似风格的获奖网站）
2、搜索并筛选对标品牌：
使用搜索工具，搜索关键词如：
"{行业} + 品牌官网 + 设计"
"{调性关键词} + brand website + award"
"best {行业} website design 2024"
筛选出 3-5 个视觉风格值得参考的品牌网站
优先选择：高端定位、设计精良、有滚动叙事特点的网站
3、深度分析对标网站：
对每个对标网站进行视觉拆解，记录以下要素：
配色方案：主色调、背景色、强调色的搭配方式
字体运用：标题与正文的字体选择、大小层级
排版特点：留白比例、网格系统、对齐方式
动效风格：滚动触发方式、动画时长、视差效果
叙事结构：章节划分、内容节奏、视觉焦点
截取关键页面或模块作为视觉参考
4、提炼设计启发：
总结对标网站的共性特点（如："这类品牌普遍使用大面积留白+衬线标题+渐显动效"）
识别可借鉴的独特设计手法（如："A品牌的时间线用横向滚动，很有新意"）
标注需要避免的设计陷阱（如："B品牌动效过多，显得花哨"）
形成 3-5 条明确的设计启发，作为后续设计的指导原则
质量标准:
对标品牌数量适中（3-5 个），覆盖同行业和跨界参考
分析维度全面，涵盖配色、字体、排版、动效、结构
设计启发具体可执行，而非泛泛的"要高级"
明确区分"可借鉴"和"需避免"的设计元素
完成研究后，和用户确认交付是否满意。如不满意，根据用户的反馈重新调整，直到用户满意为止。
Step 3: 定义品牌视觉风格系统
目标: 基于对标研究结果，结合品牌自身调性，设计一套高级、优雅、简约的视觉风格系统。
行动:
综合 Step 1 的品牌调性分析和 Step 2 的对标研究结果，确定视觉调性关键词
设计配色方案：
主色调：选择 1-2 个能代表品牌气质的主色（提供色值）
辅助色：2-3 个用于层次区分和视觉点缀的辅助色
背景色：优先使用柔和的米白、浅灰或深色背景，避免纯白（#FFFFFF）
强调色：用于 CTA 按钮或关键信息高亮的高对比度颜色
参考对标品牌的配色规律，确保配色方案符合行业审美标准
选择字体组合：
标题字体：选择具有设计感和品牌气质的字体（例如：衬线体显优雅，无衬线体显现代）
正文字体：高可读性的字体，与标题形成层次对比
避免使用过于常见的系统字体（如 Arial、宋体）
定义排版原则：
留白策略：大量留白营造高级感，避免信息拥挤
网格系统：使用规整的网格布局，保持视觉秩序
对齐方式：优先使用左对齐或居中对齐，避免两端对齐
确定动效风格：
滚动视差（Parallax）：不同层级元素以不同速度移动，营造空间感
渐显动画（Fade-in）：内容随滚动逐渐显现，节奏优雅
微动效：hover 状态、按钮交互等细节动效，提升精致感
动效时长：控制在 0.3-0.8 秒，避免过快或过慢
借鉴对标品牌中效果优秀的动效手法，避免已标注的设计陷阱
质量标准:
配色方案符合品牌调性，色彩搭配和谐不刺眼
字体选择具有设计感，避免廉价或过时的字体
排版呼吸感强，留白充足，信息层级清晰
动效克制有度，服务于叙事而非炫技
风格系统与对标研究中的优秀案例保持同等品质水准
完成定义之后，和用户确认交付是否满意。如不满意，根据用户的反馈重新调整，直到用户满意为止。
Step 4: 设计页面结构与交互流程
目标: 规划页面的整体结构和滚动交互流程，确保叙事节奏流畅。
行动:
设计页面整体结构，包含以下模块：
开场模块（Hero Section）：
品牌名称/Logo
一句话品牌 Slogan 或核心理念
引导滚动的视觉提示（例如：向下箭头动画）
可选：全屏背景视频或大图
叙事章节模块（根据 Step 1 的节点设计）：
每个节点对应一个独立的视觉章节
章节之间通过滚动过渡，可使用分隔线、留白或过渡动画
每个章节包含：标题、正文、配图/插画、时间标记（如适用）
时间线模块（可选，适合有明确时间节点的品牌）：
垂直或横向时间轴
关键年份/日期标注
每个时间点的事件描述和配图
产品/里程碑展示模块：
网格或卡片式布局
产品图片+简短描述
hover 效果：放大、显示更多信息等
创始人/团队故事模块（如有）：
人物照片+故事文案
可使用左右分栏或全屏沉浸式布局
结尾模块（Closing Section）：
品牌愿景或展望未来的文案
CTA 按钮（例如："了解更多"、"探索产品"、"联系我们"）
社交媒体链接或联系方式
规划滚动交互流程：
确定每个模块的滚动触发点（例如：滚动到视口 50% 时触发动画）
设计模块之间的过渡效果（淡入淡出、视差滚动、元素位移等）
确保滚动节奏自然，避免过于频繁的动效导致视觉疲劳
参考对标品牌中效果优秀的交互设计
设计响应式布局策略（确保在桌面端和移动端都有良好体验）
质量标准:
页面结构逻辑清晰，叙事流程自然流畅
每个模块有明确的视觉焦点，避免信息混乱
滚动交互节奏适中，不会让用户感到突兀或疲劳
响应式设计考虑周全，移动端体验不打折扣
Step 5: 撰写网页生成指令（Instruction）
目标: 将视觉风格系统和页面结构转化为清晰、详细的网页生成指令，供 generateWebpage 工具执行。
行动:
撰写结构化的 instruction，包含以下部分：
1. 整体风格描述：
用自然语言详细描述视觉风格（基于 Step 3 的风格系统）
示例："采用东方美学的克制优雅风格。背景使用柔和的米白色（#F9F7F2），主色调为温润的茶色（#8B7355）和淡雅的粉色（#E8D5C4）。标题使用衬线字体，正文使用无衬线字体，大量留白营造高级感。动效以渐显和视差滚动为主，节奏舒缓优雅。"
2. 页面结构说明：
按模块顺序描述页面结构
示例："页面从全屏 Hero Section 开始，展示品牌名称和 Slogan，背景为品牌主视觉图片，带有向下滚动提示。接下来是 4 个叙事章节，每个章节包含标题、正文和配图，采用左右交替的分栏布局。然后是垂直时间线模块，展示品牌发展历程。最后是结尾模块，包含品牌愿景和 CTA 按钮。"
3. 交互细节说明：
描述关键的交互效果和动画
示例："滚动时，章节内容以渐显动画进入视口。背景图片以较慢速度滚动，形成视差效果。时间线节点在滚动到对应位置时高亮显示。产品卡片 hover 时轻微放大并显示阴影。"
4. 内容占位符标记：
明确标注哪些内容需要从用户提供的素材中提取
示例："品牌名称使用「{品牌名称}」，Slogan 使用「{品牌 Slogan}」。叙事章节内容从「{品牌故事文案}」中提取。时间线事件从「{里程碑列表}」中提取。产品图片使用「{产品图片素材}」。"
5. 技术实现提示（可选）：
如有特殊技术需求，可简要说明
示例："使用 Intersection Observer API 实现滚动触发动画。使用 CSS Grid 实现响应式布局。"
质量标准:
Instruction 描述清晰详细，AI 能够准确理解设计意图
视觉风格描述具体（颜色有色值，字体有类型，动效有时长）
内容占位符标记明确，AI 知道从哪里获取数据
整体 instruction 长度适中（过短信息不足，过长可能导致理解偏差）
输出互动式品牌页（HTML 网页）：
包含完整的品牌故事叙事
具有滚动交互和动效
响应式设计，适配桌面端和移动端
视觉风格符合"高级、优雅、简约"标准
内容结构:
开场模块（Hero Section）
4-8 个叙事章节
时间线/里程碑模块（如适用）
产品展示模块（如适用）
创始人/团队故事模块（如适用）
结尾模块（Closing Section）
质量标准:
视觉品质：配色和谐高级，字体选择得当，排版清晰优雅，留白充足
交互体验：滚动流畅，动效自然克制，响应及时，移动端体验良好
内容完整性：品牌故事关键信息完整，叙事逻辑清晰，图文匹配准确
审美标准：整体呈现出高级感、优雅感和简约感，避免廉价或过度装饰
行业对标：视觉品质达到对标品牌的同等水准
风格与呈现
核心审美原则:
高级感：通过克制的配色、精致的字体、充足的留白和细腻的动效营造
优雅感：节奏舒缓，过渡自然，避免突兀或生硬的视觉元素
简约感：去除不必要的装饰，每个元素都有明确的功能和意义
视觉参考方向:
高端品牌官网（如 Apple、Aesop、Muji）
设计类杂志网站（如 It's Nice That、Awwwards 获奖作品）
艺术展览类网站（注重留白和视觉节奏）
Step 2 中研究的对标品牌网站
避免的风格:
过度装饰、元素拥挤的"淘宝风"
过于花哨、动效过多的"炫技风"
配色刺眼、排版混乱的"廉价风"
过于保守、缺乏设计感的"模板风"
الوصف
موصى بها من قبل
nene@YouMind
لماذا نحب هذه المهارة
تتيح هذه المهارة تحويل قصة العلامة التجارية إلى مجلة بصرية غامرة، من خلال التنسيق الدقيق والحركات الأنيقة والسرد السلس، لإنشاء صفحة ويب تفاعلية راقية وبسيطة، مما يجعل المستخدم يشعر بعمق جاذبية العلامة التجارية.
تحويل نصوص وقصص العلامة التجارية وموادها إلى صفحة ويب سردية متحركة بتصميم جمالي راقي، تنقل قيمة العلامة التجارية ومشاعرها عبر التصميم البصري والتأثيرات التفاعلية.
مهارات ذات صلة
عرض الكلكتابة نصوص تسويقية بقصص دافئة
يساعدك في كتابة نصوص تسويقية دافئة ومقنعة. يعتمد على أساليب التسويق القصصي من خلال مصفوفة قصص المستخدمين، التعبير العامي والصدى العاطفي لجعل الترويج للمنتجات أكثر صدقاً وتأثيراً. مناسب لإطلاق المنتجات، العروض الترويجية، والإعلانات التجارية.
صوررسوم شبه مسطحة واقعية
هل سبق أن واجهت هذه المعضلة في التعبير البصري؟ تحتاج العلامة التجارية إلى إحساس بالفخامة، لكن الرسوم المسطحة تماماً تبدو رقيقة وتفتقر إلى الدفء والملمس؟ تريد استخدام أسلوب واقعي لإبراز تفاصيل المنتج، لكنك تخشى أن تصبح الصورة معقدة أكثر من اللازم، فتطغى على المحتوى نفسه؟ كيف يمكن تصوير المفاهيم المجردة أو السرد العاطفي أو الأفكار المعقدة؟ غالباً ما تكون النتيجة «ناقصة شيئاً ما»؛ إما مباشرة أكثر من اللازم أو غامضة أكثر من اللازم؟ تبحث في مكتبة الأصول ولا تجد صورة تجمع بين الحداثة والأناقة، وتعبّر بدقة عن المعنى الأساسي؟ ما نطمح إليه هو لغة بصرية «متوازنة تماماً» — تجمع بين الحس التصميمي والواقعية، وبين البساطة والقوة من جهة، والدقة والجاذبية من جهة أخرى. والآن، لا تحتاج إلا إلى إدخال فقرة نصية — ليولّد لك رسماً توضيحياً شبه مسطح وواقعياً، يمنح علامتك التجارية أو محتواك أو مفهومك جاذبية بصرية فريدة. ما هو؟ أداة ذكية تولّد رسوماً توضيحية عصرية شبه مسطحة وواقعية من المحتوى النصي. فهي تدمج بمهارة بين الخطوط الواضحة والبسيطة للرسوم المسطحة، والإضاءة الناعمة والإحساس بالحجم في الأسلوب الواقعي، لتجد نقطة التوازن الأكثر أناقة بين «البساطة المفرطة» و«التعقيد المفرط». كيف تستخدمها؟ ثلاث خطوات بسيطة أدخل نصك — سواء كان قصة لعلامة تجارية، أو جملة اعتراف عاطفية، أو وصفاً لمنتج، أو مفهوماً فلسفياً مجرداً؛ وستلتقط المعنى الأساسي بدقة؛ (اختياري) اضبط تفضيلات التكوين أو التوجه اللوني — يمكنك تحديد طابع الصورة، أو تركها لتبتكر بحرية؛ أنشئ الصورة — وسيظهر لك فوراً رسم توضيحي بتكوين مدروس، وألوان راقية، وملمس دقيق. لا تحتاج إلى أي خبرة في الرسم؛ ما عليك سوى تحديد «ماذا تقول»، وهي تتولى «كيف ترسمه». ما الذي يميز لغتها البصرية؟ خطوط واضحة، لكن ليست مسطحة — تحتفظ بالخطوط النظيفة والعصرية للرسوم المسطحة، وتستخدم الظلال الناعمة والإحساس الدقيق بالحجم لمنح العناصر حضوراً مجسماً، بعيداً عن الرقة والسطحية؛ واقعية، لكن ليست فوتوغرافية — تتجنب التفاصيل المعقدة على مستوى الصور الفوتوغرافية، ولا تحتفظ إلا بالدفء الذي تمنحه الإضاءة والخامات، لتبقى الصورة موثوقة وتترك مجالاً للخيال؛ نقية، لكن ليست فارغة — تستخدم خلفية بيضاء خالصة باستمرار، لتركيز الانتباه البصري بالكامل على العنصر الرئيسي، وضمان صورة نظيفة ومتزنة تتمحور دائماً حول رسالتك الأساسية. تحقق كل قطعة من توافق دقيق بين الحس التصميمي والقدرة على السرد. في أي سياقات يمكن استخدامها؟ تحويل قصة العلامة التجارية إلى صورة — رسوم عصرية مخصصة لطابع علامتك التجارية، تنقل رموزاً بصرية متزنة وغنية بالملمس؛ إضافة صور إلى المحتوى المتعمق — اجعل المقالات والتقارير أو الأعمدة أقل جفافاً، ودَع الصورة والنص يتناغمان؛ شرح المنتجات / عرض المفاهيم — حوّل الوظائف المعقدة أو الأفكار المجردة إلى لغة بصرية واضحة وأنيقة؛ اللوحات الزخرفية / تصميم الأغلفة — تتوافق الصور النظيفة والراقية طبيعياً مع الكتب والألبومات أو ديكور المساحات. ما تحصل عليه ليس مجرد صورة ستحصل على صورة رسم توضيحي نقية، خالية من أي تشويش نصي، مرفقة بتحليل للأسلوب البصري — يشرح بإيجاز سبب اختيار هذا التكوين والإضاءة والألوان لمواءمة نصك، ليساعدك على فهم المنطق التصميمي وراء الصورة بشكل أفضل، كما يسهّل عليك شرح الفكرة لفريقك.
كتابةكتابة نصوص مشهدية وعاطفية
يستخدم لإنشاء نصوص صينية متنوعة تحتوي على صور حية وعواطف وإحساس بالحركة، مناسبة لافتتاحيات الفعاليات، وقصص الشخصيات، والتعبير عن العلامات التجارية، وتقديم المنتجات، وسيناريوهات الفيديو القصير، ومحتوى المجتمعات، وافتتاحيات الخطب، ونصوص الملصقات، والنصوص الترويجية. يبدأ بالتقاط المشاهد المحددة، وحركات الشخصيات، وتوتر العلاقات، والتفاصيل الواقعية، ثم يستخلص الموضوع والعواطف، وأخيراً يكتب تعبيراً طبيعياً لا يُنسى ويدفع القارئ للاستمرار في القراءة.
اعثر على مهارتك المفضلة التالية
استكشف مزيدًا من مهارات الذكاء الاصطناعي المنتقاة للبحث والإبداع والعمل اليومي.