# Keeponfirst Keeponfirst Agentic Workflow Starter Keeponfirst Agentic Workflow

> Agentic Workflow Skill (v2)

- Skill: `tomevault-io/keeponfirst-keeponfirst-agentic-workflow-starter-keeponfirst` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/keeponfirst-keeponfirst-agentic-workflow-starter-keeponfirst`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/keeponfirst-keeponfirst-agentic-workflow-starter-keeponfirst/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/keeponfirst-keeponfirst-agentic-workflow-starter-keeponfirst

---


# 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

| Agent | Role | Tool |
|-------|------|------|
| **Antigravity** | Orchestrator - plans, reviews, releases | This AI |
| **Nano Banana** | Asset Generator - creates images | MCP |
| **Stitch** | UI Designer - generates screens | MCP |
| **Jules** | Cloud Coder - implements in background | CLI |

---

## 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:
```markdown
---
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.

```javascript
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

| Phase | Action | Agent |
|-------|--------|-------|
| 0 INSIGHTS | Market research, visual direction | Orchestrator |
| 1 PLAN | Create spec, get approval | Orchestrator |
| 1.5 WIREFRAME | Low-fi comparison, select | Orchestrator |
| 2 ASSETS | Generate images | Nano Banana MCP |
| 2.5 DESIGN | Design DNA → Audit → Refine Loop | Stitch MCP |
| 3 CODE | Submit task, monitor | Jules CLI |
| 4 REVIEW | Verify changes | Orchestrator |
| 5 RELEASE | Commit and push | Orchestrator |

## Trigger Keywords

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

## Resume Keywords

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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/keeponfirst) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->