IconFlow

開始使用 · 原始碼安裝

把簡報
交給代理程式。
留下校樣。

IconFlow 把產品意圖變成可編輯 SVG，再讓設計撐過原生像素、平台裁切，以及綁定原始檔的審查，之後才交付任何素材。

跑五分鐘校樣 複製代理程式簡報
  • Python 3.10+
  • Git
  • 一次性網路設定
代理程式交接01 / 04
產品意圖

幫人比對研究，卻不丟失脈絡。

本質 · 校樣避開 · 閃亮
決策保持可檢視簡報 · SVG · 審查 · receipt（回執） · 案例

運作模式

代理程式設計。
IconFlow 負責校樣。

代理程式研究產品、探索不同概念，並撰寫語意化 SVG。IconFlow 提供設計手冊、確定性渲染器、品質關卡、目標轉換與學習迴圈。它不是提示詞生圖工具。

選擇路徑

兩扇門。
一道品質關卡。

需要產品思考與 SVG 工藝協助時，走代理程式路徑。你已掌握設計決策時，走 CLI 路徑。兩者都停在同一份審查契約。

建議代理程式協助

描述產品任務，不是畫面。

安裝開放格式的 IconFlow skill。相容的代理程式在你要求應用程式圖示、favicon、標誌或系統匣圖示時，就能發現工作流程。

  1. 01安裝一次 skill
  2. 02給代理程式產品脈絡
  3. 03檢視比稿與 Review Lab
用代理程式簡報
透明直接 CLI

每個決策都自己做。

讀設計手冊，撰寫 SVG 決選稿，並使用代理程式所跑的同一組指令。CLI 背後沒有隱藏服務。

  1. 01建立 iconflow.toml
  2. 02比較並審查候選稿
  3. 03僅在核准仍有效時交付
查看每道指令

用的是別的 AI 代理程式？ 只要代理程式能讀儲存庫說明並執行 shell 指令，就能透過 AGENTS.md 加上 CLI 使用 IconFlow。能否自動發現 skill 取決於用戶端。

五分鐘引擎校樣

驗證管線
再開始設計。

這會把 IconFlow 已提交、已審查的圖示家族建到可拋棄的工作目錄。它證明的是你的環境——不是五分鐘內就能設計出獨特的新識別。

01Clone取得目前原始碼。
02設定安裝 Python 依賴套件、Chromium 與代理程式 skill。
03交付校樣重新驗證 receipt 並建置 23 個素材。

Windows · PowerShell

git clone https://github.com/snowyukitty/ai-iconflow.git
cd ai-iconflow
python -m venv .venv
powershell -NoProfile -ExecutionPolicy Bypass -File .\scripts\setup.ps1
.\.venv\Scripts\python.exe -m iconflow doctor
.\.venv\Scripts\python.exe -m iconflow ship `
  --config brand\iconflow.toml `
  --review brand\master-review.json `
  --out work\quick-start\icon-out

macOS / Linux · shell

git clone https://github.com/snowyukitty/ai-iconflow.git
cd ai-iconflow
python3 -m venv .venv
sh ./scripts/setup.sh
./.venv/bin/python -m iconflow doctor
./.venv/bin/python -m iconflow ship \
  --config brand/iconflow.toml \
  --review brand/master-review.json \
  --out work/quick-start/icon-out
IconFlow 標誌
預期結果

關卡，不只是資料夾。

doctor回報渲染器已就緒。ship 驗證已提交的原始檔與審查契約，重跑 QA，並將網頁、PWA、Tauri 桌面、Electron 與系統匣素材寫入 work/quick-start/icon-out/。

  • 原始檔雜湊相符
  • 0 則自動警告
  • 六項分數 ≥ 4/5

從意圖開始

給代理程式
一份有用的簡報。

只給名詞的提示詞會做出裝飾。要包含產品任務、受眾、個性、色盤、該避開的陳腔濫調，以及確切的產出版面。

簡報 / 01代理程式需要什麼
產品意圖
產品讓人做成什麼？
使用者任務
使用者在推進什麼？
本質
引導每個選擇的一個詞。
個性
兩到三個帶張力的特質。
陳腔濫調
該拒絕的明顯類別符號。
目標
網頁、PWA、桌面、系統匣——或只做既有的。

代理程式提示詞

Use the IconFlow skill to design, review, and ship a distinctive icon family for this project.

Product intent: [what the product enables]
User job: [the progress a person wants]
Essence: [one word]
Personality: [two or three traits]
Existing palette: [tokens or colors]
Clichés to avoid: [obvious symbols]
Targets: [web, pwa, tauri, electron, tray]

Keep the editable SVG and iconflow.toml in this project. Show me the concept bake-off and native-size review before shipping. Do not stop before recording the case.

通用後備

沒有 skill 發現？把契約給代理程式。

即使用戶端不支援 Agent Skills，只要代理程式能讀檔並執行本機 Python CLI，就能這樣做。

Read [ICONFLOW_REPO]/AGENTS.md completely.
Use [ICONFLOW_REPO]/.venv/.../python -m iconflow ...
Keep your shell in this consuming project.
Follow concept → compare → check → review → ship → case.

完整迴圈

每道指令
都有其位置。

從使用端專案執行這些指令。以絕對路徑使用 IconFlow 虛擬環境的 Python，讓設定與最終原始檔留在所屬產品裡。

  1. 01
    設計說明

    寫下產品契約。

    先記錄意圖再動手畫。設定也會鎖定目標、顏色、路徑與系統匣行為。

    python -m iconflow init --out iconflow.toml \
  --name "My App" --essence proof \
  --targets web,tauri,electron,tray
  2. 02
    探索

    逼出不同的視覺構想。

    至少透過不同視角做出四個概念。技法預設是鷹架，從來不是完成的識別。

    python -m iconflow styles
python -m iconflow new flat-geometric \
  --out work/my-app/a.svg
  3. 03
    比較

    先選形，再修細節。

    把兩到三個決選稿一起烘焙。在 128px、16px 與剪影下讀對照表。

    python -m iconflow compare \
  work/my-app/a.svg work/my-app/b.svg \
  work/my-app/c.svg --out work/my-app/bake.png
  4. 04
    檢視

    審查真實的目標轉換。

    修掉每則警告。然後檢視原生像素、alpha、自適應裁切、桌面圓角與系統匣情境。

    python -m iconflow check master.svg
python -m iconflow review --config iconflow.toml \
  --out work/my-app/review.png \
  --html work/my-app/review.html
  5. 05
    交付

    讓核准失敗即關閉。

    只有每個評分軸都達到 4/5 之後，才匯出 Review Lab receipt。原始檔或目標一改，那份 receipt 就過期。

    python -m iconflow ship \
  --config iconflow.toml \
  --review master-review.json
  6. 06
    學習

    把這一課交回系統。

    記錄最先失敗的是什麼、改了什麼，以及一條可重用的規則。沒記下的圖示什麼也教不了。

    python -m iconflow case new ...
python -m iconflow case lint
python -m iconflow case stats

確切的產出家族

只要求
你會交付的版面。

目標是明示的。IconFlow 不宣稱「所有平台」，完整的 app 卡片也不會默默變成好用的選單列剪影。

WEB / PWA

瀏覽器版面

Favicon 的 SVG 與 ICO、Apple touch icon、192px 與 512px 的 PWA 素材，外加 maskable 圖示與 manifest 片段。

--targets web,pwa
TAURI

桌面套件

PNG 尺寸、ICO、ICNS，以及 Tauri v2 桌面應用程式慣用的 src-tauri/icons 配置。

--targets tauri
ELECTRON

打包器輸入

供 Electron 與 electron-builder 打包流程使用的跨平台 PNG、ICO 與 ICNS 素材。

--targets electron
TRAY

選單列標誌

彩色系統匣 PNG、macOS 範本素材，以及 TypeScript 輔助程式。強烈建議使用專用、僅含標誌的 tray.svg。

--targets tray

建置範例

一份原始檔。明示的分支。

可編輯的 master.svg（主檔）仍是專案旁邊的真實來源。產出的檔案隨時都能重建。

icon-out/
├── favicon.svg
├── favicon.ico
├── icon-192.png
├── icon-512.png
├── icon-512-maskable.png
├── icons/
│   ├── icon.ico
│   └── icon.icns
├── build/
│   ├── icon.png
│   ├── icon.ico
│   └── icon.icns
└── tray/
    ├── tray.png
    ├── trayTemplate.png
    └── trayIcon.ts

已知界線

本機並不代表
神奇。

  • 目前為原始碼安裝。IconFlow 尚未發布到 PyPI。在正式發行前，不要使用 pip install ai-iconflow。
  • 一次性下載。設定需要網路以取得依賴與 Playwright Chromium；之後的渲染與建置都在本機。
  • 桌面範圍。Tauri 產出目前涵蓋桌面素材，不含 Android 或 iOS 的啟動畫面與圖示組。
  • 綁定工具鏈的校樣。可重現性假設使用相同的正規化 SVG、設定、IconFlow、Chromium 與 Pillow 版本。

可以進你的專案了

從任務開始。
以證據結束。

先跑一次引擎校樣。然後打開你的產品儲存庫，給代理程式一份具體簡報，並把每個設計決策留在未來維護者能檢視的地方。

安裝 IconFlow 讀設計手冊