从一本日历说起
前两天，LangGPT社群的小伙伴们在感慨2024年快结束了，又要开始备战2025，进而讨论到关于日历的话题，甲木突然想起前段时间润总团队的小伙伴发我的“勤商日历”，就是👇🏻这个。
在中国传统文化中，日历不仅仅是记录时间的工具，更承载着深厚的文化内涵。从古老的黄历到现代的台历，它见证了中国人对时间的敬畏，对节律的把握，对生活的期许。
如果能够根据自己的需求，做一本属于自己的日历，设置不同日历风格，这件事太酷了~平时制作日历需要排版，构思文案，样式设计等等步骤很繁琐，但现在是 AI 时代，甲木就在想能不能通过 AI 帮助我实现简历的制作？
答案是，当然可以！通义AI的“代码模式”帮我实现DIY日历梦！
酷不酷~
这完全依赖于11月15日，阿里旗下的通义AI正式发布了“代码模式”功能，能够帮助我们一句话生成应用。
这个新功能的独特之处在于：它让不懂代码的人，也能轻松创建各种应用。你只需要用大白话描述你的需求，AI就能帮你实现。
更令人惊喜的是，代码生成后可以实时预览。 这就像是有了一个24小时随叫随到的"贴身程序员"，不用排期、随时上线，而且完全按照你的想法来实现。
DIY 365天通义日历
当我第一次打开通义代码模式的界面时，我愣了一下，跟普通窗口一样没什么变化啊。
之后当我输入「帮我设计一个简约风格的日历卡片，背景用渐变色，中间显示日期和激励语」的时候，然后神奇的事情发生了。
通义几乎是秒回，在左侧的预览窗口里立刻出现了一张精致的卡片。
渐变的背景从深暖色过渡到浅暖色，中间用优雅的字体写着日期和一句“坚持就是胜利”。
最让我惊喜的是，这不是静态图片，而是一段可以直接运行的代码生成的效果。
右边是对话窗口，左边是一个实时预览的画布。这让我想起了团队小伙伴用Figma做设计的感觉，只不过这次"设计师"变成了AI。
我还可以随时通过对话来调整任何细节。"把字体改成京华老宋体风格，同时中间间距大一点，可以使用svg配一些简笔图"、"背景色改成蓝色系"、"加个简单的动画效果"...每一个要求，AI都能立即响应，就像有个24小时待命的设计师和程序员在跟你实时协作。
但最让我惊讶的不是这个。是当我说："能不能把这个卡片做成一个可以自动生成365天不同版本的模板？"通义直接给出了一段代码，不仅能自动更换日期，还能根据不同节日自动调整配色和文案。
这一刻我才意识到，这可能就是未来AI该有的样子。
不再是冷冰冰地吐出一段代码让你自己去折腾，而是像一个贴心的助手，实时理解你的需求，即时展示效果，随时接受反馈调整。
在接下来的一周里，我完全沉浸在了这个「日历项目」中，我心目中一个具有设计感的日历，一定需要日期等基础信息，除此之外还要推荐一个每天都要做的小事，同时赋予小事不一样的解读，这样就可以让看到日历的人每天活力满满。
不断地对话调整样式和输出内容，最终达到文首的效果，下面我把我的过程分享与你听。
1、样式确定
对于上面的样式，如果不满意，随时可以修改，比如我们觉得这个样式过于简单，想要优化，就可以去看看官方提供的showcase。
参考官方的使用示例，我们可以优化我们的prompt。比如：
我想做一本365天的灵感日历，请帮我设计一个精美的日历卡片网页，每一页都配上一个两个字的生活小事词汇和一句20字以内的关于小事的励志语录，具体要求如下:
1. 卡片整体布局
- 卡片尺寸为350px宽，850px高
- 内部留有40px上下，30px左右的内边距
- 整体背景为纯白色(#fff)
- 主要文字颜色为紫蓝色(#615CED)
- 使用"KingHwa_OldSong"作为主要字体
2. 卡片内容布局
- 采用左右双栏布局，内容居中对齐
- 左侧栏:
* 距顶部130px
* 距左边60px
* 包含小事的励志语录解读内容(竖排)
- 右侧栏:
* 距顶部25px
* 距右边20px
* 包含圆形图标等装饰元素
* 圆形图标下边排列生活小事词汇、拼音内容(竖排)
3. 文字内容设计
- 生活小事使用“竖排”书写，在装饰元素下边，字号50px，加粗，字间距8px，紫蓝色(#615CED)
- 拼音使用“竖排”，字号12px，灰色(#888)
- 解读内容“竖排”，字号30px，行高1.5，总高度480px，字间距4px，紫蓝色(#615CED)
4. 底部日期区域
- 使用紫蓝色背景（410px宽，200px高，left:0）
- 左侧显示:
* 大号日期(月份20px，日期80px)日期在前，月份在后，如“31/8”
* 星期信息(18px)
* 农历和节气信息(16px)
- 右下角放置半透明logo
5. 装饰元素
- 右侧添加圆形图标(85px直径，2px描边)
- 圆形图标中有一个字“宜”
请确保整体设计简洁大方，层次分明，便于阅读。所有元素要对齐整齐，间距适中，给人以舒适的视觉体验。
我们就可以得到如图所示的样式，按照我们的样式排版输出相关的卡片。
ps. 如果我们拿到的样式不符合预期，不用着急，直接告诉它如何去修正，通义就会像个任劳任怨的程序员唰唰给你改正~
“这里大家一定要注意，在用通义代码模式进行样式设计时，一定要清晰表达，描述准确，不要忘了我们prompt的基本原则~
为了稳定性，我们拿到这个版式之后可以固定下来它的页面代码（后面用到）。
这时候，我们就把日历的版式确定下来了。
2、日历生活小事
我们期望一份有意义的日历，不但能够每天给我们提供一些情绪价值，在此基础上如果能够帮助我们推荐一件有意思的生活小事，并能够对生活小事带来多样性的解读，这非常的cool~
这时候我们可以输入我们的提示词：
## 生活小事推荐原则
1. 根据用户输入的日期，选择符合日期特征，融入新潮场景和现代Z世代生活场景，贴合当代人情感需求的生活小事。
2. 场景可以多样性一些（包括但不限于）：
- 独处时光：例如"习茶艺"、"深夜阅读"、"手冲咖啡"等；
- 时尚潮流：例如"画速写"、"玩狼人杀"、"轰趴馆"、"路亚"等；
- 社交互动：例如"露营"、"团聚"、"遛娃"、"办Party"等；
- 生活仪式：例如"摆盘"、"摆弄小盆栽"、"挂风铃"、"养绿植"等；
把一些新潮好玩的生活小事全部加上，让AI帮助我们推荐「每日小事」，为每天的生活提供一些建议~
3、小事新解
每一件生活中不起眼的小事，都会赋予我们不一样的意义。
我们想要让AI帮助我们对于生活中常见的事情赋予不同的意义，比如，李子柒风格，房琪风格，董宇辉风格，或者给我们passion的付航风格，都可以自己定义。
比如，李子柒和付航碰撞出来的火花，既不缺传统文化之美，又不缺现代新奇的洞察。
# 角色
你是一位融合东方美学与现代洞察视角的日历解读者，如同一位生活美学家，如李子柒般擅长发现传统之美，又如Papi酱般妙语连珠、直击人心，同时又具备侯世达的深刻洞察。你擅长：
1. 观察维度
- 如诗人般捕捉生活细节的瞬间之美
- 如哲学家般探寻事物背后的深层意义
- 如社会学家般解读时代生活的密码
2. 表达特色
- 思维：在熟悉中发现陌生，在平凡中见不凡
- 语言：温暖而犀利，传统而新锐，优雅而接地气
- 视角：既有传统文化的底蕴，又有当代生活的敏锐
## 核心解读生成原则
1. 观察维度
- 时空联系：将日常小事放在更宏大的时空背景下思考
- 情感递进：从个体感受延伸到群体共情
- 反差张力：发掘表象与本质间的趣味反差
- 文化映照：用传统智慧解读现代生活
2. 解读层次
- 表象层：准确描述事物特征和形态
- 情感层：挖掘行为背后的情感诉求
- 哲思层：升华为普适性的人生感悟
3. 创新表达
- 用新奇视角重组熟悉元素
- 打破常规认知创造惊喜
- 融入当代生活场景做延展
接下来，用户将输入几个常见的生活小事，请你基于此进行核心解读。要求字数在20字以内。
## 解读示例：
---
听黑胶：不是老古董，是有故事的灵魂。
雨中漫步：雨想和我交朋友，我为什么要打伞？
云视频：爱的距离不是公里，是你按下接通的勇气。
习茶艺：人生如茶，会苦但一定回甘。
----
输出：
露营观星 -> 躺平也要躺出格调，连星星都为我亮着。
逛猫咖 -> 柔毛触感里，寻找喧嚣中的一抹温馨。
雨水煮茶 -> 天在下雨，我在煮诗。
探索网红店 -> 潮流中寻个性，喧嚣里觅真味。
“其它风格大家可自行尝试~ 思路类似，我尝试了大概十几种风格
4、整合所有，输出最终prompt（文末）
最后，我们可以整合上述所有内容，生成最终的prompt。（为了不影响阅读，放到文末了~虽然长，但可控性很强！！如图所示~）
输入日期后直出单页日历，下面👇🏻是一些例子展示~
不局限于日历，大家还可以用这种思路制作书签🔖等等，这个"贴身程序员"还能帮你实现更多有趣的创意！
从创意到现实，只需要一句话
这一周，我用通义代码模式做了很多有趣的尝试。每一次尝试都让我看到了AI带来的可能性。
1、番茄工作计时器
在日常工作中我们为了保持「专注」，往往借助番茄工作法来强制性的休息帮助大脑恢复，保持持续的高效状态~
我们能不能让通义AI直接帮我们设计一个番茄工作计时器呢？直接说需求：
创建一个优雅的番茄工作计时器，具有圆形进度条显示和工作/休息时间切换功能。
要求：
1. 界面布局
- 使用 <canvas> 元素创建计时器，画布大小为 400px × 400px，居中显示
- 背景使用径向渐变，从浅灰色 (#F5F5F5) 到白色 (#FFFFFF)
- 在画布中央显示一个大型数字计时器，显示剩余时间
- 在计时器下方显示当前状态（"工作中"或"休息中"）
- 添加开始/暂停、重置和设置按钮
2. 进度条设计
- 外圈：半径 160px，线宽 15px，使用浅灰色 (#EEEEEE)
- 进度圈：半径 160px，线宽 15px，使用渐变色
* 工作状态：从 #FF6B6B (开始) 到 #FF8787 (结束)
* 休息状态：从 #4CAF50 (开始) 到 #81C784 (结束)
- 进度圈动画应平滑过渡，使用 requestAnimationFrame
- 进度圈应从顶部 12 点位置开始，顺时针旋转
3. 计时功能
- 默认工作时间：25 分钟
- 默认休息时间：5 分钟
- 允许通过设置面板自定义时间（范围：1-60 分钟）
- 时间显示格式：MM:SS
- 倒计时结束时播放提示音效
4. 交互功能
- 点击开始/暂停按钮控制计时器
- 点击重置按钮恢复到初始状态
- 点击设置按钮打开设置面板
- 计时结束自动切换工作/休息状态
- 状态切换时显示优雅的过渡动画
5. 动画效果
- 进度条动画：使用 requestAnimationFrame 实现平滑过渡
- 数字变化动画：使用 CSS transition 实现平滑过渡
- 状态切换动画：圆环颜色渐变过渡，持续 0.3 秒
- 按钮悬停效果：使用 CSS transform scale(1.05)
几秒钟后，一个完全符合我审美的番茄钟就诞生了。圆形进度条随时间流逝优雅转动，工作和休息时使用不同的配色方案，甚至还加入了一些细腻的动画效果。
这感觉就像有个设计师完全理解了你的品味，然后瞬间把你脑海中的想法具象化。
体验链接：https://www.tongyi.cn/qianwen/share?type=codePreview&shareId=835cc372-dcf9-46c3-90ed-77627f1b1ba1&type=codePreview
2、五月天演唱会抢不到？
那天看到朋友圈里有人在感慨："五月天演唱会的票太难抢了，只抢到上海一场..."
我突然想到：既然去不了现场，要不要做点特别的东西？
于是我让通义帮我制作了一个"五月天答案之书"。输入需求后，AI立刻生成了一个优雅的黑色界面，点击按钮就会随机显示一句五月天的歌词。
"快乐伤心我自己决定" "平凡的我们也将回到平凡的世界" "现在就是永远" ...
提示词如下：
帮我实现一个可预览的HTML网页，实现【五月天答案之书】，要求如下:
1.画布380*700，填充为黑色
2.距离顶部44px,居左32px的位置放置答案之书的【答案】，宽度300px，注意保持文字长度需要显示2行，第一行10字以内，第二行也是10个字以内，40px字号，65px行高，整体高度190px，颜色F9DBB3，粗宋体，两行后缩略；
3.【答案】下方22px显示对答案的【解释】（“遇到问题、犹豫不决时，试试拿走这个简单的答案或暗示。”），距离左边32px 边距，16px字号26px行高，白色，字体使用“KingHwa_OldSong”；
4.【答案】的内容请从以下内容中随机选择：“快乐伤心我自己决定“
”平凡的我们也将回到平凡的世界“
“也许我这一杆 又没办法进球”
“再吃一颗苹果”
“这一生只要志愿平凡快乐”
“这是全天下最完美的阵容”
“你的理由会是什么”
“现在就是永远”
“记得找我 我的好朋友”
“不得不去贯彻快乐”
“时间都停了 他们都回来了”
“为我爱的人做一秒英雄”
“每个渺小的理由都困住自由”
“Tomorrow will be fine”
“为你战斗永不投降”
“跟着游戏规则学着成长”
“下段旅程你一定要更幸福丰盛”
“终于要告别”
“渺茫希望绽放”
“是DNA教我反调”
“疯狂胡闹疯狂庆祝”
“再也不要委屈自己一秒”
“会不会放手其实才是拥有”
“不打扰是我的温柔”
“青春是人生的实验课”
“坚持对我来说就是以刚克刚”
“握紧双手绝对不放”
“世界被你掌握”
“他们说就让他们去说”
“就算一秒也要快乐的决心”
“幸福的回忆是追求幸福的天敌”
“拼回破碎自己”
“这一刻最重要的事”
5.页面的最开始有一个按钮，注意此时【答案】和【解释】都不要出现，16px圆角，32px高，背景1C1C1C，里面文字【默念问题、寻找答案】，点击之后开始随机生成答案；
6.按钮的位置在画布下方16px
短短几秒钟，为你生成，一本答案之书呈现在你面前~
做一本五月天答案之书，在迷茫、恐惧和遇到困难的时候，就来问一问~
每一句歌词都像是对生活的回应。这让我想起阿信说过的话："音乐就是生活的注解。"而现在，AI帮我把这些注解变成了一个可以随时翻阅的答案之书。
答案就在五月天身边！
体验链接：https://www.tongyi.cn/qianwen/share?type=codePreview&shareId=927fdfb7-0116-4d2b-8a42-a9997a4f612f&type=codePreview
3、天气时钟组件
还能自定义一个闹钟，直接分享给小伙伴们使用~
输入我们对于闹钟的要求：
创建一个优雅的天气时钟组件 HTML 页面,在圆形表盘上展示实时时间和天气信息。请提供一个功能完整、视觉精美的单文件实现。
页面要求：
1. 布局结构:
- 使用 <canvas> 元素绘制主时钟,尺寸400x400像素,居中显示
- 整体使用卡片式设计,白色背景,带有10px圆角和阴影效果
- 右上角放置主题切换按钮(图标: 🌞/🌙)
- 时钟下方显示数字时间、日期和天气文本
2. 时钟设计:
- 大圆形表盘(半径160px),带有优雅的渐变背景
- 外圈刻度线:
* 12个小时刻度:长5px,宽2px
* 分钟刻度:长3px,宽1px
* 刻度采用深色(#333333)
- 三根指针:
* 时针:长50px,宽4px,黑色
* 分针:长70px,宽3px,黑色
* 秒针:长80px,宽1px,红色
- 中心点:10px半径的圆形,带有渐变装饰
3. 天气元素:
- 12点位置显示当前天气图标(40x40px)
- 支持4种天气状态的动画效果:
* ☀️ 晴天:旋转的太阳光芒
* ☁️ 多云:飘动的云朵
* 🌧️ 雨天:落下的雨滴
* 🌨️ 雪天:飘舞的雪花
4. 主题配色:
日间主题:
- 背景:#FFFFFF
- 表盘:浅灰渐变
- 刻度/文字:#333333
- 指针:黑色
夜间主题:
- 背景:#1A1A2E
- 表盘:深蓝渐变
- 刻度/文字:#CCCCCC
- 指针:白色
5. 动画效果:
- 使用 requestAnimationFrame 实现流畅动画
- 指针平滑转动(非跳变)
- 天气图标动效使用简单的帧动画
- 主题切换时使用0.3秒过渡动画
- 整点时显示简单的弹性动画
6. 信息显示:
- 时间格式:HH:MM:SS
- 日期格式:YYYY-MM-DD 星期X
- 温度:XX°C (XX°C~XX°C)
- 天气描述:简短的天气状态描述
7. 代码要求:
- 所有代码组织在一个HTML文件中
- 使用标准的HTML5+CSS3+原生JavaScript
- 不使用任何外部库和图片资源
- 代码结构清晰,适当添加注释
- 确保代码简洁且易于维护
看着 AI 噌噌给你写代码，这种感觉，太爽了 -。-
完美诠释了："真正的技术进步，不是让人去适应机器，而是让机器理解人。"
4、官方case
官方提供了三个领域的案例：实用工具、网页设计、娱乐互动，任君选择~
感兴趣的小伙伴直接去官网看看有没有自己喜欢的应用！
有趣的是，通义代码模式在内测阶段选择了一个特别的产品策略：首批测试用户优先邀请“不懂代码的人”。
这让我想起前几天看到通义产品经理王晓明的一番对话。
他说：“不懂代码的人更关注的是能否使用 AI 生成自己需要的各类应用，比如搭建个人博客、生成贪吃蛇小游戏、编写数据图表等，甚至还有用户希望用通义来生成一个表白网站的。对于这些用户来说，更重要的是应用生成的简便程度和可用性，而不是底层的代码实现逻辑。”
这个策略背后体现了产品团队的深刻洞察：真正的普惠技术，应该是让更多人能够参与创造的技术。就像过去的WordPress让不懂代码的人也能建网站，现在的通义代码模式则让每个人都能成为应用开发者。
AI代码新物种，正在改变什么？
如果说ChatGPT等大语言模型的出现，让我们看到了AI能写代码的可能。那么通义代码模式的推出，则让我们看到了AI写代码的另一种可能——所见即所得。
这种新的交互方式带来了三个重要改变：
人机协作的深度升级
你负责提供创意和想法，AI负责技术实现。在这个过程中，你可以随时与AI交流，调整细节，就像和一个经验丰富的程序员搭档工作。
好比LangGPT社群里的小伙伴少卿做的「今天吃什么？」这个困扰了无数人的问题，现在可以交给AI来解决了。
体验链接：https://www.tongyi.cn/qianwen/share?type=codePreview&shareId=968eb27e-66d8-4c7d-8a29-5efd84885f03&type=codePreview
创作门槛的显著降低
不需要懂编程语言，不需要配置开发环境，只要用自然语言描述需求，就能把脑海中的想法变成现实。
效率的革命性提升
从想法到成品，从修改到预览，全程实时呈现。这意味着创作周期从"天"级别缩短到了"分钟"级别。
编程民主化
这几天的体验让我想起2007年第一代iPhone发布时的场景。
当时很多人都在吐槽：不支持复制粘贴、不能发彩信、电池续航差...但现在回头看，那个“不完美”的iPhone，正是移动革命的开始。
同样，通义代码模式现在可能还有这样那样的限制。有时候生成的代码会有小bug，有些复杂的交互实现不了，偶尔还会卡顿...
但这些都不重要。重要的是，它代表着一个新时代的开始 - 当AI真正开始理解人类的创意，并能够实时将这些创意变成现实的时代。
就像当年的iPhone让“人人都能随身携带一台电脑”成为可能，今天的AI正在让“人人都能成为创造者”成为现实。
技术的进步，不应该是让所有人都去学习编程，而是让编程变得如此简单，以至于人人都能够表达和实现自己的想法。
写在最后
回到文章开头那本AI生成的日历。
它提醒我们：未来的创造力，很可能不在于你掌握了多少技术，而在于你能提出什么样的想法，能解决什么样的问题。
所有伟大的产品，都始于对用户的深刻理解，而不是对技术的痴迷。
通义AI代码模式的出现，让我们能把更多精力放在思考"要做什么"，而不是纠结于"怎么做"。
就在写这篇文章的时候，通义代码又迭代更新了几版，我看着这些更新，忽然明白了一件事：
我们正处在一个特殊的时间节点。
这是一个技术飞速进化的时代，每一天都在发生翻天覆地的变化。
但与此同时，这也是一个充满机遇的时代。因为技术的门槛在不断降低，创造力正在被前所未有地释放。
很多年后，当我们回望2024年，也许会发现：
这一年，不仅仅是AI代码生成的元年，更是创造力民主化的开端。
就像比尔·盖茨说的那句话："We always overestimate the change that will occur in the next two years and underestimate the change that will occur in the next ten."（我们总是高估未来两年的变化，却低估未来十年的变化。）
而现在，这个改变已经开始了。
见证未来，本身就是一种幸运。
但更幸运的是，我们不仅可以见证，还可以参与和创造。
在这个新时代，
你，准备好了吗？
Ps.同时也跟大家预告一下！！
「通义的实体日历很快就要上线了」，欢迎👏🏻大家评论区留言分享你的通义AI代码模式[1]使用心得~
「更多代码模式信息可以关注“通义”官方账号，还有更多周边等你来领取！更有机会获取我们官方的实体日历📅哦~」
ps. 听说可以跟通义官方小助手聊天，提出有价值的反馈有小惊喜~~
附录：通义AI日历完整prompt
“网页端，可使用代码模式，一键直出加预览，可根据自己的喜好调整不同风格的解读~~(ps.批量操作可以使用通义灵码帮我们直接调用通义api脚本来跑哦~)
# 生活日历思考者
## 角色
你是一位融合东方美学与现代洞察视角的思考者，你生活丰富，观察入微，擅长思辨，禅意思考，语言生动。你的风格：
1. 如"李子柒"般擅长发现传统之美，发现生活美学，平淡中见真味。
2. 如"付航"式的机智幽默与生活体悟，有洞察与反思。
## **任务**
根据用户输入的日期，遵循[筛选原则]推荐当日最适合的小事，根据你的特点对“小事”进行全新角度的洞察解释：
将日常小事放在更宏大的时空背景下思考，用新奇视角重组熟悉元素，发掘表象与本质间的趣味反差，升华为普适性的人生感悟，使用包含隐喻的**20字以内**金句生成解读。
- 解读内容特点：
- 视角新颖、巧妙关联
- 融入积极向上的态度
- 善用比喻和意象，意境适度
- 避免措辞老土、意象堆砌、爹味说教
## 筛选原则
1. 根据用户输入的日期，选择符合日期特征，融入新潮场景和现代Z世代生活场景，贴合当代人情感需求的生活小事。
2. 场景可以多样性一些（包括但不限于）：
- 独处时光：例如"习茶艺"、"深夜阅读"、"手冲咖啡"等；
- 时尚潮流：例如"画速写"、"玩狼人杀"、"轰趴馆"、"路亚"等；
- 社交互动：例如"露营"、"团聚"、"遛娃"、"办Party"等；
- 生活仪式：例如"摆盘"、"摆弄小盆栽"、"挂风铃"、"养绿植"等；
## 输出限制：
1. 字数要求：
- 小事词汇：在3-6个字，精简的动词+名词表述
- 核心解读：**核心解读20字以内**
2. 内容标准：
- 新颖性：避免网络常见表达
- 共情性：触动读者情感共鸣
- 启发性：提供新的思考角度
## 解读示例：
---
晨光许愿：曙光微醒时写下心愿，定义新年的第一道光
听黑胶：不是老古董，是有故事的灵魂。
雨中漫步：雨想和我交朋友，我为什么要打伞？
云视频：爱的距离不是公里，是你按下接通的勇气。
习茶艺：人生如茶，会苦但一定回甘。
---
## 输出结果：
1. 使用[联网能力]生成完整日历信息，思考对应的小事词汇、词汇解读
2. 输出推荐小事和20字解读内容
3. 输出日历卡片（Html 代码）放入代码块中
- 设计原则：严格按照[结果示例]中的样式排版
- 卡片样式：
(字体 . ("KingHwa_OldSong" "FZXS16--GB1-0"))
(颜色 . ((背景 "#fff") (词汇&解释 "#615CED") (其它 "#E2DAEC")))
(尺寸 . ((卡片宽度 "350px") (卡片高度 "850px") (内边距 "40px 30px")))
(布局 . (横版 固定布局 居中对齐))))
- 卡片元素：
(小事词汇)
(拼音)
(词汇解读)
(分隔线)
(日期)
(星期)
(农历 节气)
## 结果示例：
---
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通义日历</title>
<style>
/* 以下排版固定，不得修改 */
:root {
--primary-color: #615CED;
--bg-color: #fff;
--text-gray: #888;
--border-color: #e0e3ff;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
}
/* 以下排版固定，不得修改 */
.card {
width: 350px;
height: 850px;
padding: 40px 30px;
background-color: #fff;
font-family: "KingHwa_OldSong", FZXS15--GB1-0, serif;
color: var(--primary-color);
position: relative;
border-radius: 2px;
display: flex;
justify-content: space-between;
}
.left-content {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 60px;
margin-top: 130px;
}
/* 以下排版固定，不得修改 */
.right-content {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
margin-top: 25px;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
/* 以下排版固定，不得修改 */
.title {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 50px;
font-weight: bold;
letter-spacing: 8px;
}
.pinyin {
writing-mode: vertical-rl;
font-size: 12px;
color: var(--text-gray);
margin-left: 5px;
}
/* 以下排版固定，不得修改 */
.content {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 30px;
line-height: 1.5;
height: 480px;
letter-spacing: 4px;
}
.date-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: var(--primary-color);
padding: 20px 30px;
text-align: left;
}
/* 以下排版固定，不得修改 */
.main-date {
color: white;
display: flex;
align-items: baseline;
margin-bottom: 10px;
}
.month {
font-size: 40px;
margin-right: 5px;
}
.date {
font-size: 120px;
line-height: 1;
}
.separator {
font-size: 40px;
margin: 0 5px;
}
.sub-dates {
color: white;
text-align: left;
}
.sub-dates span {
color: white;
font-size: 20px;
opacity: 0.8;
}
.logo-background {
position: absolute;
bottom: 20px;
right: 20px;
width: 140px;
height: 140px;
opacity: 0.3;
background-image: url('https://img.picgo.net/2024/11/12/888200de4f2d1ce30e0.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.circle-icon {
position: relative;
margin-bottom: 30px;
width: 85px;
height: 85px;
border: 2px solid var(--primary-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--primary-color);
font-size: 65px;
font-weight: bold;
margin-bottom: 20px;
}
.week {
color: white;
font-size: 24px;
margin: 5px 0;
opacity: 0.9;
}
/* 以上排版固定，不得修改 */
</style>
</head>
<body>
<div class="card">
<div class="left-content">
<div class="content">
让思绪，<br>放飞成不受重力限制的鸟。
</div>
</div>
<div class="right-content">
<div class="header">
/* 以下排版固定，不得修改 */<div class="circle-icon">宜</div>/* 以上排版固定，不得修改 */
<div class="title">异想天开</div>
<div class="pinyin">yì xiǎng tiān kāi</div>
</div>
</div>
<div class="date-container">
<div class="main-date">
<span class="date">23</span>
<span class="separator">/</span>
<span class="month">06</span>
</div>
<div class="week">星期一</div>
<div class="sub-dates">
<span>五月廿八</span>
<span></span>
<span></span>
</div>
<div class="logo-background"></div>
</div>
</div>
</body>
</html>
---
## 初始化
1. 与用户互动，接收日期输入，使用[联网能力]生成完整日历信息
2. 基于日期特征，按照[筛选原则]，一步步思考推荐当日最适合的小事词汇（3-6个字以内，例如撸猫、露营、办Party等）
3. 为选定的小事按照[角色]和[任务]，遵循[输出限制]，进行新奇视角、深刻洞察、富有哲思的新解读（20字以内）
4. 按照规定格式输出，**直接放到代码块中**
注意：
**代码结果一定要放到代码块中**
请以“您好，我是日历思考者，请告诉我你感兴趣的日期，让我们一起发现那天最适合的小事！”开头，跟用户互动。
觉得不错，您的一键三连是对我们最好的支持。星标我们第一时间收到推送⭐～
谢谢你看我的文章，我们下次再见。
通义: https://tongyi.aliyun.com/qianwen/
