[{"data":1,"prerenderedAt":690},["ShallowReactive",2],{"page-/post/imgx/imgx-prompt":3,"surrounding-page":681},{"id":4,"title":5,"author":6,"body":7,"date":670,"description":28,"extension":671,"group":6,"lastmod":672,"meta":673,"navigation":45,"path":674,"rawbody":675,"seo":676,"showTitle":6,"stem":677,"tags":678,"versions":6,"__hash__":680},"content/post/imgx/imgx-prompt.md","生成卡片的超长提示词",null,{"type":8,"value":9,"toc":656},"minimark",[10,14,18,22,321,325,500,503,506,514,517,522,526,529,532,557,561,575,578,589,592,612,615,623,626,652],[11,12,13],"h2",{"id":13},"提示词",[15,16,17],"p",{},"打磨了一下生成模板的提示词，用来批量生产模板",[19,20,21],"h3",{"id":21},"基于图片生成模板",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-txt shiki shiki-themes github-light","我会给你一个图片，分析内容，并将其转化为美观漂亮的比例相同的 HTML 元素：\n\n## 内容排版规范\n    - 整体风格按照图片中的排版\n    - 如何图片中有明显的样式不美观，则去除\n    - 使用清晰的视觉层次结构，突出重要内容\n    - 配色方案应专业、和谐，适合在社交媒体传播\n## 技术规范\n    - 使用 Vue3（通过CDN引入）、Tailwindcss3(通过CDN引入)\n    - 使用 Vue3 渲染内容时，template 标签中只能使用两种方式定义样式\n        1. class。如 class=\"w-full h-full\"\n        2. :style=\"{ color: myColor }\"。这种方式用于接受 props 的参数，要满足 vue 语法\n        3. 两者为互补关系，不能修改的样式全部用 class实现，动态传入的用 style 实现\n        4. 至少在其中一个中声明 flex 布局\n    - 使用 Vue3 渲染内容时，script 中只允许使用 props，props 中只能接受和内容、样式有关的数据。不允许存在任何交互逻辑\n    - template 和 props 的内容要独立且完整，要用单独的变量存储。\n    - template 中的内容要用 props 传入值或默认值代替，不能把 template 的内容写死。\n    - CSS 请严格按照【CSS要求】，务必使用 tailwindcss3 的语法，同时要使用`:style=\"{}\"`语法来保证能接受 props 来改变颜色、字号、间距等属性\n    - CSS或 props 中不允许出现 undefined，必须有明确的值，如 width: 100%\n    - html元素只能使用 div 元素\n    - 每个 div 必须显式使用 flex 布局，必须具备 flex class\n    - 不能使用 z-index 属性\n    - 不能使用 satori 不支持的属性\n    - 如果发现现有条件不能生成一模一样的样式，则放弃和原图保持一致，换一种简洁的样式来代替\n    - 最外层 div 以及第二层 div 必须使用 `w-full h-full` 来占满父元素\n    - 如果图片底部存在渐变色或底色，内容存在底色，要特别注意样式的准确性，必须表现在 Vue 组件内\n    - 只允许最终生成单个HTML文件\n    - 在 Vue 组件的外层增加一个固定宽高的 div 容器，用来模拟其固定尺寸的父元素\n    - 在 Vue 组件的上方增加两个按钮\n        - 1.复制 Template，点击时把 Vue 组件中的 Template 变量的内容当做字符串复制到粘贴板，要求和 template 共用一个变量\n        - 2.复制 Props，点击时根据 Vue 组件中的 Props 对象的格式，生成key-value格式的对象字符串复制到粘贴板。\n    - 代码中不要出现任何注释\n## 媒体资源\n    - 忽略所有媒体资源\n## 图标与视觉元素\n    - 忽略所有 emoji\n    - 忽略所有 图标\n    - 忽略所有背景图、复杂阴影效果\n    - 不需要存在交互效果，只要视觉效果\n## 性能优化\n    - 确保页面加载速度快，避免不必要的大型资源\n## 输出要求\n    - 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript\n    - 代码中不要出现任何注释\n    - 确保代码符合W3C标准，无错误警告\n    - 页面在不同浏览器中保持一致的外观和功能\n\n请根据上传图片，基于 Vue3 创建出合适的卡片 HTML 网页内容。\n","txt","",[30,31,32,40,47,53,59,65,71,77,83,89,95,101,107,113,119,125,131,137,143,149,155,161,167,173,179,185,191,197,203,209,215,221,227,233,239,245,251,257,263,269,275,281,287,293,298,304,310,315],"code",{"__ignoreMap":28},[33,34,37],"span",{"class":35,"line":36},"line",1,[33,38,39],{},"我会给你一个图片，分析内容，并将其转化为美观漂亮的比例相同的 HTML 元素：\n",[33,41,43],{"class":35,"line":42},2,[33,44,46],{"emptyLinePlaceholder":45},true,"\n",[33,48,50],{"class":35,"line":49},3,[33,51,52],{},"## 内容排版规范\n",[33,54,56],{"class":35,"line":55},4,[33,57,58],{},"    - 整体风格按照图片中的排版\n",[33,60,62],{"class":35,"line":61},5,[33,63,64],{},"    - 如何图片中有明显的样式不美观，则去除\n",[33,66,68],{"class":35,"line":67},6,[33,69,70],{},"    - 使用清晰的视觉层次结构，突出重要内容\n",[33,72,74],{"class":35,"line":73},7,[33,75,76],{},"    - 配色方案应专业、和谐，适合在社交媒体传播\n",[33,78,80],{"class":35,"line":79},8,[33,81,82],{},"## 技术规范\n",[33,84,86],{"class":35,"line":85},9,[33,87,88],{},"    - 使用 Vue3（通过CDN引入）、Tailwindcss3(通过CDN引入)\n",[33,90,92],{"class":35,"line":91},10,[33,93,94],{},"    - 使用 Vue3 渲染内容时，template 标签中只能使用两种方式定义样式\n",[33,96,98],{"class":35,"line":97},11,[33,99,100],{},"        1. class。如 class=\"w-full h-full\"\n",[33,102,104],{"class":35,"line":103},12,[33,105,106],{},"        2. :style=\"{ color: myColor }\"。这种方式用于接受 props 的参数，要满足 vue 语法\n",[33,108,110],{"class":35,"line":109},13,[33,111,112],{},"        3. 两者为互补关系，不能修改的样式全部用 class实现，动态传入的用 style 实现\n",[33,114,116],{"class":35,"line":115},14,[33,117,118],{},"        4. 至少在其中一个中声明 flex 布局\n",[33,120,122],{"class":35,"line":121},15,[33,123,124],{},"    - 使用 Vue3 渲染内容时，script 中只允许使用 props，props 中只能接受和内容、样式有关的数据。不允许存在任何交互逻辑\n",[33,126,128],{"class":35,"line":127},16,[33,129,130],{},"    - template 和 props 的内容要独立且完整，要用单独的变量存储。\n",[33,132,134],{"class":35,"line":133},17,[33,135,136],{},"    - template 中的内容要用 props 传入值或默认值代替，不能把 template 的内容写死。\n",[33,138,140],{"class":35,"line":139},18,[33,141,142],{},"    - CSS 请严格按照【CSS要求】，务必使用 tailwindcss3 的语法，同时要使用`:style=\"{}\"`语法来保证能接受 props 来改变颜色、字号、间距等属性\n",[33,144,146],{"class":35,"line":145},19,[33,147,148],{},"    - CSS或 props 中不允许出现 undefined，必须有明确的值，如 width: 100%\n",[33,150,152],{"class":35,"line":151},20,[33,153,154],{},"    - html元素只能使用 div 元素\n",[33,156,158],{"class":35,"line":157},21,[33,159,160],{},"    - 每个 div 必须显式使用 flex 布局，必须具备 flex class\n",[33,162,164],{"class":35,"line":163},22,[33,165,166],{},"    - 不能使用 z-index 属性\n",[33,168,170],{"class":35,"line":169},23,[33,171,172],{},"    - 不能使用 satori 不支持的属性\n",[33,174,176],{"class":35,"line":175},24,[33,177,178],{},"    - 如果发现现有条件不能生成一模一样的样式，则放弃和原图保持一致，换一种简洁的样式来代替\n",[33,180,182],{"class":35,"line":181},25,[33,183,184],{},"    - 最外层 div 以及第二层 div 必须使用 `w-full h-full` 来占满父元素\n",[33,186,188],{"class":35,"line":187},26,[33,189,190],{},"    - 如果图片底部存在渐变色或底色，内容存在底色，要特别注意样式的准确性，必须表现在 Vue 组件内\n",[33,192,194],{"class":35,"line":193},27,[33,195,196],{},"    - 只允许最终生成单个HTML文件\n",[33,198,200],{"class":35,"line":199},28,[33,201,202],{},"    - 在 Vue 组件的外层增加一个固定宽高的 div 容器，用来模拟其固定尺寸的父元素\n",[33,204,206],{"class":35,"line":205},29,[33,207,208],{},"    - 在 Vue 组件的上方增加两个按钮\n",[33,210,212],{"class":35,"line":211},30,[33,213,214],{},"        - 1.复制 Template，点击时把 Vue 组件中的 Template 变量的内容当做字符串复制到粘贴板，要求和 template 共用一个变量\n",[33,216,218],{"class":35,"line":217},31,[33,219,220],{},"        - 2.复制 Props，点击时根据 Vue 组件中的 Props 对象的格式，生成key-value格式的对象字符串复制到粘贴板。\n",[33,222,224],{"class":35,"line":223},32,[33,225,226],{},"    - 代码中不要出现任何注释\n",[33,228,230],{"class":35,"line":229},33,[33,231,232],{},"## 媒体资源\n",[33,234,236],{"class":35,"line":235},34,[33,237,238],{},"    - 忽略所有媒体资源\n",[33,240,242],{"class":35,"line":241},35,[33,243,244],{},"## 图标与视觉元素\n",[33,246,248],{"class":35,"line":247},36,[33,249,250],{},"    - 忽略所有 emoji\n",[33,252,254],{"class":35,"line":253},37,[33,255,256],{},"    - 忽略所有 图标\n",[33,258,260],{"class":35,"line":259},38,[33,261,262],{},"    - 忽略所有背景图、复杂阴影效果\n",[33,264,266],{"class":35,"line":265},39,[33,267,268],{},"    - 不需要存在交互效果，只要视觉效果\n",[33,270,272],{"class":35,"line":271},40,[33,273,274],{},"## 性能优化\n",[33,276,278],{"class":35,"line":277},41,[33,279,280],{},"    - 确保页面加载速度快，避免不必要的大型资源\n",[33,282,284],{"class":35,"line":283},42,[33,285,286],{},"## 输出要求\n",[33,288,290],{"class":35,"line":289},43,[33,291,292],{},"    - 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript\n",[33,294,296],{"class":35,"line":295},44,[33,297,226],{},[33,299,301],{"class":35,"line":300},45,[33,302,303],{},"    - 确保代码符合W3C标准，无错误警告\n",[33,305,307],{"class":35,"line":306},46,[33,308,309],{},"    - 页面在不同浏览器中保持一致的外观和功能\n",[33,311,313],{"class":35,"line":312},47,[33,314,46],{"emptyLinePlaceholder":45},[33,316,318],{"class":35,"line":317},48,[33,319,320],{},"请根据上传图片，基于 Vue3 创建出合适的卡片 HTML 网页内容。\n",[19,322,324],{"id":323},"让ai自主设计排版待完善","让AI自主设计排版（待完善）",[23,326,328],{"className":25,"code":327,"language":27,"meta":28,"style":28},"请基于 Vue3 在 HTML 中生成一个美观漂亮的卡片组件，同时满足以下要求：\n\n## 排版规范\n    - 整体长宽比为：3:4，用途为小红书、推特、朋友圈发帖\n    - 配色方案应具有科技感，以合理的渐变作为背景\n    - 文字必须成为视觉主体，占据页面至少70%的空间\n    - 运用3-4种不同字号创造层次感，关键词使用最大字号\n    - 主标题字号需要比副标题和介绍大三倍以上\n    - 主标题提取2-3个关键词，使用特殊处理（如描边、高亮、不同颜色）\n## 技术规范\n    - 使用 Vue3（通过CDN引入）、Tailwindcss3(通过CDN引入)\n    - 使用 Vue3 渲染内容时，template 标签中只能使用两种方式定义样式\n        1. class。如 class=\"w-full h-full\"\n        2. :style=\"{ color: myColor }\"。这种方式用于接受 props 的参数，要满足 vue 语法\n        3. 两者为互补关系，不能修改的样式全部用 class实现，动态传入的用 style 实现\n        4. 至少在其中一个中声明 flex 布局\n    - 使用 Vue3 渲染内容时，script 中只允许使用 props，props 中只能接受和内容、样式有关的数据。不允许存在任何交互逻辑\n    - template 和 props 的内容要独立且完整，要用单独的变量存储。\n    - template 中的内容要用 props 传入值或默认值代替，不能把 template 的内容写死。\n    - CSS或 props 中不允许出现 undefined，必须有明确的值，如 width: 100%\n    - html元素只能使用 div 元素\n    - 每个 div 必须显式使用 flex 布局，必须具备 flex class\n    - 不能使用 z-index 属性\n    - 不能使用 satori 不支持的属性\n    - 最外层 div 以及第二层 div 必须使用 `w-full h-full` 来占满父元素\n    - 如果图片底部存在渐变色或底色，内容存在底色，要特别注意样式的准确性，必须表现在 Vue 组件内\n    - 只允许最终生成单个HTML文件\n    - 在 Vue 组件的外层增加一个固定宽高的 div 容器，用来模拟其固定尺寸的父元素\n    - 在 Vue 组件的上方增加两个按钮\n        - 1.复制 Template，点击时把 Vue 组件中的 Template 变量的内容当做字符串复制到粘贴板，要求和 template 共用一个变量\n        - 2.复制 Props，点击时根据 Vue 组件中的 Props 对象的格式，生成key-value格式的对象字符串复制到粘贴板。\n    - 代码中不要出现任何注释\n## 输出要求\n    - 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript\n    - 代码中不要出现任何注释\n    - 确保代码符合W3C标准，无错误警告\n    - 页面在不同浏览器中保持一致的外观和功能\n## 用户输入内容\n\n请根据上述要求，生成一个在单一 HTML 中可使用的Vue3卡片组件\n",[30,329,330,335,339,344,349,354,359,364,369,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,462,466,470,474,478,482,486,491,495],{"__ignoreMap":28},[33,331,332],{"class":35,"line":36},[33,333,334],{},"请基于 Vue3 在 HTML 中生成一个美观漂亮的卡片组件，同时满足以下要求：\n",[33,336,337],{"class":35,"line":42},[33,338,46],{"emptyLinePlaceholder":45},[33,340,341],{"class":35,"line":49},[33,342,343],{},"## 排版规范\n",[33,345,346],{"class":35,"line":55},[33,347,348],{},"    - 整体长宽比为：3:4，用途为小红书、推特、朋友圈发帖\n",[33,350,351],{"class":35,"line":61},[33,352,353],{},"    - 配色方案应具有科技感，以合理的渐变作为背景\n",[33,355,356],{"class":35,"line":67},[33,357,358],{},"    - 文字必须成为视觉主体，占据页面至少70%的空间\n",[33,360,361],{"class":35,"line":73},[33,362,363],{},"    - 运用3-4种不同字号创造层次感，关键词使用最大字号\n",[33,365,366],{"class":35,"line":79},[33,367,368],{},"    - 主标题字号需要比副标题和介绍大三倍以上\n",[33,370,371],{"class":35,"line":85},[33,372,373],{},"    - 主标题提取2-3个关键词，使用特殊处理（如描边、高亮、不同颜色）\n",[33,375,376],{"class":35,"line":91},[33,377,82],{},[33,379,380],{"class":35,"line":97},[33,381,88],{},[33,383,384],{"class":35,"line":103},[33,385,94],{},[33,387,388],{"class":35,"line":109},[33,389,100],{},[33,391,392],{"class":35,"line":115},[33,393,106],{},[33,395,396],{"class":35,"line":121},[33,397,112],{},[33,399,400],{"class":35,"line":127},[33,401,118],{},[33,403,404],{"class":35,"line":133},[33,405,124],{},[33,407,408],{"class":35,"line":139},[33,409,130],{},[33,411,412],{"class":35,"line":145},[33,413,136],{},[33,415,416],{"class":35,"line":151},[33,417,148],{},[33,419,420],{"class":35,"line":157},[33,421,154],{},[33,423,424],{"class":35,"line":163},[33,425,160],{},[33,427,428],{"class":35,"line":169},[33,429,166],{},[33,431,432],{"class":35,"line":175},[33,433,172],{},[33,435,436],{"class":35,"line":181},[33,437,184],{},[33,439,440],{"class":35,"line":187},[33,441,190],{},[33,443,444],{"class":35,"line":193},[33,445,196],{},[33,447,448],{"class":35,"line":199},[33,449,202],{},[33,451,452],{"class":35,"line":205},[33,453,208],{},[33,455,456],{"class":35,"line":211},[33,457,214],{},[33,459,460],{"class":35,"line":217},[33,461,220],{},[33,463,464],{"class":35,"line":223},[33,465,226],{},[33,467,468],{"class":35,"line":229},[33,469,286],{},[33,471,472],{"class":35,"line":235},[33,473,292],{},[33,475,476],{"class":35,"line":241},[33,477,226],{},[33,479,480],{"class":35,"line":247},[33,481,303],{},[33,483,484],{"class":35,"line":253},[33,485,309],{},[33,487,488],{"class":35,"line":259},[33,489,490],{},"## 用户输入内容\n",[33,492,493],{"class":35,"line":265},[33,494,46],{"emptyLinePlaceholder":45},[33,496,497],{"class":35,"line":271},[33,498,499],{},"请根据上述要求，生成一个在单一 HTML 中可使用的Vue3卡片组件\n",[15,501,502],{},"修改生成卡片的样式时，只需要修改排版规范部分即可",[15,504,505],{},"测试：社交卡片",[23,507,512],{"className":508,"code":510,"language":511},[509],"language-text","## 排版规范\n- 仿照X/twitter的帖子格式来设计卡片\n- 排版规范、美观、整齐\n- 文字必须成为视觉主体，占据页面至少70%的空间\n- 运用3-4种不同字号创造层次感，关键词使用最大字号\n- 主标题字号需要比副标题和介绍大三倍以上\n- 主标题提取2-3个关键词，使用特殊处理（如描边、高亮、不同颜色）\n","text",[30,513,510],{"__ignoreMap":28},[15,515,516],{},"测试：列表",[23,518,520],{"className":519,"code":510,"language":511},[509],[30,521,510],{"__ignoreMap":28},[11,523,525],{"id":524},"satori-支持的-css","satori 支持的 css",[15,527,528],{},"以下是 Satori 支持的 CSS 属性：",[19,530,531],{"id":531},"布局相关",[533,534,535,539,542,545,548,551,554],"ul",{},[536,537,538],"li",{},"display：支持 none 和 flex，默认为 flex",[536,540,541],{},"position：支持 relative 和 absolute，默认为 relative",[536,543,544],{},"top、right、bottom、left：支持",[536,546,547],{},"width、height：支持",[536,549,550],{},"minWidth、minHeight、maxWidth、maxHeight：支持，但不支持 min-content、max-content 和 fit-content",[536,552,553],{},"margin 及其相关属性（marginTop、marginRight 等）：支持",[536,555,556],{},"gap：支持",[19,558,560],{"id":559},"灵活盒模型flex","灵活盒模型（Flex）",[533,562,563,566,569,572],{},[536,564,565],{},"flexDirection：支持 column、row、row-reverse、column-reverse，默认为 row",[536,567,568],{},"flexWrap：支持 wrap、nowrap、wrap-reverse，默认为 wrap",[536,570,571],{},"flexGrow、flexShrink、flexBasis：支持，其中 flexBasis 不支持 auto",[536,573,574],{},"alignItems、alignContent、alignSelf、justifyContent：支持",[19,576,577],{"id":577},"字体与文本",[533,579,580,583,586],{},[536,581,582],{},"fontFamily、fontSize、fontWeight、fontStyle：支持",[536,584,585],{},"tabSize、textAlign、textTransform、textOverflow、textDecoration、textShadow、lineHeight、letterSpacing、whiteSpace、wordBreak、textWrap：支持",[536,587,588],{},"WebkitTextStrokeWidth、WebkitTextStrokeColor：支持",[19,590,591],{"id":591},"背景",[533,593,594,597,600,603,606,609],{},[536,595,596],{},"backgroundColor：支持单个值",[536,598,599],{},"backgroundImage：支持 linear-gradient、radial-gradient、url，单个值",[536,601,602],{},"backgroundPosition：支持单个值",[536,604,605],{},"backgroundSize：支持两个值的大小，如 10px 20%",[536,607,608],{},"backgroundClip：支持 border-box、text",[536,610,611],{},"backgroundRepeat：支持 repeat、repeat-x、repeat-y、no-repeat，默认为 repeat",[19,613,614],{"id":614},"边框与圆角",[533,616,617,620],{},[536,618,619],{},"border 相关属性（borderWidth、borderStyle、borderColor 等）：支持 solid 和 dashed，默认为 solid",[536,621,622],{},"borderRadius 及其相关属性（borderTopLeftRadius 等）：支持，包括简写形式如 5px、50% / 5px",[19,624,625],{"id":625},"转换与效果",[533,627,628,631,634,637,640,643,646,649],{},[536,629,630],{},"transform 相关属性（translate、translateX、translateY、rotate、scale、scaleX、scaleY、skew、skewX、skewY）：支持",[536,632,633],{},"transformOrigin：支持一值和两值语法（相对和绝对值）",[536,635,636],{},"objectFit：支持 contain、cover、none，默认为 none",[536,638,639],{},"opacity：支持",[536,641,642],{},"boxShadow：支持",[536,644,645],{},"overflow：支持 visible 和 hidden，默认为 visible",[536,647,648],{},"filter：支持",[536,650,651],{},"clipPath：支持",[653,654,655],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":28,"searchDepth":42,"depth":42,"links":657},[658,662],{"id":13,"depth":42,"text":13,"children":659},[660,661],{"id":21,"depth":49,"text":21},{"id":323,"depth":49,"text":324},{"id":524,"depth":42,"text":525,"children":663},[664,665,666,667,668,669],{"id":531,"depth":49,"text":531},{"id":559,"depth":49,"text":560},{"id":577,"depth":49,"text":577},{"id":591,"depth":49,"text":591},{"id":614,"depth":49,"text":614},{"id":625,"depth":49,"text":625},"2025-03-12T00:00:00.000Z","md","2025-04-02T00:00:00.000Z",{},"/post/imgx/imgx-prompt","---\ntitle: 生成卡片的超长提示词\ndate: 2025-03-12\nlastmod: 2025-04-02\ntags: [\"IMGX\"]\n\n---\n## 提示词\n\n打磨了一下生成模板的提示词，用来批量生产模板\n\n### 基于图片生成模板\n \n```txt\n我会给你一个图片，分析内容，并将其转化为美观漂亮的比例相同的 HTML 元素：\n\n## 内容排版规范\n\t- 整体风格按照图片中的排版\n\t- 如何图片中有明显的样式不美观，则去除\n\t- 使用清晰的视觉层次结构，突出重要内容\n\t- 配色方案应专业、和谐，适合在社交媒体传播\n## 技术规范\n\t- 使用 Vue3（通过CDN引入）、Tailwindcss3(通过CDN引入)\n\t- 使用 Vue3 渲染内容时，template 标签中只能使用两种方式定义样式\n\t\t1. class。如 class=\"w-full h-full\"\n\t\t2. :style=\"{ color: myColor }\"。这种方式用于接受 props 的参数，要满足 vue 语法\n\t\t3. 两者为互补关系，不能修改的样式全部用 class实现，动态传入的用 style 实现\n\t\t4. 至少在其中一个中声明 flex 布局\n\t- 使用 Vue3 渲染内容时，script 中只允许使用 props，props 中只能接受和内容、样式有关的数据。不允许存在任何交互逻辑\n\t- template 和 props 的内容要独立且完整，要用单独的变量存储。\n\t- template 中的内容要用 props 传入值或默认值代替，不能把 template 的内容写死。\n\t- CSS 请严格按照【CSS要求】，务必使用 tailwindcss3 的语法，同时要使用`:style=\"{}\"`语法来保证能接受 props 来改变颜色、字号、间距等属性\n\t- CSS或 props 中不允许出现 undefined，必须有明确的值，如 width: 100%\n\t- html元素只能使用 div 元素\n\t- 每个 div 必须显式使用 flex 布局，必须具备 flex class\n\t- 不能使用 z-index 属性\n\t- 不能使用 satori 不支持的属性\n\t- 如果发现现有条件不能生成一模一样的样式，则放弃和原图保持一致，换一种简洁的样式来代替\n\t- 最外层 div 以及第二层 div 必须使用 `w-full h-full` 来占满父元素\n\t- 如果图片底部存在渐变色或底色，内容存在底色，要特别注意样式的准确性，必须表现在 Vue 组件内\n\t- 只允许最终生成单个HTML文件\n\t- 在 Vue 组件的外层增加一个固定宽高的 div 容器，用来模拟其固定尺寸的父元素\n\t- 在 Vue 组件的上方增加两个按钮\n\t\t- 1.复制 Template，点击时把 Vue 组件中的 Template 变量的内容当做字符串复制到粘贴板，要求和 template 共用一个变量\n\t\t- 2.复制 Props，点击时根据 Vue 组件中的 Props 对象的格式，生成key-value格式的对象字符串复制到粘贴板。\n\t- 代码中不要出现任何注释\n## 媒体资源\n\t- 忽略所有媒体资源\n## 图标与视觉元素\n\t- 忽略所有 emoji\n\t- 忽略所有 图标\n\t- 忽略所有背景图、复杂阴影效果\n\t- 不需要存在交互效果，只要视觉效果\n## 性能优化\n\t- 确保页面加载速度快，避免不必要的大型资源\n## 输出要求\n\t- 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript\n\t- 代码中不要出现任何注释\n\t- 确保代码符合W3C标准，无错误警告\n\t- 页面在不同浏览器中保持一致的外观和功能\n\n请根据上传图片，基于 Vue3 创建出合适的卡片 HTML 网页内容。\n```\n\n### 让AI自主设计排版（待完善）\n\n```txt\n请基于 Vue3 在 HTML 中生成一个美观漂亮的卡片组件，同时满足以下要求：\n\n## 排版规范\n\t- 整体长宽比为：3:4，用途为小红书、推特、朋友圈发帖\n\t- 配色方案应具有科技感，以合理的渐变作为背景\n\t- 文字必须成为视觉主体，占据页面至少70%的空间\n\t- 运用3-4种不同字号创造层次感，关键词使用最大字号\n\t- 主标题字号需要比副标题和介绍大三倍以上\n\t- 主标题提取2-3个关键词，使用特殊处理（如描边、高亮、不同颜色）\n## 技术规范\n\t- 使用 Vue3（通过CDN引入）、Tailwindcss3(通过CDN引入)\n\t- 使用 Vue3 渲染内容时，template 标签中只能使用两种方式定义样式\n\t\t1. class。如 class=\"w-full h-full\"\n\t\t2. :style=\"{ color: myColor }\"。这种方式用于接受 props 的参数，要满足 vue 语法\n\t\t3. 两者为互补关系，不能修改的样式全部用 class实现，动态传入的用 style 实现\n\t\t4. 至少在其中一个中声明 flex 布局\n\t- 使用 Vue3 渲染内容时，script 中只允许使用 props，props 中只能接受和内容、样式有关的数据。不允许存在任何交互逻辑\n\t- template 和 props 的内容要独立且完整，要用单独的变量存储。\n\t- template 中的内容要用 props 传入值或默认值代替，不能把 template 的内容写死。\n\t- CSS或 props 中不允许出现 undefined，必须有明确的值，如 width: 100%\n\t- html元素只能使用 div 元素\n\t- 每个 div 必须显式使用 flex 布局，必须具备 flex class\n\t- 不能使用 z-index 属性\n\t- 不能使用 satori 不支持的属性\n\t- 最外层 div 以及第二层 div 必须使用 `w-full h-full` 来占满父元素\n\t- 如果图片底部存在渐变色或底色，内容存在底色，要特别注意样式的准确性，必须表现在 Vue 组件内\n\t- 只允许最终生成单个HTML文件\n\t- 在 Vue 组件的外层增加一个固定宽高的 div 容器，用来模拟其固定尺寸的父元素\n\t- 在 Vue 组件的上方增加两个按钮\n\t\t- 1.复制 Template，点击时把 Vue 组件中的 Template 变量的内容当做字符串复制到粘贴板，要求和 template 共用一个变量\n\t\t- 2.复制 Props，点击时根据 Vue 组件中的 Props 对象的格式，生成key-value格式的对象字符串复制到粘贴板。\n\t- 代码中不要出现任何注释\n## 输出要求\n\t- 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript\n\t- 代码中不要出现任何注释\n\t- 确保代码符合W3C标准，无错误警告\n\t- 页面在不同浏览器中保持一致的外观和功能\n## 用户输入内容\n\n请根据上述要求，生成一个在单一 HTML 中可使用的Vue3卡片组件\n```\n\n修改生成卡片的样式时，只需要修改排版规范部分即可\n\n测试：社交卡片\n```\n## 排版规范\n- 仿照X/twitter的帖子格式来设计卡片\n- 排版规范、美观、整齐\n- 文字必须成为视觉主体，占据页面至少70%的空间\n- 运用3-4种不同字号创造层次感，关键词使用最大字号\n- 主标题字号需要比副标题和介绍大三倍以上\n- 主标题提取2-3个关键词，使用特殊处理（如描边、高亮、不同颜色）\n```\n\n测试：列表\n```\n## 排版规范\n- 仿照X/twitter的帖子格式来设计卡片\n- 排版规范、美观、整齐\n- 文字必须成为视觉主体，占据页面至少70%的空间\n- 运用3-4种不同字号创造层次感，关键词使用最大字号\n- 主标题字号需要比副标题和介绍大三倍以上\n- 主标题提取2-3个关键词，使用特殊处理（如描边、高亮、不同颜色）\n```\n\n## satori 支持的 css\n\n以下是 Satori 支持的 CSS 属性：\n\n### 布局相关\n\n- display：支持 none 和 flex，默认为 flex\n- position：支持 relative 和 absolute，默认为 relative\n- top、right、bottom、left：支持\n- width、height：支持\n- minWidth、minHeight、maxWidth、maxHeight：支持，但不支持 min-content、max-content 和 fit-content\n- margin 及其相关属性（marginTop、marginRight 等）：支持\n- gap：支持\n### 灵活盒模型（Flex）\n\n- flexDirection：支持 column、row、row-reverse、column-reverse，默认为 row\n- flexWrap：支持 wrap、nowrap、wrap-reverse，默认为 wrap\n- flexGrow、flexShrink、flexBasis：支持，其中 flexBasis 不支持 auto\n- alignItems、alignContent、alignSelf、justifyContent：支持\n\n### 字体与文本\n\n- fontFamily、fontSize、fontWeight、fontStyle：支持\n- tabSize、textAlign、textTransform、textOverflow、textDecoration、textShadow、lineHeight、letterSpacing、whiteSpace、wordBreak、textWrap：支持\n- WebkitTextStrokeWidth、WebkitTextStrokeColor：支持\n\n### 背景\n\n- backgroundColor：支持单个值\n- backgroundImage：支持 linear-gradient、radial-gradient、url，单个值\n- backgroundPosition：支持单个值\n- backgroundSize：支持两个值的大小，如 10px 20%\n- backgroundClip：支持 border-box、text\n- backgroundRepeat：支持 repeat、repeat-x、repeat-y、no-repeat，默认为 repeat\n\n### 边框与圆角\n\n- border 相关属性（borderWidth、borderStyle、borderColor 等）：支持 solid 和 dashed，默认为 solid\n- borderRadius 及其相关属性（borderTopLeftRadius 等）：支持，包括简写形式如 5px、50% / 5px\n\n### 转换与效果\n\n- transform 相关属性（translate、translateX、translateY、rotate、scale、scaleX、scaleY、skew、skewX、skewY）：支持\n- transformOrigin：支持一值和两值语法（相对和绝对值）\n- objectFit：支持 contain、cover、none，默认为 none\n- opacity：支持\n- boxShadow：支持\n- overflow：支持 visible 和 hidden，默认为 visible\n- filter：支持\n- clipPath：支持",{"title":5,"description":28},"post/imgx/imgx-prompt",[679],"IMGX","qnvWDRnrlHS_A580pflJDvaT1RHs44esDsFjTuC5EGI",[682,686],{"title":683,"path":684,"stem":685},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":687,"path":688,"stem":689},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005085967]