joeseesun/qiaomu-design

[![Release](https://img.shields.io/github/v/release/joeseesun/qiaomu-design?style=flat-square)](https://github.com/joeseesun/qiaomu-design/releases) [![Last commit](https://img.shields.io/github/last-commit/joeseesun/qiaomu-design?style=fla

**完整横评：** [前端设计 Skill 横评实验室](https://designskill.qiaomu.ai/) 展示 8 个主流变体 × 10 个任务的 80 个真实生成页面，qiaomu-design 与 impeccable 均已补齐全部任务。

| 落地页 · AI 会议笔记 | 仪表盘 · 电商运营 | |---|---| | <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/landing.html"><img src="docs/assets/cases/qiaomu-design-landing.jpg" alt="qiaomu-design 生成的 AI 会议笔记落地页截图" width="420"></a> | <a href="http

| <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/landing.html"><img src="docs/assets/cases/qiaomu-design-landing.jpg" alt="qiaomu-design 生成的 AI 会议笔记落地页截图" width="420"></a> | <a href="https://designskill.qiaomu.ai/pages/qiaomu-de

| 作品集 · 独立设计师 | 交互向导 · 机票预订 | |---|---| | <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/portfolio.html"><img src="docs/assets/cases/qiaomu-design-portfolio.jpg" alt="qiaomu-design 生成的独立设计师作品集截图" width="420"></a> | <a href="http

| <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/portfolio.html"><img src="docs/assets/cases/qiaomu-design-portfolio.jpg" alt="qiaomu-design 生成的独立设计师作品集截图" width="420"></a> | <a href="https://designskill.qiaomu.ai/pages/qiaomu-d

| 设置中心 · 危险操作组件 | 创意 404 · 星空航行 | |---|---| | <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/components.html"><img src="docs/assets/cases/qiaomu-design-components.jpg" alt="qiaomu-design 生成的设置中心组件面板截图" width="420"></a> | <a href

| <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/components.html"><img src="docs/assets/cases/qiaomu-design-components.jpg" alt="qiaomu-design 生成的设置中心组件面板截图" width="420"></a> | <a href="https://designskill.qiaomu.ai/pages/qiaomu

| 多样性挑战 · 三向播放器 | 电商详情 · 手冲咖啡器 | |---|---| | <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/diversity.html"><img src="docs/assets/cases/qiaomu-design-diversity.jpg" alt="qiaomu-design 生成的三向音乐播放器设计截图" width="420"></a> | <a href="

| <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/diversity.html"><img src="docs/assets/cases/qiaomu-design-diversity.jpg" alt="qiaomu-design 生成的三向音乐播放器设计截图" width="420"></a> | <a href="https://designskill.qiaomu.ai/pages/qiaomu-

| 移动端 · 冥想助眠 App | 数据叙事 · 精品咖啡十年 | |---|---| | <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/mobile.html"><img src="docs/assets/cases/qiaomu-design-mobile.jpg" alt="qiaomu-design 生成的冥想助眠移动端页面截图" width="420"></a> | <a href="http

| <a href="https://designskill.qiaomu.ai/pages/qiaomu-design/mobile.html"><img src="docs/assets/cases/qiaomu-design-mobile.jpg" alt="qiaomu-design 生成的冥想助眠移动端页面截图" width="420"></a> | <a href="https://designskill.qiaomu.ai/pages/qiaomu-design

git clone https://github.com/joeseesun/qiaomu-design.git

后续复测扩展为 [8 个变体 × 10 个任务的公开横评](https://designskill.qiaomu.ai/)，覆盖电商详情、移动端与数据叙事等新场景。采用的机制与来源记录在对应 `references/` 及下方致谢中。

- 点选回传依赖本地预览服务；服务失败时降级为打开 HTML 文件并在对话中回复选择 - 本 skill 只做设计，不会默认给生成页面注入打赏、公众号、GitHub/X 浮条或乔木个人 Profile；   对外页面如需署名，建议只放低干扰页脚 `Powered by 向阳乔木` 链接到 `https://qiaomu.ai/`

- 本 skill 只做设计，不会默认给生成页面注入打赏、公众号、GitHub/X 浮条或乔木个人 Profile；   对外页面如需署名，建议只放低干扰页脚 `Powered by 向阳乔木` 链接到 `https://qiaomu.ai/` - 58 站 DESIGN.md 库来自公开网站的设计系统提炼，用于风格参考，不代表对应公司背书

对外页面如需署名，建议只放低干扰页脚 `Powered by 向阳乔木` 链接到 `https://qiaomu.ai/`

MIT License。融合机制来源（详见 SKILL.md 血统说明）：[anthropics/skills](https://github.com/anthropics/skills) · [vercel-labs/web-interface-guidelines](https://github.com/vercel-labs/web-interface-guidelines) · [Leonxlnx/taste-skill](https://github.com/Leo

- 个人网站: https://qiaomu.ai

- 博客: https://blog.qiaomu.ai

- X: https://x.com/vista8

- GitHub: https://github.com/joeseesun/

项目主页：[qiaomu.ai](https://qiaomu.ai/) · GitHub：[@joeseesun](https://github.com/joeseesun)

The first controlled comparison covered 6 variants × 7 tasks × 42 generated pages; the public follow-up expands to [8 variants × 10 tasks × 80 generated pages](https://designskill.qiaomu.ai/). The screenshots above link to interactive case 

MIT © 向阳乔木 · [qiaomu.ai](https://qiaomu.ai/) · [@joeseesun](https://github.com/joeseesun)

"context_budget_tier": "production",   "review_cadence": "quarterly",   "upstream_inspiration": "https://github.com/VoltAgent/awesome-design-md",

"review_cadence": "quarterly",   "upstream_inspiration": "https://github.com/VoltAgent/awesome-design-md",   "qiaomu_defaults": {

"upstream_inspiration": "https://github.com/VoltAgent/awesome-design-md",

"qiaomu_defaults": {     "copyright": "Copyright (c) 向阳乔木",     "x": "https://x.com/vista8",

"copyright": "Copyright (c) 向阳乔木",     "x": "https://x.com/vista8",     "github": "https://github.com/joeseesun/"

"x": "https://x.com/vista8",

"github": "https://github.com/joeseesun/"

来源：[Button](https://carbondesignsystem.com/components/button/usage/) 与 [Link](https://carbondesignsystem.com/components/link/usage/)。

来源：[Menu](https://carbondesignsystem.com/components/menu/usage/)、[Overflow menu](https://carbondesignsystem.com/components/overflow-menu/usage/) 与 [Menu buttons](https://carbondesignsystem.com/components/menu-buttons/usage/)。

来源：[Breadcrumb](https://carbondesignsystem.com/components/breadcrumb/usage/)、[Tabs](https://carbondesignsystem.com/components/tabs/usage/)、[Content switcher](https://carbondesignsystem.com/components/content-switcher/usage/) 与 [Pagination](

来源：[Text input](https://carbondesignsystem.com/components/text-input/usage/)、[Number input](https://carbondesignsystem.com/components/number-input/usage/)、[Date picker](https://carbondesignsystem.com/components/date-picker/usage/) 与 [File u

来源：[Checkbox](https://carbondesignsystem.com/components/checkbox/usage/)、[Radio button](https://carbondesignsystem.com/components/radio-button/usage/)、[Toggle](https://carbondesignsystem.com/components/toggle/usage/)、[Select](https://carbon

来源：[List](https://carbondesignsystem.com/components/list/usage/)、[Structured list](https://carbondesignsystem.com/components/structured-list/usage/)、[Contained list](https://carbondesignsystem.com/components/contained-list/usage/) 与 [Data t

来源：[Tile](https://carbondesignsystem.com/components/tile/usage/)、[Accordion](https://carbondesignsystem.com/components/accordion/usage/) 与 [Tree view](https://carbondesignsystem.com/components/tree-view/usage/)。

来源：[Tooltip](https://carbondesignsystem.com/components/tooltip/usage/)、[Toggletip](https://carbondesignsystem.com/components/toggletip/usage/)、[Popover](https://carbondesignsystem.com/components/popover/usage/) 与 [Modal](https://carbondesig

来源：[Notification](https://carbondesignsystem.com/components/notification/usage/)、[Loading](https://carbondesignsystem.com/components/loading/usage/)、[Inline loading](https://carbondesignsystem.com/components/inline-loading/usage/)、[Progress

来源：[Chart types](https://carbondesignsystem.com/data-visualization/chart-types/)。

来源：[Axes and labels](https://carbondesignsystem.com/data-visualization/axes-and-labels/)。

来源：[Color palettes](https://carbondesignsystem.com/data-visualization/color-palettes/)。

来源：[Legends](https://carbondesignsystem.com/data-visualization/legends/)。

来源：[Dashboards](https://carbondesignsystem.com/data-visualization/dashboards/)。

来源：[Flow charts](https://carbondesignsystem.com/data-visualization/flow-charts/)、[Spatial charts](https://carbondesignsystem.com/data-visualization/spatial-charts/) 与 [Gantt charts](https://carbondesignsystem.com/data-visualization/gantt-ch

> 本文是对 [Carbon Design System](https://carbondesignsystem.com/) 公开文档的中文转化与场景化摘要，不是 Carbon 视觉风格复制手册。

来源：[2x Grid overview](https://carbondesignsystem.com/elements/2x-grid/overview/) 与 [2x Grid usage](https://carbondesignsystem.com/elements/2x-grid/usage/)。

来源：[Spacing](https://carbondesignsystem.com/elements/spacing/overview/)。

来源：[Color overview](https://carbondesignsystem.com/elements/color/overview/)、[Color usage](https://carbondesignsystem.com/elements/color/usage/) 与 [Themes](https://carbondesignsystem.com/elements/themes/overview/)。

来源：[Typography](https://carbondesignsystem.com/elements/typography/overview/) 与 [Type style strategies](https://carbondesignsystem.com/elements/typography/style-strategies/)。

来源：[Motion overview](https://carbondesignsystem.com/elements/motion/overview/) 与 [Motion choreography](https://carbondesignsystem.com/elements/motion/choreography/)。

来源：[Icons](https://carbondesignsystem.com/elements/icons/usage/) 与 [Pictograms](https://carbondesignsystem.com/elements/pictograms/usage/)。

来源：[Content overview](https://carbondesignsystem.com/guidelines/content/overview/) 与 [Writing style](https://carbondesignsystem.com/guidelines/content/writing-style/)。

来源：[Accessibility overview](https://carbondesignsystem.com/guidelines/accessibility/overview/)、[Keyboard](https://carbondesignsystem.com/guidelines/accessibility/keyboard/) 与 [Developers](https://carbondesignsystem.com/guidelines/accessibil

来源：[Carbon for AI](https://carbondesignsystem.com/guidelines/carbon-for-ai/) 与 [AI label](https://carbondesignsystem.com/components/ai-label/usage/)。

来源：[Patterns overview](https://carbondesignsystem.com/patterns/overview/)。

来源：[Disclosures](https://carbondesignsystem.com/patterns/disclosures-pattern/) 与 [Overflow content](https://carbondesignsystem.com/patterns/overflow-content/)。

来源：[Empty states](https://carbondesignsystem.com/patterns/empty-states-pattern/)、[Loading](https://carbondesignsystem.com/patterns/loading-pattern/) 与 [Notifications](https://carbondesignsystem.com/patterns/notification-pattern/)。

来源：[Forms pattern](https://carbondesignsystem.com/patterns/forms-pattern/) 与 [Fluid styles](https://carbondesignsystem.com/patterns/fluid-styles/)。

来源：[Dialog pattern](https://carbondesignsystem.com/patterns/dialog-pattern/)。

来源：[Disabled states](https://carbondesignsystem.com/patterns/disabled-states/) 与 [Read-only states](https://carbondesignsystem.com/patterns/read-only-states-pattern/)。

来源：[Filtering](https://carbondesignsystem.com/patterns/filtering/) 与 [Search pattern](https://carbondesignsystem.com/patterns/search-pattern/)。

来源：[Common actions](https://carbondesignsystem.com/patterns/common-actions/) 与 [Remove pattern](https://carbondesignsystem.com/community/patterns/remove-pattern/)。

来源：[Create flows](https://carbondesignsystem.com/community/patterns/create-flows/)、[Edit](https://carbondesignsystem.com/community/patterns/edit-pattern/)、[Import](https://carbondesignsystem.com/community/patterns/import-pattern/)、[Export](

来源：[Global header](https://carbondesignsystem.com/patterns/global-header/) 与 [Chatbot](https://carbondesignsystem.com/community/patterns/chatbot/overview/)。

- 研究日期：2026-07-10 - 站点索引：`https://carbondesignsystem.com/sitemap-0.xml`

- 站点索引：`https://carbondesignsystem.com/sitemap-0.xml`

- sitemap URL 数：319 - 官方源仓库：[carbon-design-system/carbon-website](https://github.com/carbon-design-system/carbon-website) - 源仓库快照：`17033640cf7680ee803690f2bd21c2a4bb307743`

- 官方源仓库：[carbon-design-system/carbon-website](https://github.com/carbon-design-system/carbon-website)

- [2x Grid](https://carbondesignsystem.com/elements/2x-grid/overview/)

- [Color](https://carbondesignsystem.com/elements/color/overview/)

- [Icons](https://carbondesignsystem.com/elements/icons/usage/)

- [Pictograms](https://carbondesignsystem.com/elements/pictograms/usage/)

- [Motion](https://carbondesignsystem.com/elements/motion/overview/)

- [Spacing](https://carbondesignsystem.com/elements/spacing/overview/)

- [Themes](https://carbondesignsystem.com/elements/themes/overview/)

- [Typography](https://carbondesignsystem.com/elements/typography/overview/)

- [Accessibility](https://carbondesignsystem.com/guidelines/accessibility/overview/)

- [Content](https://carbondesignsystem.com/guidelines/content/overview/)

- [Carbon for AI](https://carbondesignsystem.com/guidelines/carbon-for-ai/)

详细入口：[Components overview](https://carbondesignsystem.com/components/overview/components/)。

- [Common actions](https://carbondesignsystem.com/patterns/common-actions/)

- [Dialogs](https://carbondesignsystem.com/patterns/dialog-pattern/)

- [Disabled states](https://carbondesignsystem.com/patterns/disabled-states/)

- [Disclosures](https://carbondesignsystem.com/patterns/disclosures-pattern/)

- [Empty states](https://carbondesignsystem.com/patterns/empty-states-pattern/)

- [Filtering](https://carbondesignsystem.com/patterns/filtering/)

- [Fluid styles](https://carbondesignsystem.com/patterns/fluid-styles/)

- [Forms](https://carbondesignsystem.com/patterns/forms-pattern/)

- [Global header](https://carbondesignsystem.com/patterns/global-header/)

- [Loading](https://carbondesignsystem.com/patterns/loading-pattern/)

- [Login](https://carbondesignsystem.com/patterns/login-pattern/)

- [Notifications](https://carbondesignsystem.com/patterns/notification-pattern/)

- [Overflow content](https://carbondesignsystem.com/patterns/overflow-content/)

- [Read-only states](https://carbondesignsystem.com/patterns/read-only-states-pattern/)

- [Search](https://carbondesignsystem.com/patterns/search-pattern/)

- [Status indicators](https://carbondesignsystem.com/patterns/status-indicator-pattern/)

- [Text toolbar](https://carbondesignsystem.com/patterns/text-toolbar-pattern/)

- [Chatbot](https://carbondesignsystem.com/community/patterns/chatbot/overview/)

- [Create flows](https://carbondesignsystem.com/community/patterns/create-flows/)

- [Edit](https://carbondesignsystem.com/community/patterns/edit-pattern/)

- [Export](https://carbondesignsystem.com/community/patterns/export-pattern/)

- [Generate an API key](https://carbondesignsystem.com/community/patterns/generate-an-api-key/)

- [Import](https://carbondesignsystem.com/community/patterns/import-pattern/)

- [Remove](https://carbondesignsystem.com/community/patterns/remove-pattern/)

- [Chart anatomy](https://carbondesignsystem.com/data-visualization/chart-anatomy/)

- [Chart types](https://carbondesignsystem.com/data-visualization/chart-types/)

- [Axes and labels](https://carbondesignsystem.com/data-visualization/axes-and-labels/)

- [Color palettes](https://carbondesignsystem.com/data-visualization/color-palettes/)

- [Legends](https://carbondesignsystem.com/data-visualization/legends/)

- [Dashboards](https://carbondesignsystem.com/data-visualization/dashboards/)

- [Simple charts](https://carbondesignsystem.com/data-visualization/simple-charts/)

- [Spatial charts](https://carbondesignsystem.com/data-visualization/spatial-charts/)

- [Flow charts](https://carbondesignsystem.com/data-visualization/flow-charts/)

- [Gantt charts](https://carbondesignsystem.com/data-visualization/gantt-charts/)

curl -fsSL https://carbondesignsystem.com/sitemap-0.xml -o /tmp/carbon-sitemap.xml

git clone --depth=1 https://github.com/carbon-design-system/carbon-website.git /tmp/carbon-website

<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&text=每场会议都值得铭记&display=swap" rel="stylesheet">

- Anshu Chimala, [How to turn your AI into a world-class designer](https://www.lennysnewsletter.com/p/how-to-turn-your-ai-into-a-world),

- Sakana AI, [String Seed of Thought: Prompting LLMs for Distribution-Faithful and Diverse Generation](https://pub.sakana.ai/ssot/), 2026-04

> 基于 [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md)，遵循 [Google Stitch DESIGN.md 格式](https://stitch.withgoogle.com/docs/design-md/format/)。

{"id":"evt-831e833a62","timestamp":"2026-08-23T03:17:06.706Z","type":"correction","source":"user","quote":"分享出去的链接应该是我们文章的链接；内置楷体不生效；阅读外观的弹层很丑陋，尤其背景设置部分，选择和背景之间没有合理的 padding","scope":"iOS 中文长文阅读器：站内分享、字体真实渲染、阅读外观弹层","taskId":"qmreader-ios-0

{"id":"evt-f31683929d","timestamp":"2026-09-04T01:22:37.846Z","type":"correction","source":"user","quote":"2026-09-01 纠正摘要：设计、前端、UI、CSS、组件和页面任务默认由当前 Codex 直接完成；只有当前任务明确点名 K3 才调用。","scope":"设计、前端、UI、CSS、组件、页面与 qiaomu-design 全流程","taskId":nul

{"id":"evt-b17aad357d","timestamp":"2026-09-04T01:23:40.604Z","type":"preference","source":"user","quote":"读取这篇文章中的提示词技巧，优化我们的乔木设计skill","scope":"开放式设计、多方向探索、方向深化与视觉打磨","taskId":null,"evidence":["https://www.lennysnewsletter.com/p/how-to-tu

- **YouTube 官方当前页面**：长视频推荐 3840×2160、16:9，最小宽度 640；支持 JPG/PNG；移动端视频缩略图小于 2MB，桌面端视频/Shorts/播客缩略图小于 50MB。旧产品的 1280×720 与统一 2MB 不应冒充当前全部要求。官方 A/B 测试最多 3 个标题/缩略图组合，按观看时长判断，而非只看 CTR。[官方尺寸](https://support.google.com/youtube/answer/72431?hl=en)、[

- **B站**：给定 Lovart 文声称 1280×720/16:9；现有产品含 1146×717、1200×900、1920×1080 三种预设；一篇 UP 主说明 2023 年末开始投稿 4:3，并提到不同展示位比例不同。当前未找到足以证明全部视频入口统一规格的官方说明。本次采用 4:3 母版并预览另外两种，是保守设计策略，最终以实际投稿入口为准。不可把 B站官方 GitHub 的 toy 项目封面要求当成视频要求。[经验文](https://www.lovart.a

- **小绿书**：给定资料主要研究小红书，不能作为微信官方规范。补充资料对图片数量、比例和展示位说法并不一致，不能写死最多 9 张/20 张等限制；本次 1080×1440 是工作预设。通过分享或列表预览验证首图损失，用户自行进行微信端检查。[补充经验文章](https://www.ixunke.com/article/655)

| 来源 | 读到的具体建议或数据 | 入库方式 | |---|---|---| | [鸟哥笔记](https://www.niaogebiji.com/article-702559-1.html) | 数字、利益点、问题式标题；文中 A/B/C 案例 CTR 为 6.8%、5.9%、6.2%，曝光约 2.2–2.6 万 | 案例口径与样本不充分，仅作选题/实验示意；不推出 6% 通用门槛 |

|---|---|---| | [鸟哥笔记](https://www.niaogebiji.com/article-702559-1.html) | 数字、利益点、问题式标题；文中 A/B/C 案例 CTR 为 6.8%、5.9%、6.2%，曝光约 2.2–2.6 万 | 案例口径与样本不充分，仅作选题/实验示意；不推出 6% 通用门槛 | | [27SEM](https://www.27sem.com/article/7348) | 单图、拼图、海报、前后对比、文字封面、补

| [鸟哥笔记](https://www.niaogebiji.com/article-702559-1.html) | 数字、利益点、问题式标题；文中 A/B/C 案例 CTR 为 6.8%、5.9%、6.2%，曝光约 2.2–2.6 万 | 案例口径与样本不充分，仅作选题/实验示意；不推出 6% 通用门槛 |

| [27SEM](https://www.27sem.com/article/7348) | 单图、拼图、海报、前后对比、文字封面、补充文字、反常视觉；常用 3:4，另有 1:1、4:3 | 转成按内容选择的套路；真实对比要保持角度/条件一致 |

| [花生设计](https://www.huasheng.ai/insights/xiaohongshu-image-design/) | 3–7 字标题、2–3 色、上半部、色块与留白；列 80–120px 标题等字号 | 字数是起点；像素缺少统一画布基准，不写成跨分辨率硬规则 |

| [Lovart](https://www.lovart.ai/zh/blog/zh-bilibili-cover-design) | B站 6–12 字、真实关键帧、内容感、手机检查；其 16:9 规格与其他资料冲突 | 吸收可执行设计建议；算法惩罚与尺寸统一性不当已证实事实 |

| [Touhfa 10 条建议](https://touhfa.art/blog/thumbnails/high-ctr-thumbnails-guide/) | 3–5 词、8–15px 描边、脸占约 40%、120×67 预览；含多个点击率涨跌百分比 | 小图可读性可执行；脸占比非必需，描边按相对尺寸；无充分研究出处的涨跌比例不采纳 |

| [MrBeast 风格文](https://touhfa.art/blog/thumbnails/mrbeast-thumbnail-article/) | 大表情、主体分离、短字与视觉悬念 | 作为娱乐类可选套路，不默认推广到教程/B站/微信阅读类；不默认美白、假脸或夸张表情 |

| [Thumbmagic](https://www.thumbmagic.co/blog/youtube-thumbnail-ctr-benchmarks) | 分领域 CTR 表、流量来源与频道自身基线 | 不采用跨平台 CTR 及格线；同频道、同流量来源、相近窗口比较，结合观看质量 |

| [Canva 公众号文章](https://www.canva.cn/learn/how-to-make-images-for-wechat-official-accounts/) | 横头图与方形小图的兼容 | 转入公众号参考，不当小绿书规范 |

| [知乎链接](https://zhuanlan.zhihu.com/p/30863774382) | 本次无法读取正文 | 标记 `unavailable`，不冒称读过，不把其 6% 等二手引述写成事实 |

{       "id": "yt-spec",       "url": "https://support.google.com/youtube/answer/72431?hl=en",

"id": "yt-spec",       "url": "https://support.google.com/youtube/answer/72431?hl=en",       "kind": "official",

"url": "https://support.google.com/youtube/answer/72431?hl=en",

{       "id": "yt-test",       "url": "https://support.google.com/youtube/answer/16391400?hl=en",

"id": "yt-test",       "url": "https://support.google.com/youtube/answer/16391400?hl=en",       "kind": "official",

"url": "https://support.google.com/youtube/answer/16391400?hl=en",

{       "id": "bili-experience",       "url": "https://www.lovart.ai/zh/blog/zh-bilibili-cover-design",

"id": "bili-experience",       "url": "https://www.lovart.ai/zh/blog/zh-bilibili-cover-design",       "kind": "third_party",

"url": "https://www.lovart.ai/zh/blog/zh-bilibili-cover-design",

{       "id": "bili-crop",       "url": "https://www.bilibili.com/opus/517638323328040669",

"id": "bili-crop",       "url": "https://www.bilibili.com/opus/517638323328040669",       "kind": "creator_observation",

"url": "https://www.bilibili.com/opus/517638323328040669",

{       "id": "yt-style",       "url": "https://touhfa.art/blog/thumbnails/high-ctr-thumbnails-guide/",

"id": "yt-style",       "url": "https://touhfa.art/blog/thumbnails/high-ctr-thumbnails-guide/",       "kind": "third_party",

"url": "https://touhfa.art/blog/thumbnails/high-ctr-thumbnails-guide/",

{       "id": "mrbeast-style",       "url": "https://touhfa.art/blog/thumbnails/mrbeast-thumbnail-article/",

"id": "mrbeast-style",       "url": "https://touhfa.art/blog/thumbnails/mrbeast-thumbnail-article/",       "kind": "third_party",

"url": "https://touhfa.art/blog/thumbnails/mrbeast-thumbnail-article/",

{       "id": "ctr-reference",       "url": "https://www.thumbmagic.co/blog/youtube-thumbnail-ctr-benchmarks",

"id": "ctr-reference",       "url": "https://www.thumbmagic.co/blog/youtube-thumbnail-ctr-benchmarks",       "kind": "third_party",

"url": "https://www.thumbmagic.co/blog/youtube-thumbnail-ctr-benchmarks",

{       "id": "xhs-copy",       "url": "https://www.niaogebiji.com/article-702559-1.html",

"id": "xhs-copy",       "url": "https://www.niaogebiji.com/article-702559-1.html",       "kind": "third_party",

"url": "https://www.niaogebiji.com/article-702559-1.html",

{       "id": "xhs-pattern",       "url": "https://www.27sem.com/article/7348",

"id": "xhs-pattern",       "url": "https://www.27sem.com/article/7348",       "kind": "third_party",

"url": "https://www.27sem.com/article/7348",

{       "id": "xhs-style",       "url": "https://www.huasheng.ai/insights/xiaohongshu-image-design/",

"id": "xhs-style",       "url": "https://www.huasheng.ai/insights/xiaohongshu-image-design/",       "kind": "third_party",

"url": "https://www.huasheng.ai/insights/xiaohongshu-image-design/",

{       "id": "xhs-zhihu",       "url": "https://zhuanlan.zhihu.com/p/30863774382",

"id": "xhs-zhihu",       "url": "https://zhuanlan.zhihu.com/p/30863774382",       "kind": "third_party",

"url": "https://zhuanlan.zhihu.com/p/30863774382",

{       "id": "wechat-canva",       "url": "https://www.canva.cn/learn/how-to-make-images-for-wechat-official-accounts/",

"id": "wechat-canva",       "url": "https://www.canva.cn/learn/how-to-make-images-for-wechat-official-accounts/",       "kind": "third_party",

"url": "https://www.canva.cn/learn/how-to-make-images-for-wechat-official-accounts/",

{       "id": "green-format",       "url": "https://www.ixunke.com/article/655",

"id": "green-format",       "url": "https://www.ixunke.com/article/655",       "kind": "third_party",

"url": "https://www.ixunke.com/article/655",

- [ ] 除非用户明确要求，生成页面没有默认添加打赏二维码、公众号关注、GitHub/X 浮条、乔木推荐入口或个人 Profile 区块 - [ ] 对外分享页面如需署名，最多使用低干扰页脚 `Powered by 向阳乔木` 链接到 `https://qiaomu.ai/`

- [ ] 对外分享页面如需署名，最多使用低干扰页脚 `Powered by 向阳乔木` 链接到 `https://qiaomu.ai/`

return {ok:false, fallback:true};     }     const res = await fetch('/api/select', {

}     const res = await fetch('/api/select', {       method: 'POST',

const res = await fetch('/api/select', {

生成后对用户说（示例）： "四个方向的可视化预览已生成并打开：`http://127.0.0.1:{port}/`

"四个方向的可视化预览已生成并打开：`http://127.0.0.1:{port}/`

- 级别：硬禁令 - 何时适用：本地预览回传服务、截图验收、给用户发送预览 URL - 原话摘录："http://127.0.0.1:57372/ 为啥还是有两层选择按钮"

- 何时适用：本地预览回传服务、截图验收、给用户发送预览 URL - 原话摘录："http://127.0.0.1:57372/ 为啥还是有两层选择按钮" - 收录：2026-07-05｜状态：生效（重启服务必须告知新 URL；旧端口/旧页面视为过期缓存）

- 原话摘录："http://127.0.0.1:57372/ 为啥还是有两层选择按钮"

- 原话摘录："读取这篇文章中的提示词技巧，优化我们的乔木设计skill" - 收录：2026-09-04｜状态：生效 - 证据：https://www.lennysnewsletter.com/p/how-to-turn-your-ai-into-a-world, https://pub.sakana.ai/ssot/

- 证据：https://www.lennysnewsletter.com/p/how-to-turn-your-ai-into-a-world, https://pub.sakana.ai/ssot/

- [Canva 微信公众号尺寸](https://www.canva.cn/sizes/wechat-official-account/)：横图 900×383 / 2.35:1、小图 1:1。

- [135 编辑器：双比例封面与后台裁切](https://www.135editor.com/essences/3228.html)：后台裁切与展示差异的补充说明，文章较旧，不能据此断言当前所有客户端行为。

"maturity_tier": "governed",     "lifecycle_stage": "library",     "upstream_inspiration": "https://github.com/VoltAgent/awesome-design-md",

"lifecycle_stage": "library",     "upstream_inspiration": "https://github.com/VoltAgent/awesome-design-md",     "upstream_sync": {}

"upstream_inspiration": "https://github.com/VoltAgent/awesome-design-md",

"qiaomu_defaults": {       "copyright": "Copyright (c) 向阳乔木",       "x": "https://x.com/vista8",

"copyright": "Copyright (c) 向阳乔木",       "x": "https://x.com/vista8",       "github": "https://github.com/joeseesun/"

"x": "https://x.com/vista8",

"github": "https://github.com/joeseesun/"

#!/usr/bin/env node

#!/usr/bin/env node

};     try {       const res = await fetch('/api/select', {

try {       const res = await fetch('/api/select', {         method: 'POST',

const res = await fetch('/api/select', {

const server = http.createServer(async (req, res) => {   try {     const url = new URL(req.url || '/', `http://${host}`);

const url = new URL(req.url || '/', `http://${host}`);

server.listen(port, host, () => {   const address = server.address();   const url = `http://${host}:${address.port}/`;

const address = server.address();   const url = `http://${host}:${address.port}/`;   console.log(`QIAOMU_DESIGN_PREVIEW_URL::${url}`);

const url = `http://${host}:${address.port}/`;

#!/usr/bin/env node

Executable file