iFlow Skills：设计类Workflow使用分享

iFlow CLI官网的工作流中，新增了几个和Claude Code Agent Skills的同款的设计类功能，这里简单体验了一下，提供一些案例给大家分享。

Algorithmic-art

简述：

Algorithmic-Art 工作流是一个创建算法艺术的两步流程

第一步：创建算法哲学 (.md文件)

1. 基于用户输入创建一个算法哲学/生成美学运动

2. 强调算法表达、涌现行为和计算美学

3. 指导后续的代码实现方向

第二步：代码实现 (.html + .js文件)

1. 基于创建的算法哲学，使用p5.js实现生成艺术

2. 创建交互式查看器，允许参数调整和种子导航

3. 输出完全自包含的HTML文件

导入指南

按要求运行workflow的安装指令iflow workflow add "algorithmic-art-OTelrA"，重启iFlow CLI，在输入行添加 /algorithmic-art 指令即可使用。

使用体验

1. 按照「导入指南」完成安装后，重启iFlow CLI，在输入行添加 /algorithmic-art 指令即可使用。

2. 应用示例：

   输入指令：/algorithmic-art 创建一个粒子系统，粒子在噪声场中流动，形成动态的流线效果

   3.实际效果

4.生成案例

Artifacts-builder

简述：

使用现代前端Web技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件HTML工件的工具套件。

适用于需要状态管理、路由或shadcn/ui组件的复杂工件，不适用于简单的单文件HTML/JSX工件。

使用体验

1. 按要求运行workflow的安装指令iflow workflow add "artifacts-builder-OTelrA"，重启iFlow CLI，在输入行添加 /artifacts-builder 指令即可使用。

2. 应用示例：

   输入指令：/artifacts-builder 生成电商平台工件并在浏览器中打开

3.实际效果：

4.生成案例

Brand-guidelines

简述：

应用Anthropic官方品牌色彩和排版到任何可能受益于Anthropic外观和感觉的工件。在品牌色彩或样式指南、视觉格式或公司设计标准适用时使用。

使用体验

1. 按要求运行workflow的安装指令iflow workflow add "brand-guidelines-OTelrA"，重启iFlow CLI，在输入行添加 /brand-guidelines 指令即可使用。

2. 应用示例：输入指令：/brand-guidelines 生成一个满足要求的品牌logo标志

3.  效果：

Canvas-design

简述：基于设计哲学的视觉艺术创作工作流

使用体验

1. 按要求运行workflow的安装指令iflow workflow add "canvas-design-OTelrA"，重启iFlow CLI，在输入行添加 /canvas-design 指令即可使用。

2. 应用示例：

   输入指令： /canvas-design 根据步骤设计模拟冥想视觉哲学

3. 效果展示

Internal-comms

简述：生成内部沟通材料

使用体验

1. 按要求运行workflow的安装指令iflow workflow add "internal-comms-OTelrA"，重启iFlow CLI，在输入行添加 /internal-comms 指令即可使用。

2. 应用示例：

   输入指令： /internal-comms 为产品团队撰写本周的进展、计划和问题更新，重点关注新功能发布和用户反馈

3. 效果展示

Slack-gif-creator

简述：生成满足 Slack 体积限制的动图 GIF

使用体验

1. 按要求运行workflow的安装指令iflow workflow add "slack-gif-creator-OTelrA"，重启iFlow CLI，在输入行添加 /slack-gif-creator 指令即可使用。

2. 应用示例：

   输入指令： /slack-gif-creator 创建一个弹跳的篮球 GIF

3. 效果展示

   4.生成案例

Mcp-builder

简述：MCP服务器开发工作流

使用体验

1. 按要求运行workflow的安装指令iflow workflow add "mcp-builder-OTelrA"，重启iFlow CLI，在输入行添加 /mcp-builder 指令即可使用。

2. 应用示例：

   输入指令： /mcp-builder 创建一个查询nba赛程的mcp服务器

3. 效果展示