阿里的心流 www.iflow.cn/ 团队最近开源了一款基于终端的 AI Agent 工具 iFLOW CLI, 目前可以免费 使用到强大的 Qwen3-Coder、Kimi K2 等模型。又是一款类似 Anthropics Claude Code 的产品。
iFlow CLI 是一款直接在终端中运行的强大 AI 助手。它能够无缝分析代码仓库、执行编程任务、理解上下文需求,通过自动化处理从简单的文件操作到复杂的工作流程,全面提升您的工作效率。
既然是基于终端的 AI Agent 工具,那么就可以很好的利用 Github Action 来实现在文档内容更新之后, 自动生成幻灯片风格的文档站点。
趁着发布当日,立马基于 GitHub Copilot Agent、iFLOW CLI vibe coding 了一个 GitHub Actions 来方便在隔离的 GitHub Actions 环境中大规模使用。
GitHub Actions github.com/marketplace... 已经发布到了 GitHub 的 Marketplace 市场。欢迎来玩~
这里我们介绍如何基于这个 GitHub Actions 来生成幻灯片风格的文档站点,最终的效果可以查看这个网站 vibe-ideas.github.io/iflow-cli-a..., 预览效果如下:

接下来我们看看如何使用这个 GitHub Actions.
使用 iFLOW CLI GitHub Action
如果想要使用这个 iFLOW CLI GitHub Action, 你需要在 GitHub 中创建一个代码库 github.com/new, 然后在代码库中创建一个 .github/workflows
目录,在 .github/workflows
目录下创建一个 iflow-cli-action.yml
文件使用 iFLOW CLI GitHub Action:
shell
git clone https://github.com/yourname/your-repo.git
cd your-repo
mkdir -p .github/workflows
touch .github/workflows/iflow-cli-action.yml
iflow-cli-action.yml 文件内容如下:
yaml
name: iFlow CLI Example
on: [push]
jobs:
analyze-code:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Run iFlow CLI
uses: vibe-ideas/iflow-cli-action@v1.2.0
with:
prompt: "Analyze this codebase and suggest improvements"
api_key: ${{ secrets.IFLOW_API_KEY }}
model: "Qwen3-Coder"
timeout: "1800"
extra_args: "--debug"
prompt
即提示词,指导 AI Agent 完成你的目标🎯. 模型我们选用了 Qwen3-Coder.
secrets.IFLOW_API_KEY
是 iFLOW CLI 的 API 接口访问密钥,你可以在 iFLOW CLI 官网 www.iflow.cn/ 注册一个账号,然后通过这个链接可以获取到密钥 iflow.cn/?open=setti....
我们将密钥保存到 GitHub 仓库的 Secrets 中,避免密钥泄露。Settings -> Secrets and variables -> Actions -> New repository secret, Secrets 名为 IFLOW_API_KEY
:
以上配置完成后,将工作流文件提交到 GitHub 仓库中就可以正常使用这个 GitHub Actions 了:
shell
git add .
git commit -m "add iflow-cli-action.yml"
git push
推送之后,一般可以在代码仓库的 Actions 中看到运行过程和结果,效果如下 github.com/vibe-ideas/...:

接下来我们再看看如何基于 iFLOW CLI GitHub Action 生成前文提到的幻灯片风格的文档站点。
基于 iFLOW CLI GitHub Action 生成幻灯片风格的文档站点
相信通过前文,你已经知道如何使用 iFLOW CLI GitHub Action. 这里我们直接给出 GitHub Actions 的配置文件,方便大家参考,这个编排文件也放到了一个 GitHub 公开仓库中 :
yaml
name: Build and Deploy Homepage
on:
# Allow manual trigger
workflow_dispatch:
# Also run on pushes to main branch
push:
branches: [ main ]
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
build:
runs-on: ubuntu-latest
env:
GITHUB_PAGES: true
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Create homepage directory
run: mkdir -p _site
- name: Generate homepage using iFlow CLI
uses: vibe-ideas/iflow-cli-action@main
with:
prompt: |
Please read only the README.md file content from the current repository (do not read any other files), and convert it into a beautiful slideshow-style documentation website based on Reveal.js and save it as _site/index.html.
Requirements:
1. Use the Reveal.js framework to build a slideshow presentation, splitting the README content into multiple slide pages according to logical structure;
2. Slideshow structure design:
- Homepage slide: Project title, subtitle, GitHub link, and project introduction
- Feature highlights slide: Showcase main features and characteristics
- Installation guide slide: Step-by-step installation process
- Usage examples slide: Display code examples and configuration instructions
- Advanced features slide: Show advanced usage and best practices
- Closing slide: Acknowledgments, contribution guidelines, and contact information;
3. Use modern Reveal.js themes and configurations:
- Enable horizontal and vertical navigation
- Configure slide transition animation effects (such as slide, fade, zoom)
- Add progress bar and slide counter
- Support keyboard navigation and touch gestures
- Enable autoplay functionality (pausable)
- Add slide thumbnail overview;
4. Visual design using surreal digital collage style:
- Use vivid color contrasts and geometric elements
- Create layered visual effects combining text and graphic elements
- Use irregular shapes, transparency, and overlapping effects to create depth
- Employ dynamic backgrounds and animated transitions for visual impact
- Use abstract graphics and digital elements as decorative elements
- Ensure overall design has artistic appeal and visual attraction;
5. Font size and layout optimization (important):
- Title font sizes: Main title 2.5em, subtitle 1.8em, section title 1.5em
- Body text font size: Use 1.2em, ensure clear readability on all devices
- Code font size: Use 0.9em, avoid code blocks being too large causing layout issues
- Line height settings: Body text 1.6x line height, titles 1.4x line height
- Content area margins: Set appropriate padding for each slide (60px top/bottom, 40px left/right)
- Ensure sufficient spacing between text and background, avoid blocking and overlap
- Limit content amount per slide to avoid information overload
- Implement vertical scrolling for long code blocks instead of shrinking font;
6. Code display optimization:
- Use Reveal.js code highlighting plugin
- Support syntax highlighting (YAML, Bash, Markdown, etc.)
- Add line numbers and copy buttons
- Use appropriate maximum height (60vh) and scrollbars for code blocks
- Implement animated display effects for code snippets;
7. Interactive features:
- Add navigation menu and chapter jumping
- Implement fullscreen mode and speaker mode
- Support ESC key to display slide overview
- Add sharing and export functionality;
8. Responsive design:
- Ensure good experience on desktop, tablet, and mobile devices
- Appropriately reduce font size on mobile devices while maintaining readability
- Adapt fonts and layout to different screen sizes
- Optimize interaction experience for touch devices;
9. Technical implementation:
- Import latest version of Reveal.js from CDN
- Configure necessary plugins (highlight.js, notes, zoom, etc.)
- Add custom CSS styles to enhance visual effects
- Ensure fast loading and smooth animation performance;
10. SEO and accessibility:
- Add complete meta tags and structured data
- Ensure keyboard navigation accessibility
- Add alt text and aria labels
- Optimize search engine indexing.
Please directly create a complete HTML file using inline CSS and JavaScript, ensuring the file is self-contained and can run directly in browsers.
Project URL: https://github.com/version-fox/vfox-erlang
api_key: ${{ secrets.IFLOW_API_KEY }}
# settings_json: ${{ secrets.IFLOW_SETTINGS_JSON }}
model: "Qwen3-Coder"
timeout: "1800"
extra_args: "--debug"
- name: Verify reveal.js presentation was generated
run: |
if [ -f "_site/index.html" ]; then
echo "Reveal.js presentation generated successfully!"
echo "Checking for reveal.js content..."
if grep -q "reveal.js" "_site/index.html"; then
echo "✓ Reveal.js framework detected"
else
echo "⚠ Warning: Reveal.js framework not found in generated file"
fi
ls -la _site/
else
echo "Error: Presentation was not generated by iFlow"
exit 1
fi
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./_site
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
这里 iFLOW CLI 将会基于代码仓库的 README 和 reveal.js 生成幻灯片风格的文档站点,然后通过 GitHub Pages 发布到网络上。这里的效果可以访问这个网站看到 👀 version-fox.github.io/vfox-erlang...
结语
期待你能基于 iFLOW CLI Action, 玩出更多的花样~