Keeponfirst Keeponfirst Agentic Workflow Starter Keeponfirst Agentic Workflow

Agentic Workflow Skill (v2)

An 8-phase development workflow that coordinates multiple AI agents to deliver high-quality features, with enhanced UI quality controls.

Pipeline

INSIGHTS(0) → PLAN(1) → WIREFRAME GATE(1.5) → ASSETS(2) → DESIGN(2.5) → CODE(3) → REVIEW(4) → RELEASE(5)

• UI Tasks: Full pipeline required
• Logic-only Tasks: Skip phases 0, 1.5, 2.5 (note in PLAN)

Agent Roles

Phase 0: INSIGHTS

Output: research/<feature>.md

Skip for logic-only tasks (note in PLAN).

Required content:

1. User pain points (Jobs-to-be-done)
2. Similar patterns (3-5 examples)
3. Anti-patterns to avoid
4. Visual direction candidates (A/B/C)
5. Recommendation

Human Gate: Problem definition ✓, Visual direction (A/B/C) ✓

Phase 1: PLAN

Output: plans/<feature>.md

Required content:

1. Scope (In/Out)
2. Technical Design
3. Task breakdown
4. Acceptance Criteria
5. Decision Snapshot

Human Gate: Scope ✓, Data Model ✓, Risk ✓, Enter Wireframe? ✓

Phase 1.5: WIREFRAME GATE

Output: wireframes/<feature>_A.md, wireframes/<feature>_B.md, wireframes/<feature>_decision.md

Skip for logic-only tasks.

Compare structure before style. Each version must include:

• Screen structure & info hierarchy
• Primary flow (shortest path)
• Tap map (thumb-zone analysis)

Human Gate: Select A/B/Redo ✓, Critical interactions ✓

Phase 2: ASSETS

Output: assets/generated/<feature>/

Option A: Generate Prompt Files (Default)

Create .prompt.md files in nanobanana/queue/ for manual or browser-automated execution:

---
output_path: assets/generated/<feature>/hero.png
aspect_ratio: 16:9
---

# Hero Image

Create a modern illustration showing...

Option B: Use Nano Banana MCP (Optional)

⚠️ Gemini API Free Tier does NOT support image generation. Paid key required.

nanobanana_generate_image({
  prompt: "...",
  output_path: "assets/generated/<feature>/hero.png",
  model: "gemini-2.5-flash-image",
  aspect_ratio: "16:9"
})

Phase 2.5: DESIGN (Stitch MCP)

Output: stitch/designs/<feature>/

Phase 2.5-A: Structured Prompt Generation

目標：在呼叫 Stitch 之前，先建立絕對的設計基準。

1. 分析需求：解構使用者的產品構想
2. 定義 Design DNA (存入 design_dna.json)：
   • visual_vibe: 風格關鍵字 (e.g., "Soft Warmth", "Organic Modernism")
   • color_palette: 精確 HEX Code (Primary, Secondary, Background, Surface) + 禁用色 (Negative Constraints)
   • components: 圓角 (Radius)、陰影 (Shadows)、字體 (Typography)
3. 產出 Master Prompt：包含所有 DNA 的全域描述
4. 產出 Screen Prompts：每個畫面獨立 Prompt，強制繼承 Design DNA

Phase 2.5-B: Visual Audit & QA

目標：Stitch 產出後，對照 Design DNA 進行視覺審查。

一致性檢查 (Consistency)：

• Navigation Bar：所有畫面 Tab Bar 樣式是否相同？(Icon 風格、背景色、高度)
• Status Bar：是否留出 Safe Area？

色彩準確度 (Color Accuracy)：

• 背景色是否為指定 HEX？(例：是否變成純白而非米色)
• 是否出現未定義顏色？

元件完整性 (Component Integrity)：

• 按鈕對比度足夠？文字清晰可讀？
• 插畫風格統一？(避免混用 3D/2D)

Phase 2.5-C: Refinement Loop

目標：若審查發現問題，自動生成修正指令，直到通過為止。

IF Pass → Final Output (進入 Phase 3)
IF Fail → Refinement Loop：
  1. 列出具體錯誤 (e.g., "History screen nav bar ≠ Dashboard")
  2. 生成 Refinement Prompt (使用強指令：FORCE REPLACE, RESET BACKGROUND, UNIFY ICONS)
  3. 重新呼叫 Stitch
  4. 返回 Phase 2.5-B 再次審查

Artifacts: design_dna.json, master_prompt.md, screen_*.png, screen_*.html, audit_log.md

Final Checklist: Design DNA 符合 ✓, 一致性通過 ✓, CTA hierarchy ✓, Empty/Error states ✓

Phase 3: CODE

Default: Jules CLI | Optional: Codex

1. Create task in jules/tasks/
2. Submit: jules new --repo ... "$(cat task.md)"
3. Watch: ./scripts/agent.sh watch <session_id>

Input files must include design/asset paths.

Phase 4: REVIEW

Bug fixes & deviations ONLY. Scope changes → back to PLAN.

1. git diff to check changes
2. Verify UI in browser
3. Mark results: ✅ Fixed | ⚠️ Unresolved | 🔴 Risk

Phase 5: RELEASE

1. git add -A
2. Commit with workflow metadata
3. git push

Include Release Snapshot: Completed items, Known limitations, Next steps.

Quick Reference

Trigger Keywords

• "/kof", "/workflow"
• "KOF workflow", "KOF agentic"
• "keeponfirst workflow"
• "用 KOF 開發..."

Resume Keywords

• "/kof resume"
• "圖產好了"
• "assets ready"

Converted and distributed by TomeVault — claim your Tome and manage your conversions.