ConardLi/garden-skills

### Powered by [ReActicle](https://github.com/ConardLi/reacticle)

`beautiful-article` is the editorial **harness** (methodology, checkpoints, theme picker, sub-agent reviewers); [`reacticle`](https://github.com/ConardLi/reacticle) is the underlying **runtime component protocol** the skill writes against —

|---|---|---| | `beautiful-article` (this skill) | **How** the agent plans, writes, reviews and delivers an article from any source — six numbered phases, three hard checkpoints, theme picker, sub-agent reviewers | This directory | | `react

| `reacticle` | The component vocabulary + 11 authoring themes the skill compiles into — `Article` / `Hero` / `Lead` / `Section` / `Quote` / `Image` / `Formula` / `CodeBlock` / `Raw` …, each theme a `.css` token bundle + `.md` authoring pro

### [Showcase](https://mmh1.top/#/ai-article) — articles built with `beautiful-article` + ReActicle

Real long-form articles, each authored end-to-end by an AI agent running this skill against the [`reacticle`](https://www.npmjs.com/package/reacticle) component protocol. Click any cover to open the live, single-file HTML article.

<tr> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/tools">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/tools"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/tools.webp" alt="Agent Tools 设计的最佳实践" width="320">

<a href="https://mmh1.top/#/ai-article/tools">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/tools.webp" alt="Agent Tools 设计的最佳实践" width="320">

</td> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/skill">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/skill"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/skill.webp" alt="Agent Skill 是如何进化的？" width="320">

<a href="https://mmh1.top/#/ai-article/skill">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/skill.webp" alt="Agent Skill 是如何进化的？" width="320">

<tr> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/harness">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/harness"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/harness.webp" alt="Agent Harness 的解剖图" width="320">

<a href="https://mmh1.top/#/ai-article/harness">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/harness.webp" alt="Agent Harness 的解剖图" width="320">

</td> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/prompt-cache">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/prompt-cache"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/prompt-cache.webp" alt="提示词缓存对 Agent 有多重要？" width="320">

<a href="https://mmh1.top/#/ai-article/prompt-cache">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/prompt-cache.webp" alt="提示词缓存对 Agent 有多重要？" width="320">

<tr> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/context">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/context"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/context.webp" alt="面向 Agent 的高效上下文工程" width="320">

<a href="https://mmh1.top/#/ai-article/context">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/context.webp" alt="面向 Agent 的高效上下文工程" width="320">

</td> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/transformer">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/transformer"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/transformer.webp" alt="Attention Is All You Need" width="320">

<a href="https://mmh1.top/#/ai-article/transformer">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/transformer.webp" alt="Attention Is All You Need" width="320">

<tr> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/agent-eval">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/agent-eval"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/agent-eval.webp" alt="把 AI Agent 的评测讲清楚" width="320">

<a href="https://mmh1.top/#/ai-article/agent-eval">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/agent-eval.webp" alt="把 AI Agent 的评测讲清楚" width="320">

</td> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/agent-loop-codex">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/agent-loop-codex"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/agent-loop-codex.webp" alt="Codex 的 Agent Loop 是怎么做的？" widt

<a href="https://mmh1.top/#/ai-article/agent-loop-codex">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/agent-loop-codex.webp" alt="Codex 的 Agent Loop 是怎么做的？" width="320">

### [Theme Gallery](https://rearticle.mmh1.top/#/gallery) — one specimen article per theme

> 11 themes shipped. Full theme contracts (`.css` token bundle + `.md` authoring profile, anti-patterns, code/media style) are documented at [Theming](https://rearticle.mmh1.top/#/theming).

<tr> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/caffeine-half-life">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/caffeine-half-life"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-tufte.webp" alt="Tufte · Data-Ink" width="26

<a href="https://rearticle.mmh1.top/#/gallery/caffeine-half-life">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-tufte.webp" alt="Tufte · Data-Ink" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/movable-type">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/movable-type"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-press.webp" alt="Press · 书卷" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/movable-type">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-press.webp" alt="Press · 书卷" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/pool-exhaustion">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/pool-exhaustion"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-shannon.webp" alt="Shannon · 工程暗色" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/pool-exhaustion">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-shannon.webp" alt="Shannon · 工程暗色" width="260">

<tr> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/orbit-spec">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/orbit-spec"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-vignelli.webp" alt="Vignelli · 瑞士" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/orbit-spec">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-vignelli.webp" alt="Vignelli · 瑞士" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/linear-attention">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/linear-attention"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/knuth.png" alt="Knuth · 学术" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/linear-attention">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/knuth.png" alt="Knuth · 学术" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/first-newsletter">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/first-newsletter"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-freddie.webp" alt="Freddie · 暖黄" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/first-newsletter">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-freddie.webp" alt="Freddie · 暖黄" width="260">

<tr> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/slow-breathing">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/slow-breathing"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-andy.webp" alt="Andy · 静谧" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/slow-breathing">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-andy.webp" alt="Andy · 静谧" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/front-page">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/front-page"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-bodoni.webp" alt="Bodoni · 报刊" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/front-page">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-bodoni.webp" alt="Bodoni · 报刊" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/geometry-of-meaning">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/geometry-of-meaning"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-bayer.webp" alt="Bayer · 包豪斯" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/geometry-of-meaning">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-bayer.webp" alt="Bayer · 包豪斯" width="260">

<tr> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/rate-limiter-spec">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/rate-limiter-spec"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-fuller.webp" alt="Fuller · 蓝图" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/rate-limiter-spec">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-fuller.webp" alt="Fuller · 蓝图" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/color-clash">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/color-clash"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-sottsass.webp" alt="Sottsass · 孟菲斯" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/color-clash">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-sottsass.webp" alt="Sottsass · 孟菲斯" width="260">

> Browse all specimens with theme switching, search and filters at the live gallery: <https://rearticle.mmh1.top/#/gallery>.

The skill is primarily a **methodology + collaboration harness**. It ships a Vite + React + TypeScript scaffold built around the [`reacticle`](https://www.npmjs.com/package/reacticle) component protocol — the agent does not hand-write naked

### 由 [ReActicle](https://github.com/ConardLi/reacticle) 驱动

`beautiful-article` 是编辑型 **harness**（方法论、checkpoint、主题选型、sub-agent reviewer）；[`reacticle`](https://github.com/ConardLi/reacticle) 是 Skill 在运行时调用的**底层组件协议** —— prose-first 的 React 语义组件 + 基于主题 token 的 `Raw` 自由层，统一接到同一套主题系统上。

|---|---|---| | `beautiful-article`（本 Skill） | **怎么** 让 Agent 从任意素材出发，规划、撰写、审阅、交付一篇文章 —— 6 阶段流程、3 个硬 checkpoint、主题选型、sub-agent reviewer | 当前目录 | | `reacticle` | Skill 实际拼装出的组件词表 + 11 套 authoring 主题 —— `Article` / `Hero` / `Lead` / `Section`

| `reacticle` | Skill 实际拼装出的组件词表 + 11 套 authoring 主题 —— `Article` / `Hero` / `Lead` / `Section` / `Quote` / `Image` / `Formula` / `CodeBlock` / `Raw` …，每套主题 = 一份 `.css` token 包 + 一份 `.md` authoring profile | [`ConardLi/reacticle`](https://g

### [文章实例](https://mmh1.top/#/ai-article) —— 用 `beautiful-article` + ReActicle 写出来的真实文章

每一篇都是 AI Agent 用本 Skill 调用 [`reacticle`](https://www.npmjs.com/package/reacticle) 组件协议端到端写完的真实长文。点封面即可在线打开单文件 HTML 版本。

<tr> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/tools">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/tools"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/tools.webp" alt="Agent Tools 设计的最佳实践" width="320">

<a href="https://mmh1.top/#/ai-article/tools">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/tools.webp" alt="Agent Tools 设计的最佳实践" width="320">

</td> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/skill">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/skill"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/skill.webp" alt="Agent Skill 是如何进化的？" width="320">

<a href="https://mmh1.top/#/ai-article/skill">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/skill.webp" alt="Agent Skill 是如何进化的？" width="320">

<tr> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/harness">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/harness"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/harness.webp" alt="Agent Harness 的解剖图" width="320">

<a href="https://mmh1.top/#/ai-article/harness">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/harness.webp" alt="Agent Harness 的解剖图" width="320">

</td> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/prompt-cache">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/prompt-cache"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/prompt-cache.webp" alt="提示词缓存对 Agent 有多重要？" width="320">

<a href="https://mmh1.top/#/ai-article/prompt-cache">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/prompt-cache.webp" alt="提示词缓存对 Agent 有多重要？" width="320">

<tr> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/context">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/context"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/context.webp" alt="面向 Agent 的高效上下文工程" width="320">

<a href="https://mmh1.top/#/ai-article/context">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/context.webp" alt="面向 Agent 的高效上下文工程" width="320">

</td> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/transformer">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/transformer"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/transformer.webp" alt="Attention Is All You Need" width="320">

<a href="https://mmh1.top/#/ai-article/transformer">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/transformer.webp" alt="Attention Is All You Need" width="320">

<tr> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/agent-eval">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/agent-eval"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/agent-eval.webp" alt="把 AI Agent 的评测讲清楚" width="320">

<a href="https://mmh1.top/#/ai-article/agent-eval">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/agent-eval.webp" alt="把 AI Agent 的评测讲清楚" width="320">

</td> <td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/agent-loop-codex">

<td width="50%" valign="top" align="center"> <a href="https://mmh1.top/#/ai-article/agent-loop-codex"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/agent-loop-codex.webp" alt="Codex 的 Agent Loop 是怎么做的？" widt

<a href="https://mmh1.top/#/ai-article/agent-loop-codex">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/agent-loop-codex.webp" alt="Codex 的 Agent Loop 是怎么做的？" width="320">

### [主题概览](https://rearticle.mmh1.top/#/gallery) —— 每套主题一篇样品文章

> 11 套主题已上架。每套主题的完整契约（`.css` token 包 + `.md` authoring profile、anti-patterns、code/media style）见 [Theming](https://rearticle.mmh1.top/#/theming)。

<tr> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/caffeine-half-life">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/caffeine-half-life"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-tufte.webp" alt="Tufte · Data-Ink" width="26

<a href="https://rearticle.mmh1.top/#/gallery/caffeine-half-life">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-tufte.webp" alt="Tufte · Data-Ink" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/movable-type">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/movable-type"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-press.webp" alt="Press · 书卷" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/movable-type">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-press.webp" alt="Press · 书卷" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/pool-exhaustion">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/pool-exhaustion"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-shannon.webp" alt="Shannon · 工程暗色" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/pool-exhaustion">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-shannon.webp" alt="Shannon · 工程暗色" width="260">

<tr> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/orbit-spec">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/orbit-spec"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-vignelli.webp" alt="Vignelli · 瑞士" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/orbit-spec">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-vignelli.webp" alt="Vignelli · 瑞士" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/linear-attention">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/linear-attention"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/knuth.png" alt="Knuth · 学术" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/linear-attention">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/knuth.png" alt="Knuth · 学术" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/first-newsletter">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/first-newsletter"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-freddie.webp" alt="Freddie · 暖黄" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/first-newsletter">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-freddie.webp" alt="Freddie · 暖黄" width="260">

<tr> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/slow-breathing">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/slow-breathing"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-andy.webp" alt="Andy · 静谧" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/slow-breathing">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-andy.webp" alt="Andy · 静谧" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/front-page">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/front-page"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-bodoni.webp" alt="Bodoni · 报刊" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/front-page">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-bodoni.webp" alt="Bodoni · 报刊" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/geometry-of-meaning">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/geometry-of-meaning"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-bayer.webp" alt="Bayer · 包豪斯" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/geometry-of-meaning">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-bayer.webp" alt="Bayer · 包豪斯" width="260">

<tr> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/rate-limiter-spec">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/rate-limiter-spec"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-fuller.webp" alt="Fuller · 蓝图" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/rate-limiter-spec">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-fuller.webp" alt="Fuller · 蓝图" width="260">

</td> <td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/color-clash">

<td width="33%" valign="top" align="center"> <a href="https://rearticle.mmh1.top/#/gallery/color-clash"> <img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-sottsass.webp" alt="Sottsass · 孟菲斯" width="260">

<a href="https://rearticle.mmh1.top/#/gallery/color-clash">

<img src="https://raw.githubusercontent.com/ConardLi/assets/main/imgs/article/theam-sottsass.webp" alt="Sottsass · 孟菲斯" width="260">

> 完整的 11 套主题样品（含主题切换、搜索与筛选）在线 gallery：<https://rearticle.mmh1.top/#/gallery>。

Skill 本质上是一个**方法论 + 协作 harness**。它附带一个 Vite + React + TypeScript 脚手架，基于 [`reacticle`](https://www.npmjs.com/package/reacticle) 组件协议 —— Agent 不手写裸 HTML / CSS，而是用 prose-first 的语义组件 + 主题约束的 `Raw` 自由层来组合。

registry=https://registry.npmjs.org/

Executable file

Made with{" "}           <a             href="https://github.com/ConardLi/garden-skills"

<a             href="https://github.com/ConardLi/garden-skills"             target="_blank"

href="https://github.com/ConardLi/garden-skills"

Executable file

Executable file

Executable file

<title>Beautiful Article</title>     <!-- Theme fonts. tufte falls back to Georgia; press uses Newsreader. -->     <link rel="preconnect" href="https://fonts.googleapis.com" />

<!-- Theme fonts. tufte falls back to Georgia; press uses Newsreader. -->     <link rel="preconnect" href="https://fonts.googleapis.com" />     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link       href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Source+Serif+4:opsz,wght@8..60,400&family=JetBrains+Mono:wght@400;500&display=swap"       rel="stylesheet"

href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Source+Serif+4:opsz,wght@8..60,400&family=JetBrains+Mono:wght@400;500&display=swap"

Executable file

Executable file

"category": "Editorial · Any source → beautiful article",   "description": "Edit and design any source material (URL / PDF / DOCX / Markdown / plain text / screenshots / pasted notes) into a beautiful, share-ready article. Built on the reac

"description": "Edit and design any source material (URL / PDF / DOCX / Markdown / plain text / screenshots / pasted notes) into a beautiful, share-ready article. Built on the reacticle component protocol with a theme-constrained Raw layer;

"homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/beautiful-article",

- 文章讲"Codex 智能体循环" → 封面可以是**带箭头的循环图（USER → MODEL → TOOL）**；    - 文章讲"色彩冲撞" → 封面可以是**两个互补色块的几何拼贴**。 5. **offline-first**。**唯一被硬禁的事**：远程图片（`<img src="https://...">`、

- 文章讲"色彩冲撞" → 封面可以是**两个互补色块的几何拼贴**。 5. **offline-first**。**唯一被硬禁的事**：远程图片（`<img src="https://...">`、    Google Fonts 动态加载、跨域 CSS background-url 等）—— 离线打不开。

5. **offline-first**。**唯一被硬禁的事**：远程图片（`<img src="https://...">`、

- **纯文字封面**（只有标题居中，没有视觉主体）。 - **使用远程图片**（`<img src="https://...">`、`background-image: url(https://…)`）—— 离线打不开。

- **使用远程图片**（`<img src="https://...">`、`background-image: url(https://…)`）—— 离线打不开。

#!/usr/bin/env bash

rm -rf "$TMP_DIR"

#!/usr/bin/env bash

#!/usr/bin/env python3

#!/usr/bin/env python3

req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0"})

with urllib.request.urlopen(req, timeout=30) as resp:  # noqa: S310

[Credential-related source omitted]

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Flive-commerce-ui%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/live-commerce-ui/1-t

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Flive-commerce-ui%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/live-commerce-ui/1-thumb.webp"

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Flive-commerce-ui%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/live-commerce-ui/1-thumb.webp" alt="Liv

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fsocial-interface-mockup%2F3"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/social-interface-mockup/3-thumb.

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fproduct-card-overlay%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/product-card-overl

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fproduct-card-overlay%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/product-card-overlay/1-thu

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fproduct-card-overlay%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/product-card-overlay/1-thumb.webp" 

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fchat-interface-scene%2F3"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/chat-interface-scene/3-thumb.webp" 

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/product-visuals%2Fexploded-view-poster%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/product-visuals/explod

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/product-visuals%2Fexploded-view-poster%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/product-visuals/exploded-view-po

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/product-visuals%2Fexploded-view-poster%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/product-visuals/exploded-view-poster/2-th

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/product-visuals%2Fpremium-studio-product%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/product-visuals/premium-studio-product/

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/branding-and-packaging%2Fcosmetic-packaging%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/branding-and-packag

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/branding-and-packaging%2Fcosmetic-packaging%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/branding-and-packaging/cosm

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/branding-and-packaging%2Fcosmetic-packaging%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/branding-and-packaging/cosmetic-pack

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/branding-and-packaging%2Fbeverage-label-design%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/branding-and-packaging/beverage-l

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fbackground-replacement%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fbackground-replacement%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/background

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fbackground-replacement%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/background-replacem

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fobject-removal%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/object-removal/1-thumb.webp

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fproduct-retouching%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/produc

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fproduct-retouching%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/product-retouc

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fproduct-retouching%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/product-retouching/1-th

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fportrait-local-edit%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/portrait-local-edit/1-

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/infographics%2Fbento-grid-infographic%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/infographics/bento-grid

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/infographics%2Fbento-grid-infographic%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/infographics/bento-grid-infograph

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/infographics%2Fbento-grid-infographic%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/infographics/bento-grid-infographic/1-thum

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/infographics%2Fcomparison-infographic%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/infographics/comparison-infographic/1-thum

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/slides-and-visual-docs%2Fdense-explainer-slides%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/slides-and-visu

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/slides-and-visual-docs%2Fdense-explainer-slides%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/slides-and-visual-docs/

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/slides-and-visual-docs%2Fdense-explainer-slides%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/slides-and-visual-docs/dense-exp

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/slides-and-visual-docs%2Fvisual-report-page%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/slides-and-visual-docs/visual-report

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/academic-figures%2Fmethod-pipeline-overview%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/academic-figures/

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/academic-figures%2Fmethod-pipeline-overview%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/academic-figures/method-pip

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/academic-figures%2Fmethod-pipeline-overview%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/academic-figures/method-pipeline-ove

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/academic-figures%2Fneural-network-architecture%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/academic-figures/neural-network-a

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/technical-diagrams%2Fsystem-architecture%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/technical-diagrams/sys

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/technical-diagrams%2Fsystem-architecture%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/technical-diagrams/system-arch

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/technical-diagrams%2Fsystem-architecture%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/technical-diagrams/system-architecture/

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/technical-diagrams%2Fsequence-diagram%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/technical-diagrams/sequence-diagram/1-thum

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/storyboards-and-sequences%2Fanime-key-visual%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/storyboards-and-

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/storyboards-and-sequences%2Fanime-key-visual%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/storyboards-and-sequences/

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/storyboards-and-sequences%2Fanime-key-visual%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/storyboards-and-sequences/anime-key

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/maps%2Ffood-map%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/maps/food-map/1-thumb.webp" alt="Food map case" width="100%"></a

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/maps%2Ftravel-route-map%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/maps/travel-route-map/1-thumb.webp" alt

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/maps%2Ftravel-route-map%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/maps/travel-route-map/1-thumb.webp" alt="Travel

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/maps%2Ftravel-route-map%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/maps/travel-route-map/1-thumb.webp" alt="Travel route ma

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/portraits-and-characters%2Fprofessional-portrait%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/portraits-and-characters/profes

<sub>Full library: <a href="https://gpt-image2.mmh1.top/#/case"><b>live case browser</b></a> · <a href="https://github.com/ConardLi/gpt-image-2-101/tree/main/public/case">case source repository</a> · local index at <code>website/gpt-image2-

| `ENABLE_GARDEN_IMAGEGEN` | Mode A | Master switch for Mode A (`1` / `true` / `yes` / `on`) | | `OPENAI_API_KEY` | Mode A | Required for actual image API calls | | `OPENAI_BASE_URL` | optional | Default `https://api.openai.com/v1`; can poi

[Credential-related source omitted]

[Credential-related source omitted]

| `OPENAI_BASE_URL` | optional | Default `https://api.openai.com/v1`; can point to any OpenAI-compatible gateway |

[Credential-related source omitted]

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Flive-commerce-ui%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/live-commerce-ui/1-t

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Flive-commerce-ui%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/live-commerce-ui/1-thumb.webp"

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Flive-commerce-ui%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/live-commerce-ui/1-thumb.webp" alt="直播带

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fsocial-interface-mockup%2F3"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/social-interface-mockup/3-thumb.

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fproduct-card-overlay%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/product-card-overl

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fproduct-card-overlay%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/product-card-overlay/1-thu

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fproduct-card-overlay%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/product-card-overlay/1-thumb.webp" 

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/ui-mockups%2Fchat-interface-scene%2F3"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/ui-mockups/chat-interface-scene/3-thumb.webp" 

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/product-visuals%2Fexploded-view-poster%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/product-visuals/explod

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/product-visuals%2Fexploded-view-poster%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/product-visuals/exploded-view-po

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/product-visuals%2Fexploded-view-poster%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/product-visuals/exploded-view-poster/2-th

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/product-visuals%2Fpremium-studio-product%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/product-visuals/premium-studio-product/

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/branding-and-packaging%2Fcosmetic-packaging%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/branding-and-packag

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/branding-and-packaging%2Fcosmetic-packaging%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/branding-and-packaging/cosm

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/branding-and-packaging%2Fcosmetic-packaging%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/branding-and-packaging/cosmetic-pack

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/branding-and-packaging%2Fbeverage-label-design%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/branding-and-packaging/beverage-l

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fbackground-replacement%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fbackground-replacement%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/background

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fbackground-replacement%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/background-replacem

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fobject-removal%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/object-removal/1-thumb.webp

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fproduct-retouching%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/produc

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fproduct-retouching%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/product-retouc

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fproduct-retouching%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/product-retouching/1-th

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/editing-workflows%2Fportrait-local-edit%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/editing-workflows/portrait-local-edit/1-

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/infographics%2Fbento-grid-infographic%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/infographics/bento-grid

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/infographics%2Fbento-grid-infographic%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/infographics/bento-grid-infograph

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/infographics%2Fbento-grid-infographic%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/infographics/bento-grid-infographic/1-thum

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/infographics%2Fcomparison-infographic%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/infographics/comparison-infographic/1-thum

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/slides-and-visual-docs%2Fdense-explainer-slides%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/slides-and-visu

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/slides-and-visual-docs%2Fdense-explainer-slides%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/slides-and-visual-docs/

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/slides-and-visual-docs%2Fdense-explainer-slides%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/slides-and-visual-docs/dense-exp

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/slides-and-visual-docs%2Fvisual-report-page%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/slides-and-visual-docs/visual-report

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/academic-figures%2Fmethod-pipeline-overview%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/academic-figures/

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/academic-figures%2Fmethod-pipeline-overview%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/academic-figures/method-pip

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/academic-figures%2Fmethod-pipeline-overview%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/academic-figures/method-pipeline-ove

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/academic-figures%2Fneural-network-architecture%2F2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/academic-figures/neural-network-a

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/technical-diagrams%2Fsystem-architecture%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/technical-diagrams/sys

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/technical-diagrams%2Fsystem-architecture%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/technical-diagrams/system-arch

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/technical-diagrams%2Fsystem-architecture%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/technical-diagrams/system-architecture/

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/technical-diagrams%2Fsequence-diagram%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/technical-diagrams/sequence-diagram/1-thum

<table>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/storyboards-and-sequences%2Fanime-key-visual%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/storyboards-and-

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/storyboards-and-sequences%2Fanime-key-visual%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/storyboards-and-sequences/

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/storyboards-and-sequences%2Fanime-key-visual%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/storyboards-and-sequences/anime-key

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/maps%2Ffood-map%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/maps/food-map/1-thumb.webp" alt="美食地图案例" width="100%"></a><br/><

</tr>   <tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/maps%2Ftravel-route-map%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/maps/travel-route-map/1-thumb.webp" alt

<tr>     <td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/maps%2Ftravel-route-map%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/maps/travel-route-map/1-thumb.webp" alt="旅行路线图案

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/maps%2Ftravel-route-map%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/maps/travel-route-map/1-thumb.webp" alt="旅行路线图案例" width=

<td width="50%" align="center"><a href="https://gpt-image2.mmh1.top/#/case/portraits-and-characters%2Fprofessional-portrait%2F1"><img src="https://cdn.jsdelivr.net/gh/ConardLi/gpt-image-2-101@main/public/case/portraits-and-characters/profes

<sub>完整案例库：<a href="https://gpt-image2.mmh1.top/#/case"><b>线上案例浏览器</b></a> · <a href="https://github.com/ConardLi/gpt-image-2-101/tree/main/public/case">案例资源仓库</a> · 本地索引 <code>website/gpt-image2-website/public/case/INDEX.md</code>。</sub>

| `ENABLE_GARDEN_IMAGEGEN` | Mode A 必需 | 模式开关：`1` / `true` / `yes` / `on` 启用 Mode A | | `OPENAI_API_KEY` | Mode A 必需 | 真正调图像 API 用 | | `OPENAI_BASE_URL` | 可选 | 默认 `https://api.openai.com/v1`，可指向任意 OpenAI 兼容网关 |

[Credential-related source omitted]

[Credential-related source omitted]

| `OPENAI_BASE_URL` | 可选 | 默认 `https://api.openai.com/v1`，可指向任意 OpenAI 兼容网关 |

[Credential-related source omitted]

- `ENABLE_GARDEN_IMAGEGEN` — **模式开关**。`1` / `true` / `yes` / `on` 时启用 Mode A；未设置或其它值则进入 Mode B / C。 - `OPENAI_API_KEY` — Mode A 必需；B / C 不需要。 - `OPENAI_BASE_URL` — 默认 `https://api.openai.com/v1`，可指向第三方兼容网关。

[Credential-related source omitted]

[Credential-related source omitted]

- `OPENAI_BASE_URL` — 默认 `https://api.openai.com/v1`，可指向第三方兼容网关。

"category": "Image Generation / Prompt Engineering",   "description": "Focused image generation and editing skill for GPT Image 2 and OpenAI-compatible image APIs. Supports three runtime modes — Garden local, host-native delegation, and adv

"description": "Focused image generation and editing skill for GPT Image 2 and OpenAI-compatible image APIs. Supports three runtime modes — Garden local, host-native delegation, and advisor-only — with 18 visual categories and 80+ structure

"homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/gpt-image-2",

[Credential-related source omitted]

[Credential-related source omitted]

#!/usr/bin/env node

[Credential-related source omitted]

[Credential-related source omitted]

const baseUrl = process.env.OPENAI_BASE_URL || "https://api.openai.com/v1";

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

Executable file

Executable file

Executable file

[Credential-related source omitted]

export function buildBaseUrl() {   return (process.env.OPENAI_BASE_URL || "https://api.openai.com/v1").replace(/\/$/, "");

return (process.env.OPENAI_BASE_URL || "https://api.openai.com/v1").replace(/\/$/, "");

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

const res = await fetch(url, {

[Credential-related source omitted]

[Credential-related source omitted]

const res = await fetch(url, {

export async function fetchBytesFromUrl(url) {   const res = await fetch(url);

const res = await fetch(url);

"category": "Retrieval / Local Knowledge Base",   "description": "Local knowledge-base retriever with progressive search. Navigates layered data_structure.md indexes, enforces learn-before-process for PDF and Excel, bounds retrieval to at m

"description": "Local knowledge-base retriever with progressive search. Navigates layered data_structure.md indexes, enforces learn-before-process for PDF and Excel, bounds retrieval to at most five rounds, and answers with sources.",   "ho

"homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/kb-retriever",

Executable file

Executable file

function message(text, error = false) { $('message').textContent = text; $('message').title = text; $('message').classList.toggle('error', error); } async function api(url, data) {   const response = await fetch(url, data === undefined ? { 

[Credential-related source omitted]

[Credential-related source omitted]

<body>   <header class="topbar">     <a class="brand" href="https://github.com/ConardLi/garden-skills" target="_blank" rel="noopener noreferrer" title="打开 garden skills GitHub 仓库">garden skills</a>

<header class="topbar">     <a class="brand" href="https://github.com/ConardLi/garden-skills" target="_blank" rel="noopener noreferrer" title="打开 garden skills GitHub 仓库">garden skills</a>     <span class="project-title" id="project-name">工

<a class="brand" href="https://github.com/ConardLi/garden-skills" target="_blank" rel="noopener noreferrer" title="打开 garden skills GitHub 仓库">garden skills</a>

Executable file

else {       media.className = 'document-result'; media.textContent = '正在载入成果…'; media.tabIndex = 0;       fetch(source, { credentials: 'omit' }).then(async response => {

media.className = 'document-result'; media.textContent = '正在载入成果…'; media.tabIndex = 0;       fetch(source, { credentials: 'omit' }).then(async response => {         if (!response.ok) throw new Error('文档无法载入');

fetch(source, { credentials: 'omit' }).then(async response => {

const reason = deferReason();     if (reason) { $('progress-message').textContent = reason; setPanel(true); return; }     const response = await fetch(new URL(`/api/preview/${id}`, parentOrigin), { credentials: 'omit' });

if (reason) { $('progress-message').textContent = reason; setPanel(true); return; }     const response = await fetch(new URL(`/api/preview/${id}`, parentOrigin), { credentials: 'omit' });     if (!response.ok) throw new Error('这个阶段的预览暂时无法打开

const response = await fetch(new URL(`/api/preview/${id}`, parentOrigin), { credentials: 'omit' });

if (stopped) return;     try {       const response = await fetch(endpoint.href, { cache: 'no-store', credentials: 'omit' });

try {       const response = await fetch(endpoint.href, { cache: 'no-store', credentials: 'omit' });       if (!response.ok) throw new Error('进度连接中断');

const response = await fetch(endpoint.href, { cache: 'no-store', credentials: 'omit' });

Executable file

#!/bin/sh

Executable file

Executable file

Executable file

Executable file

for (const candidate of candidates) {     const url = localAudio(candidate);     const response = await fetch(url, { method: 'HEAD', cache: 'no-store' }).catch(() => null);

const url = localAudio(candidate);     const response = await fetch(url, { method: 'HEAD', cache: 'no-store' }).catch(() => null);     if (response?.ok) return { url: url.href, label: candidate };

const response = await fetch(url, { method: 'HEAD', cache: 'no-store' }).catch(() => null);

Executable file

Executable file

Executable file

Executable file

"category": "Motion Graphics / Code Video",   "description": "Make code-rendered motion videos and narrated explainers up to 20 minutes, with MP4 and editable source. Confirm requirements and style frames before production. Preserve the 40-

"description": "Make code-rendered motion videos and narrated explainers up to 20 minutes, with MP4 and editable source. Confirm requirements and style frames before production. Preserve the 40-style library, deterministic render(t), beat t

"homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/motion-showreel",

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

- **自托管**：把 `.woff2` 放进 `fonts/`，用 `@font-face` 声明，`loadFonts()` 等它加载完再 READY。渲染时不要链接 Google Fonts。 - 拉取开源字体：`https://github.com/google/fonts/tree/main/ofl/<family>`（OFL 授权）。

- 拉取开源字体：`https://github.com/google/fonts/tree/main/ofl/<family>`（OFL 授权）。

- **中文**：完整的 CJK 字体有几 MB 到十几 MB。可以按用到的字做子集：Google Fonts CSS API 带 `&text=` 参数，只返回这些字的字形，例如 `https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&text=<URL 编码的文字>`，把它指向的字体文件下载到 `fonts/` 再本地加载。文案改了要重新做子集。没有网络时用系统字体兜底：`"PingFang SC",

#!/usr/bin/env node

#!/usr/bin/env node

#!/usr/bin/env node

#!/usr/bin/env node

const server = http.createServer(async (req, res) => {     try {       const url = new URL(req.url, 'http://localhost'), pathname = decodeURIComponent(url.pathname);

try {       const url = new URL(req.url, 'http://localhost'), pathname = decodeURIComponent(url.pathname);       if (req.headers.host !== `127.0.0.1:${server.address().port}` && req.headers.host !== `localhost:${server.address().port}`) { s

const url = new URL(req.url, 'http://localhost'), pathname = decodeURIComponent(url.pathname);

if (req.headers.host !== `127.0.0.1:${server.address().port}` && req.headers.host !== `localhost:${server.address().port}`) { send(res, 403, { error: 'Invalid host' }); return; }       if (req.headers.origin && ![`http://127.0.0.1:${server.

if (req.headers.origin && ![`http://127.0.0.1:${server.address().port}`, `http://localhost:${server.address().port}`].includes(req.headers.origin)) { send(res, 403, { error: 'Invalid origin' }); return; }

});   await new Promise((resolve, reject) => { server.once('error', reject); server.listen(0, '127.0.0.1', resolve); });   return { url: `http://127.0.0.1:${server.address().port}/editor`, server, project,

await new Promise((resolve, reject) => { server.once('error', reject); server.listen(0, '127.0.0.1', resolve); });   return { url: `http://127.0.0.1:${server.address().port}/editor`, server, project,     async close() { if (active?.status =

return { url: `http://127.0.0.1:${server.address().port}/editor`, server, project,

#!/usr/bin/env node

Executable file

return new Promise(resolve => {     const server = http.createServer((req, res) => {       let p = decodeURIComponent(new URL(req.url, 'http://x').pathname);

const server = http.createServer((req, res) => {       let p = decodeURIComponent(new URL(req.url, 'http://x').pathname);       if (p.endsWith('/')) p += 'index.html';

let p = decodeURIComponent(new URL(req.url, 'http://x').pathname);

});   const qs = new URLSearchParams(query); qs.set('w', w); qs.set('h', h); qs.set('render', '1');   await page.goto(`http://127.0.0.1:${port}/${rel}?${qs}`);

const qs = new URLSearchParams(query); qs.set('w', w); qs.set('h', h); qs.set('render', '1');   await page.goto(`http://127.0.0.1:${port}/${rel}?${qs}`);   const t0 = Date.now();

await page.goto(`http://127.0.0.1:${port}/${rel}?${qs}`);

Executable file

Executable file

Executable file

if (!openings.has(preview.id)) openings.set(preview.id, (async () => {         const child = await createChild(snapshot, { ...preview.options, quality: { ...options.quality, ...preview.quality }, allowExport: preview.final, readOnly: !previ

const child = await createChild(snapshot, { ...preview.options, quality: { ...options.quality, ...preview.quality }, allowExport: preview.final, readOnly: !preview.final,           progressURL: `http://127.0.0.1:${server.address().port}/api

progressURL: `http://127.0.0.1:${server.address().port}/api/progress`, progressRevision: { id: preview.id, final: preview.final, stage: preview.stage, shot: preview.shot, name: preview.name } });

if (req.headers.host !== host && req.headers.host !== host.replace('127.0.0.1', 'localhost')) { res.writeHead(403); res.end(); return; }       if (!['GET', 'HEAD'].includes(req.method)) { res.writeHead(405); res.end(); return; }       const

if (!['GET', 'HEAD'].includes(req.method)) { res.writeHead(405); res.end(); return; }       const url = new URL(req.url, `http://${host}`);       const ownOrigins = [`http://${host}`, `http://${host.replace('127.0.0.1', 'localhost')}`];

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

const ownOrigins = [`http://${host}`, `http://${host.replace('127.0.0.1', 'localhost')}`];

if (url.pathname === '/api/project') {         res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });         res.end(JSON.stringify({ project: null, progressURL: `http://${host}/api/progress

res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });         res.end(JSON.stringify({ project: null, progressURL: `http://${host}/api/progress`, progressRevision: null })); return;       }

res.end(JSON.stringify({ project: null, progressURL: `http://${host}/api/progress`, progressRevision: null })); return;

});   await new Promise((resolve, reject) => { server.once('error', reject); server.listen(0, '127.0.0.1', resolve); });   return { url: `http://127.0.0.1:${server.address().port}/progress`, server,

await new Promise((resolve, reject) => { server.once('error', reject); server.listen(0, '127.0.0.1', resolve); });   return { url: `http://127.0.0.1:${server.address().port}/progress`, server,     async close() { closed = true; server.close

return { url: `http://127.0.0.1:${server.address().port}/progress`, server,

Executable file

Executable file

Executable file

if (!model || !voice) throw new Error('Gemini TTS needs --model/--voice or GEMINI_TTS_MODEL/GEMINI_TTS_VOICE');     if (!env.GEMINI_API_KEY) throw new Error('Set GEMINI_API_KEY in the environment');     const base = (env.GEMINI_TTS_BASE_URL

[Credential-related source omitted]

[Credential-related source omitted]

const base = (env.GEMINI_TTS_BASE_URL || 'https://generativelanguage.googleapis.com/v1beta').replace(/\/$/, '');

[Credential-related source omitted]

if (!model || !voice) throw new Error('MiniMax TTS needs --model/--voice or MINIMAX_TTS_MODEL/MINIMAX_TTS_VOICE');     if (!env.MINIMAX_API_KEY) throw new Error('Set MINIMAX_API_KEY in the environment');     const url = endpoint(env.MINIMAX

[Credential-related source omitted]

[Credential-related source omitted]

const url = endpoint(env.MINIMAX_TTS_URL || 'https://api.minimax.io/v1/t2a_v2');

[Credential-related source omitted]

Executable file

Executable file

Executable file

Executable file

Executable file

page.on('response', r => { if (r.status() >= 400) console.error(`[tone page] ${r.status()} ${new URL(r.url()).pathname} (a sample or module path is wrong?)`); });     const qs = new URLSearchParams({ score: path.basename(scoreFile), ...(dur

const qs = new URLSearchParams({ score: path.basename(scoreFile), ...(dur ? { dur: String(dur) } : {}) });     await page.goto(`http://127.0.0.1:${port}/__msr/run/index.html?${qs}`);     await page.waitForFunction(() => window.__done, null,

await page.goto(`http://127.0.0.1:${port}/__msr/run/index.html?${qs}`);

salamander: {     licence: 'Salamander Grand Piano V3 by Alexander Holm — CC BY 3.0 (credit required)',     base: 'https://tonejs.github.io/audio/salamander/',

licence: 'Salamander Grand Piano V3 by Alexander Holm — CC BY 3.0 (credit required)',     base: 'https://tonejs.github.io/audio/salamander/',     files: ['A0', 'C1', 'Ds1', 'Fs1', 'A1', 'C2', 'Ds2', 'Fs2', 'A2', 'C3', 'Ds3', 'Fs3', 'A3', 'C

base: 'https://tonejs.github.io/audio/salamander/',

const dst = path.join(dir, f);     if (fs.existsSync(dst) && fs.statSync(dst).size > 0) { got++; continue; }     const r = await fetch(p.base + f);

if (fs.existsSync(dst) && fs.statSync(dst).size > 0) { got++; continue; }     const r = await fetch(p.base + f);     if (!r.ok) die(`download failed: ${p.base + f} (${r.status})`);

const r = await fetch(p.base + f);

#!/usr/bin/env node

[Credential-related source omitted]

"node_modules/@babel/runtime": {       "version": "7.29.7",       "resolved": "https://bnpm.byted.org/@babel/runtime/-/runtime-7.29.7.tgz",

"version": "7.29.7",       "resolved": "https://bnpm.byted.org/@babel/runtime/-/runtime-7.29.7.tgz",       "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",

"resolved": "https://bnpm.byted.org/@babel/runtime/-/runtime-7.29.7.tgz",

"node_modules/automation-events": {       "version": "7.1.19",       "resolved": "https://bnpm.byted.org/automation-events/-/automation-events-7.1.19.tgz",

"version": "7.1.19",       "resolved": "https://bnpm.byted.org/automation-events/-/automation-events-7.1.19.tgz",       "integrity": "sha512-cD+TLhJTI0q4AI3ktd353lrGZiVa9AchowSDzQzzGjSoYe22js4vlS32VUtWuaulghi1Yq0KYNWKk9wWuGymPA==",

"resolved": "https://bnpm.byted.org/automation-events/-/automation-events-7.1.19.tgz",

"node_modules/playwright": {       "version": "1.63.0",       "resolved": "https://bnpm.byted.org/playwright/-/playwright-1.63.0.tgz",

"version": "1.63.0",       "resolved": "https://bnpm.byted.org/playwright/-/playwright-1.63.0.tgz",       "integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",

"resolved": "https://bnpm.byted.org/playwright/-/playwright-1.63.0.tgz",

"node_modules/playwright-core": {       "version": "1.63.0",       "resolved": "https://bnpm.byted.org/playwright-core/-/playwright-core-1.63.0.tgz",

"version": "1.63.0",       "resolved": "https://bnpm.byted.org/playwright-core/-/playwright-core-1.63.0.tgz",       "integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",

"resolved": "https://bnpm.byted.org/playwright-core/-/playwright-core-1.63.0.tgz",

"node_modules/standardized-audio-context": {       "version": "25.3.77",       "resolved": "https://bnpm.byted.org/standardized-audio-context/-/standardized-audio-context-25.3.77.tgz",

"version": "25.3.77",       "resolved": "https://bnpm.byted.org/standardized-audio-context/-/standardized-audio-context-25.3.77.tgz",       "integrity": "sha512-Ki9zNz6pKcC5Pi+QPjPyVsD9GwJIJWgryji0XL9cAJXMGyn+dPOf6Qik1AHei0+UNVcc4BOCa0hWLBz

"resolved": "https://bnpm.byted.org/standardized-audio-context/-/standardized-audio-context-25.3.77.tgz",

"node_modules/tone": {       "version": "15.1.22",       "resolved": "https://bnpm.byted.org/tone/-/tone-15.1.22.tgz",

"version": "15.1.22",       "resolved": "https://bnpm.byted.org/tone/-/tone-15.1.22.tgz",       "integrity": "sha512-TCScAGD4sLsama5DjvTUXlLDXSqPealhL64nsdV1hhr6frPWve0DeSo63AKnSJwgfg55fhvxj0iPPRwPN5o0ag==",

"resolved": "https://bnpm.byted.org/tone/-/tone-15.1.22.tgz",

"node_modules/tslib": {       "version": "2.8.1",       "resolved": "https://bnpm.byted.org/tslib/-/tslib-2.8.1.tgz",

"version": "2.8.1",       "resolved": "https://bnpm.byted.org/tslib/-/tslib-2.8.1.tgz",       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",

"resolved": "https://bnpm.byted.org/tslib/-/tslib-2.8.1.tgz",

Executable file

#!/usr/bin/env node

const handlers = server.listeners('request'); server.removeAllListeners('request');   server.on('request', (req, res) => {     const url = new URL(req.url, 'http://localhost');

server.on('request', (req, res) => {     const url = new URL(req.url, 'http://localhost');     let pathname;

const url = new URL(req.url, 'http://localhost');

});   const query = new URLSearchParams({ preview: '1', w: String(w), h: String(h), fps: String(fps), ...(audio ? { audio } : {}) });   const url = `http://127.0.0.1:${actualPort}/${encodeURIComponent(target.rel)}?${query}`;

const query = new URLSearchParams({ preview: '1', w: String(w), h: String(h), fps: String(fps), ...(audio ? { audio } : {}) });   const url = `http://127.0.0.1:${actualPort}/${encodeURIComponent(target.rel)}?${query}`;   return { url, serve

const url = `http://127.0.0.1:${actualPort}/${encodeURIComponent(target.rel)}?${query}`;

#!/usr/bin/env node

#!/usr/bin/env node

#!/bin/sh

#!/bin/sh

command -v node >/dev/null 2>&1 || { echo "✗ Node.js 18+ is required (https://nodejs.org)"; exit 1; }

Executable file

Executable file

const root = fixture(t), app = await createEditorServer(root);   t.after(() => app.close());   const base = new URL(app.url).origin, response = await fetch(base + '/api/project'), data = await response.json();

t.after(() => app.close());   const base = new URL(app.url).origin, response = await fetch(base + '/api/project'), data = await response.json();   const denied = await fetch(base + '/api/session', { method: 'POST', body: JSON.stringify(data

const base = new URL(app.url).origin, response = await fetch(base + '/api/project'), data = await response.json();

const denied = await fetch(base + '/api/session', { method: 'POST', body: JSON.stringify(data.session) });

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

assert.equal((await fetch(base + '/api/session', { method: 'POST', headers, body: JSON.stringify(data.session) })).status, 200);

assert.ok(high.peaks.some(v => v > 0.1), 'treble remains visible in the waveform');   const invalid = structuredClone(data.session); invalid.tracks[0].clips.push(structuredClone(invalid.tracks[0].clips[0]));   assert.equal((await fetch(base

const invalid = structuredClone(data.session); invalid.tracks[0].clips.push(structuredClone(invalid.tracks[0].clips[0]));   assert.equal((await fetch(base + '/api/session', { method: 'POST', headers, body: JSON.stringify(invalid) })).status

assert.equal((await fetch(base + '/api/session', { method: 'POST', headers, body: JSON.stringify(invalid) })).status, 400);

const range = await fetch(base + '/project/audio/a.wav', { headers: { Range: 'bytes=0-15' } });

assert.equal(range.status, 206); assert.equal((await range.arrayBuffer()).byteLength, 16);   const first = await fetch(base + '/api/jobs', { method: 'POST', headers, body: JSON.stringify({ type: 'mix', session: data.session }) });   const j

const first = await fetch(base + '/api/jobs', { method: 'POST', headers, body: JSON.stringify({ type: 'mix', session: data.session }) });

const job = await first.json(); let result = job;   for (let i = 0; i < 100 && result.status === 'running'; i++) { await new Promise(r => setTimeout(r, 30)); result = await (await fetch(base + '/api/jobs/' + job.id)).json(); }   assert.equa

for (let i = 0; i < 100 && result.status === 'running'; i++) { await new Promise(r => setTimeout(r, 30)); result = await (await fetch(base + '/api/jobs/' + job.id)).json(); }

Executable file

const root = rootFor(t), app = await createProgressServer(root);   t.after(() => app.close());   let state = await (await fetch(new URL('/api/progress', app.url))).json();

t.after(() => app.close());   let state = await (await fetch(new URL('/api/progress', app.url))).json();   assert.equal(state.preview, null); assert.equal(state.stages.length, 6);

let state = await (await fetch(new URL('/api/progress', app.url))).json();

assert.equal(state.preview, null); assert.equal(state.stages.length, 6);   const bootstrap = await (await fetch(new URL('/api/project', app.url))).json();   assert.equal(bootstrap.project, null);

const bootstrap = await (await fetch(new URL('/api/project', app.url))).json();

assert.equal(bootstrap.project, null);   assert.equal(bootstrap.progressURL, new URL('/api/progress', app.url).href);   const shell = await (await fetch(app.url)).text();

assert.equal(bootstrap.progressURL, new URL('/api/progress', app.url).href);   const shell = await (await fetch(app.url)).text();   assert.equal((shell.match(/<iframe\b/g) || []).length, 1, 'the empty and finished workspaces share one shell

const shell = await (await fetch(app.url)).text();

assert.equal(fs.existsSync(path.join(root, 'index.html')), false);   updateProgress(root, { stage: 'scenes', done: 2, total: 8, message: '两个镜头已完成' });   state = await (await fetch(new URL('/api/progress', app.url))).json();

updateProgress(root, { stage: 'scenes', done: 2, total: 8, message: '两个镜头已完成' });   state = await (await fetch(new URL('/api/progress', app.url))).json();   assert.equal(state.stages.find(s => s.id === 'scenes').done, 2);

state = await (await fetch(new URL('/api/progress', app.url))).json();

await publishArtifact(root, 'tone.wav', { stage: 'narration', message: '口播样例' });   const artifact = readState(root).artifacts[0]; fs.writeFileSync(path.join(root, 'tone.wav'), 'later unfinished edit');   const response = await fetch(new UR

const artifact = readState(root).artifacts[0]; fs.writeFileSync(path.join(root, 'tone.wav'), 'later unfinished edit');   const response = await fetch(new URL(artifact.url, app.url), { headers: { Range: 'bytes=0-31' } });   assert.equal(resp

const response = await fetch(new URL(artifact.url, app.url), { headers: { Range: 'bytes=0-31' } });

t.after(async () => { await page.close(); await app.close(); });   const endpoint = new URL('/api/progress', app.url);   let state = await (await fetch(endpoint)).json();

const endpoint = new URL('/api/progress', app.url);   let state = await (await fetch(endpoint)).json();   assert.equal(state.syncWarning, null, 'generated QA files do not imply production has resumed');

let state = await (await fetch(endpoint)).json();

fs.writeFileSync(path.join(root, 'timeline.js'), 'export const DUR=30;');   const unchanged = fs.readFileSync(path.join(root, '.showreel-progress/status.json'), 'utf8');   state = await (await fetch(endpoint)).json();

const unchanged = fs.readFileSync(path.join(root, '.showreel-progress/status.json'), 'utf8');   state = await (await fetch(endpoint)).json();   assert.match(state.syncWarning, /制作文件已更新/);

state = await (await fetch(endpoint)).json();

assert.match(await page.locator('#progress-message').textContent(), /需求已确认/);   assert.equal(await page.locator('[data-stage=brief] .stage-icon').evaluate(el => getComputedStyle(el).animationName), 'progress-spin');   state = await (await f

assert.equal(await page.locator('[data-stage=brief] .stage-icon').evaluate(el => getComputedStyle(el).animationName), 'progress-spin');   state = await (await fetch(endpoint)).json();   assert.equal(state.syncWarning, null);

state = await (await fetch(endpoint)).json();

[Credential-related source omitted]

assert.equal(readState(root).stages.find(s => s.id === 'scenes').status, 'running', 'a playable work in progress does not claim the production stage is complete');   assert.equal(fs.existsSync(path.join(root, first.directory, '.env')), fals

[Credential-related source omitted]

[Credential-related source omitted]

let state = await (await fetch(new URL('/api/progress', app.url))).json();

const childURL = state.preview.url;   const data = await (await fetch(new URL('/api/project', childURL))).json();   assert.equal(data.project.canExport, false); assert.equal(data.project.readOnly, true);

const data = await (await fetch(new URL('/api/project', childURL))).json();

assert.equal(data.progressRevision.id, first.id);   const childOrigin = new URL(childURL).origin;   const allowed = await fetch(data.progressURL, { headers: { Origin: childOrigin } });

const childOrigin = new URL(childURL).origin;   const allowed = await fetch(data.progressURL, { headers: { Origin: childOrigin } });   assert.equal(allowed.status, 200);

const allowed = await fetch(data.progressURL, { headers: { Origin: childOrigin } });

assert.equal(allowed.headers.get('access-control-allow-origin'), childOrigin);   assert.equal(allowed.headers.get('vary'), 'Origin');   const unrelated = await fetch(data.progressURL, { headers: { Origin: 'http://127.0.0.1:9' } });

assert.equal(allowed.headers.get('vary'), 'Origin');   const unrelated = await fetch(data.progressURL, { headers: { Origin: 'http://127.0.0.1:9' } });   assert.equal(unrelated.status, 403);

const unrelated = await fetch(data.progressURL, { headers: { Origin: 'http://127.0.0.1:9' } });

assert.equal(unrelated.status, 403);   assert.equal(unrelated.headers.get('access-control-allow-origin'), null);   const post = (route, body) => fetch(new URL(route, childURL), { method: 'POST', headers: { 'Content-Type': 'application/json'

[Credential-related source omitted]

[Credential-related source omitted]

const original = fs.readFileSync(path.join(root, 'index.html'), 'utf8');   fs.writeFileSync(path.join(root, 'index.html'), original.replace('window.render=t=>{', 'window.render=t=>{throw new Error("unfinished scene");'));   assert.equal(awa

fs.writeFileSync(path.join(root, 'index.html'), original.replace('window.render=t=>{', 'window.render=t=>{throw new Error("unfinished scene");'));   assert.equal(await (await fetch(new URL('/project/index.html', childURL))).text(), original

assert.equal(await (await fetch(new URL('/project/index.html', childURL))).text(), original);

await assert.rejects(publishPreview(root, '.', { stage: 'scenes', fps: 10 }), /unfinished scene/);   assert.equal(readState(root).preview.id, first.id);   state = await (await fetch(new URL('/api/progress', app.url))).json();

assert.equal(readState(root).preview.id, first.id);   state = await (await fetch(new URL('/api/progress', app.url))).json();   assert.equal(state.preview.url, childURL); assert.equal(state.stages.find(s => s.id === 'scenes').status, 'failed

state = await (await fetch(new URL('/api/progress', app.url))).json();

await assert.rejects(publishPreview(root, '.', { stage: 'scenes', final: true, fps: 10 }), /review stage/);   await publishPreview(root, '.', { stage: 'review', final: true, fps: 10, quality: { subframes: 4, dpr: 2, grain: 3 } });   state =

await publishPreview(root, '.', { stage: 'review', final: true, fps: 10, quality: { subframes: 4, dpr: 2, grain: 3 } });   state = await (await fetch(new URL('/api/progress', app.url))).json();   const final = await (await fetch(new URL('/a

state = await (await fetch(new URL('/api/progress', app.url))).json();

const final = await (await fetch(new URL('/api/project', state.preview.url))).json();

state = readState(root); assert.equal(state.shots.length, 2); assert.equal(state.stages.find(s => s.id === 'scenes').done, 2);   const latest = state.preview.id;   const history = await (await fetch(new URL(`/api/preview/${old.id}`, app.url

const latest = state.preview.id;   const history = await (await fetch(new URL(`/api/preview/${old.id}`, app.url))).json();   assert.equal(history.id, old.id);

const history = await (await fetch(new URL(`/api/preview/${old.id}`, app.url))).json();

assert.equal(history.id, old.id);   assert.equal((await (await fetch(new URL('/api/project', history.url))).json()).project.canExport, false);   assert.equal(readState(root).preview.id, latest, 'browsing a previous shot must not change the 

assert.equal((await (await fetch(new URL('/api/project', history.url))).json()).project.canExport, false);

Executable file

Executable file

Executable file

Executable file

[Credential-related source omitted]

test('MiniMax adapter uses configurable endpoint, hex output, model and voice', async t => {   const root = workspace(t), outFile = path.join(root, 'out.bin'), wav = pcmWav(Buffer.alloc(4800));   const provider = await createProvider({ name

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

const initial = await page.evaluate(() => ({ playing: window.__showreelPreview.playing, paused: window.__showreelPreview.audio.paused, current: window.__showreelPreview.audio.currentTime, src: window.__showreelPreview.audio.src }));   asser

assert.equal(initial.playing, false); assert.equal(initial.paused, true); assert.equal(initial.current, 0); assert.match(initial.src, /audio\/final\.wav$/);   const range = await fetch(new URL('audio/final.wav', preview.url), { headers: { R

const range = await fetch(new URL('audio/final.wav', preview.url), { headers: { Range: 'bytes=0-15' } });

const root = fs.mkdtempSync(path.join(os.tmpdir(), 'showreel-preview-invalid-')); t.after(() => fs.rmSync(root, { recursive: true, force: true }));   fs.writeFileSync(path.join(root, 'index.html'), '<canvas></canvas>');   await assert.rejec

fs.writeFileSync(path.join(root, 'index.html'), '<canvas></canvas>');   await assert.rejects(createPreviewServer(root, { size: '64x36', audio: 'https://example.com/voice.wav' }), /project-relative/);   await assert.rejects(createPreviewServ

await assert.rejects(createPreviewServer(root, { size: '64x36', audio: 'https://example.com/voice.wav' }), /project-relative/);

Executable file

Executable file

Executable file

This is a reusable **Skill** (structured system prompt) for AI coding agents — such as [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor](https://cursor.com), and other tools that support the `SKILL.md` format — that dr

It distills the core design philosophy from [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs)'s system prompt into an open, portable, and customizable skill file that you can drop into any project.

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp" alt="apple-hig preview

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp" alt="apple-hig preview" /><

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp" alt="apple-hig preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp" alt="muji

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp" alt="muji-kenya

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp" alt="muji-kenya-hara preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp" alt="aesop preview" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp" alt="aesop preview" /></a> <br /><s

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp" alt="aesop preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp" alt="

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp" alt="dieter

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp" alt="dieter-rams-braun preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp" alt="mon

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp" alt="monocle-

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp" alt="monocle-magazine preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp" alt="pentagram preview

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp" alt="pentagram preview" /><

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp" alt="pentagram preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helveti

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.web

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp" alt="vignelli-swiss-helvetica

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp" alt=

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp" alt="bloo

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp" alt="bloomberg-terminal preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp" alt="tufte-da

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp" alt="tufte-dataink 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp" alt="tufte-dataink preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp" alt="nyt-the-d

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp" alt="nyt-the-daily 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp" alt="nyt-the-daily preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp" alt="linear preview" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp" alt="linear preview" /></a> <br /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp" alt="linear preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp" alt="vercel-mesh 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp" alt="vercel-mesh previe

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp" alt="vercel-mesh preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp" alt="raycast preview" /></

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp" alt="raycast preview" /></a> <b

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp" alt="raycast preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp" alt="notion-p

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp" alt="notion-pre-ai 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp" alt="notion-pre-ai preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp" alt="field-io preview" /

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp" alt="field-io preview" /></a>

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp" alt="field-io preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp" alt="active-t

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp" alt="active-theory 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp" alt="active-theory preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp" alt="r

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp" alt="resn-s

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp" alt="resn-storytelling preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp" alt="are-na preview" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp" alt="are-na preview" /></a> <br /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp" alt="are-na preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-busines

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp" alt="bloomberg-busi

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp" 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp" alt="

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp" alt="balenciaga-post-2017 preview" />

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp" alt="m

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp" alt="mailch

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp" alt="mailchimp-freddie preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp" alt="stripe-pre

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp" alt="stripe-press pre

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp" alt="stripe-press preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp" 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp" alt="

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp" alt="headspace-meditation preview" />

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp" alt="y

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp" alt="y2k-re

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp" alt="y2k-retrofuturism preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp" alt

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp" alt="mid-

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp" alt="mid-century-modern preview" /></a>

cd demo/web-design-engineer-demo npm install && npm run dev    # http://localhost:5181/

npm install && npm run dev    # http://localhost:5181/

This skill is inspired by the system prompt of [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs), Anthropic's visual design product launched in April 2026. Claude Design's system prompt (~420 lines) encodes a soph

这是一个面向 AI 编程代理（如 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor](https://cursor.com) 以及其他支持 `SKILL.md` 格式的工具）的可复用 **Skill**（结构化系统提示词），能显著提升 AI 生成的 HTML/CSS/JavaScript 产物的设计品质。

它将 [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) 系统提示词中的核心设计理念提炼为一个开放、可移植、可自定义的技能文件，可以直接放进任何项目中使用。

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp" alt="apple-hig preview

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp" alt="apple-hig preview" /><

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp" alt="apple-hig preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp" alt="muji

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp" alt="muji-kenya

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp" alt="muji-kenya-hara preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp" alt="aesop preview" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp" alt="aesop preview" /></a> <br /><s

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp" alt="aesop preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp" alt="

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp" alt="dieter

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp" alt="dieter-rams-braun preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp" alt="mon

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp" alt="monocle-

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp" alt="monocle-magazine preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp" alt="pentagram preview

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp" alt="pentagram preview" /><

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp" alt="pentagram preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helveti

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.web

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp" alt="vignelli-swiss-helvetica

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp" alt=

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp" alt="bloo

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp" alt="bloomberg-terminal preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp" alt="tufte-da

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp" alt="tufte-dataink 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp" alt="tufte-dataink preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp" alt="nyt-the-d

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp" alt="nyt-the-daily 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp" alt="nyt-the-daily preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp" alt="linear preview" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp" alt="linear preview" /></a> <br /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp" alt="linear preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp" alt="vercel-mesh 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp" alt="vercel-mesh previe

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp" alt="vercel-mesh preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp" alt="raycast preview" /></

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp" alt="raycast preview" /></a> <b

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp" alt="raycast preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp" alt="notion-p

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp" alt="notion-pre-ai 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp" alt="notion-pre-ai preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp" alt="field-io preview" /

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp" alt="field-io preview" /></a>

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp" alt="field-io preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp" alt="active-t

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp" alt="active-theory 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp" alt="active-theory preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp" alt="r

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp" alt="resn-s

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp" alt="resn-storytelling preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp" alt="are-na preview" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp" alt="are-na preview" /></a> <br /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp" alt="are-na preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-busines

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp" alt="bloomberg-busi

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp" 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp" alt="

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp" alt="balenciaga-post-2017 preview" />

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp" alt="m

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp" alt="mailch

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp" alt="mailchimp-freddie preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp" alt="stripe-pre

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp" alt="stripe-press pre

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp" alt="stripe-press preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp" 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp" alt="

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp" alt="headspace-meditation preview" />

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp" alt="y

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp" alt="y2k-re

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp" alt="y2k-retrofuturism preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp" alt

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp" alt="mid-

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp" alt="mid-century-modern preview" /></a>

cd demo/web-design-engineer-demo npm install && npm run dev    # http://localhost:5181/

npm install && npm run dev    # http://localhost:5181/

此 Skill 的灵感来自 [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) 的系统提示词。Claude Design 是 Anthropic 于 2026 年 4 月推出的视觉设计产品。其系统提示词（约 420 行）编码了一套精密的设计原则、反模式和工作流约束，使其输出保持稳定的高品质。

2. **Simple React state + setTimeout / requestAnimationFrame** — simple frame-by-frame or event-driven animations 3. **Custom `useTime` + `Easing` + `interpolate`** (full implementation in references) — timeline-driven video/demo scenes: sc

4. **Fallback: Popmotion** (`https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js`) — only if the above three layers genuinely can't cover the use case

| When clearly needed | Library | |---|---| | Charts (line / bar / pie) | Chart.js (`https://cdn.jsdelivr.net/npm/chart.js`) |

|---|---| | Charts (line / bar / pie) | Chart.js (`https://cdn.jsdelivr.net/npm/chart.js`) | | Complex custom visualizations | D3 v7 (`https://d3js.org/d3.v7.min.js`) |

| Charts (line / bar / pie) | Chart.js (`https://cdn.jsdelivr.net/npm/chart.js`) |

| Complex custom visualizations | D3 v7 (`https://d3js.org/d3.v7.min.js`) |

"category": "Design / Frontend",   "description": "Build and redesign high-quality visual Web artifacts using HTML/CSS/JavaScript/React with calibrated design dials, contextual anti-pattern checks, preservation-aware redesigns, reusable blo

"description": "Build and redesign high-quality visual Web artifacts using HTML/CSS/JavaScript/React with calibrated design dials, contextual anti-pattern checks, preservation-aware redesigns, reusable blocks, and an executable browser acce

"homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/web-design-engineer",

const BrowserFrame = ({ children, url = "https://example.com", title = "Page" }) => (

<canvas id="myChart" width="800" height="400"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

│   │       ├── minimax.sh            # default — uses mmx-cli │   │       └── openai.sh             # built-in — uses OPENAI_API_KEY via curl │   └── src/

[Credential-related source omitted]

[Credential-related source omitted]

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp" alt="midnight-

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp" alt="midnight-press

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp" alt="midnight-press preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp" alt="dark-bot

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp" alt="dark-botanical

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp" alt="dark-botanical preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp" alt="chalk-garden 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp" alt="chalk-garden previ

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp" alt="chalk-garden preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp" alt="blueprint preview"

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp" alt="blueprint preview" /></a

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp" alt="blueprint preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp" alt="terminal-

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp" alt="terminal-green

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp" alt="terminal-green preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp" alt="neon-cyber previ

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp" alt="neon-cyber preview" />

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp" alt="neon-cyber preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp" alt="bold-signal pre

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp" alt="bold-signal preview"

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp" alt="bold-signal preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp" alt="crea

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp" alt="creative-v

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp" alt="creative-voltage preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp" alt="paper-press pre

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp" alt="paper-press preview"

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp" alt="paper-press preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp" alt="newsroom preview" />

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp" alt="newsroom preview" /></a> <

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp" alt="newsroom preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp" alt="monoc

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp" alt="monochrome

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp" alt="monochrome-print preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp" alt="vi

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp" alt="vintage-

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp" alt="vintage-editorial preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp" alt="sunset-zine pre

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp" alt="sunset-zine preview"

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp" alt="sunset-zine preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp" alt="pastel-dream

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp" alt="pastel-dream previ

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp" alt="pastel-dream preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp" alt="warm-keynote 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp" alt="warm-keynote previ

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp" alt="warm-keynote preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp" alt="electr

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp" alt="electric-stu

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp" alt="electric-studio preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp" alt="bauhaus-bold 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp" alt="bauhaus-bold previ

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp" alt="bauhaus-bold preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp" alt="swiss-ikb preview"

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp" alt="swiss-ikb preview" /></a

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp" alt="swiss-ikb preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp" alt="dune preview" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp" alt="dune preview" /></a> <br /><strong

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp" alt="dune preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp" alt="indi

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp" alt="indigo-por

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp" alt="indigo-porcelain preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp" alt="forest-ink previe

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp" alt="forest-ink preview" />

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp" alt="forest-ink preview" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp" alt="kraft-paper pr

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp" alt="kraft-paper preview"

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp" alt="kraft-paper preview" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp" alt="split-canvas 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp" alt="split-canvas previ

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp" alt="split-canvas preview" /></a>

│   │       ├── README.md             # 三函数契约 + ElevenLabs / edge-tts / Azure / Google / say 的现成片段 │   │       ├── minimax.sh            # 默认 provider（mmx-cli） │   │       └── openai.sh             # 内置：OpenAI TTS（curl + OPENAI_API_KEY）

│   │       ├── minimax.sh            # 默认 provider（mmx-cli） │   │       └── openai.sh             # 内置：OpenAI TTS（curl + OPENAI_API_KEY） │   └── src/

[Credential-related source omitted]

[Credential-related source omitted]

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp" alt="midnight-

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp" alt="midnight-press

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/midnight-press.webp" alt="midnight-press 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp" alt="dark-bot

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp" alt="dark-botanical

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dark-botanical.webp" alt="dark-botanical 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp" alt="chalk-garden 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp" alt="chalk-garden 预览" /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp" alt="chalk-garden 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp" alt="blueprint 预览" /></

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp" alt="blueprint 预览" /></a> <br

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp" alt="blueprint 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp" alt="terminal-

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp" alt="terminal-green

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/terminal-green.webp" alt="terminal-green 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp" alt="neon-cyber 预览" /

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp" alt="neon-cyber 预览" /></a> 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/neon-cyber.webp" alt="neon-cyber 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp" alt="bold-signal 预览"

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp" alt="bold-signal 预览" /></

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bold-signal.webp" alt="bold-signal 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp" alt="crea

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp" alt="creative-v

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp" alt="creative-voltage 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp" alt="paper-press 预览"

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp" alt="paper-press 预览" /></

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/paper-press.webp" alt="paper-press 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp" alt="newsroom 预览" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp" alt="newsroom 预览" /></a> <br />

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/newsroom.webp" alt="newsroom 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp" alt="monoc

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp" alt="monochrome

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/monochrome-print.webp" alt="monochrome-print 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp" alt="vi

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp" alt="vintage-

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/vintage-editorial.webp" alt="vintage-editorial 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp" alt="sunset-zine 预览"

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp" alt="sunset-zine 预览" /></

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/sunset-zine.webp" alt="sunset-zine 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp" alt="pastel-dream

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp" alt="pastel-dream 预览" /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/pastel-dream.webp" alt="pastel-dream 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp" alt="warm-keynote 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp" alt="warm-keynote 预览" /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/warm-keynote.webp" alt="warm-keynote 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp" alt="electr

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp" alt="electric-stu

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/electric-studio.webp" alt="electric-studio 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp" alt="bauhaus-bold 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp" alt="bauhaus-bold 预览" /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/bauhaus-bold.webp" alt="bauhaus-bold 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp" alt="swiss-ikb 预览" /></

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp" alt="swiss-ikb 预览" /></a> <br

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp" alt="swiss-ikb 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp" alt="dune 预览" /></a>

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp" alt="dune 预览" /></a> <br /><strong><cod

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/dune.webp" alt="dune 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp" alt="indi

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp" alt="indigo-por

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/indigo-porcelain.webp" alt="indigo-porcelain 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp" alt="forest-ink 预览" />

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp" alt="forest-ink 预览" /></a> 

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/forest-ink.webp" alt="forest-ink 预览" /></a>

</td> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp" alt="kraft-paper 预览

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp" alt="kraft-paper 预览" /></

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/kraft-paper.webp" alt="kraft-paper 预览" /></a>

<tr> <td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp" alt="split-canvas 

<td align="center" width="50%"> <a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp" alt="split-canvas 预览" /

<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/split-canvas.webp" alt="split-canvas 预览" /></a>

│       ├── README.md           # 三函数契约 + 5 段现成代码片段（11labs / edge-tts / say / azure / gcloud）     │       ├── minimax.sh          # 默认 provider，用 mmx-cli     │       └── openai.sh           # 内置 OpenAI TTS（curl + OPENAI_API_KEY）

│       ├── minimax.sh          # 默认 provider，用 mmx-cli     │       └── openai.sh           # 内置 OpenAI TTS（curl + OPENAI_API_KEY）     ├── audio-segments.json         # extract 产出（合成前 review）

[Credential-related source omitted]

[Credential-related source omitted]

rm -rf presentation/src/chapters/01-example

[Credential-related source omitted]

[Credential-related source omitted]

"category": "Web Video / Presentation",   "description": "Turn scripts, articles, lessons, product demos, and talks into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos. Ships a Vite + React + TypeScript 

"description": "Turn scripts, articles, lessons, product demos, and talks into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos. Ships a Vite + React + TypeScript scaffold, a (chapter, step) cursor model, 

"homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation",

[Credential-related source omitted]

[Credential-related source omitted]

|---|---|---| | `OPENAI_API_KEY` | —— **必须** | API key | | `OPENAI_BASE_URL` | `https://api.openai.com/v1` | 切代理 / Azure-OpenAI |

[Credential-related source omitted]

[Credential-related source omitted]

| `OPENAI_BASE_URL` | `https://api.openai.com/v1` | 切代理 / Azure-OpenAI |

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

2. 帮你装 MiniMax CLI（默认 provider，中文音色更稳）      npm install -g mmx-cli && mmx auth login --api-key sk-xxxxx      API key 在 https://platform.minimaxi.com 获取

API key 在 https://platform.minimaxi.com 获取

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

| 全部段 FAILED + key 是对的 | 多半 model / voice 名字错。`--voice=alloy` 试默认值；`OPENAI_TTS_MODEL=tts-1` 试默认模型；用 `bash -x scripts/synthesize-audio.sh` 看请求体 | | 走代理 / 走 Azure-OpenAI | `export OPENAI_BASE_URL=https://your-proxy/v1` | | HD 太慢 | 改成 `OPENAI_

| 走代理 / 走 Azure-OpenAI | `export OPENAI_BASE_URL=https://your-proxy/v1` |

[Credential-related source omitted]

- Provider 契约 + 现成片段：[`scripts/tts-providers/README.md`](../templates/scripts/tts-providers/README.md) - mmx-cli 仓库：<https://github.com/MiniMax-AI/cli>

- mmx-cli 仓库：<https://github.com/MiniMax-AI/cli>

- mmx 官方文档：<https://platform.minimaxi.com/docs/token-plan/minimax-cli>

Executable file

Executable file

1. **浏览器全屏**（F11 / Ctrl+Cmd+F），URL 改成    `http://localhost:5173/?auto=1`

`http://localhost:5173/?auto=1`

#!/usr/bin/env bash

rm -f \

1. cd $TARGET   2. npm run dev      # 默认 http://localhost:5174（被占会自动换端口）

2. npm run dev      # 默认 http://localhost:5174（被占会自动换端口）

• 手动模式：直接打开 http://localhost:5174（点击 / 方向键推进）

Executable file

#!/usr/bin/env bash

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

**已内置** —— 直接看 [`openai.sh`](./openai.sh)。 该文件也是写 HTTP-based provider 的**官方参考实现**：jq 构造 JSON payload、curl `-fsS` 提交、可选 base URL（接 Azure-OpenAI / 代理）、

该文件也是写 HTTP-based provider 的**官方参考实现**：jq 构造 JSON payload、curl `-fsS` 提交、可选 base URL（接 Azure-OpenAI / 代理）、 可选 model env var、空音色 fallback 到默认值。新接 REST API 的

payload、curl `-fsS` 提交、可选 base URL（接 Azure-OpenAI / 代理）、

[Credential-related source omitted]

# Docs:   https://elevenlabs.io/docs/api-reference/text-to-speech

[Credential-related source omitted]

tts_check() {   command -v curl >/dev/null || { echo "✗ curl not found" >&2; return 1; }

command -v curl >/dev/null || { echo "✗ curl not found" >&2; return 1; }

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

"https://api.elevenlabs.io/v1/text-to-speech/$voice" \

[Credential-related source omitted]

# Docs:   https://github.com/rany2/edge-tts

rm -f "$tmp"

# Docs:    https://learn.microsoft.com/azure/ai-services/speech-service/rest-text-to-speech