From 6 Person-Days to 1: An AI-Driven Client Feature Development Case Study
# AI Coding Implementation in Complex Client-Side Development
## Introduction
AI-assisted coding is becoming a **mainstream trend**—Microsoft noted that 30% of their code is AI-generated.
Despite its potential, adoption rates for complex **client-side** projects remain low due to:
- **Complex business logic**
- **Varied developer familiarity**
- Ongoing debates about **AI capability, instruction, and correctness**
Following the principle: *“Practice is the sole criterion for testing truth”*, our team evolved from simply encouraging developers to experiment with AI, to:
1. Assigning **real business tasks** to AI
2. Designing **AI-friendly architectures**
3. Establishing **prompt and workflow patterns** to maximize quality
---
## 1. Starting with AI Coding
We launched an **AI coding exercise**:
- All front-line developers used *oneDayNative* to complete a routine requirement
- Collected feedback
- Analyzed issues
---
### 1.1 AI Coding Problem Summary
**Tool-related issues** are improving with Coding Agent innovations and are outside this scope.
Examples:
- **Claude Code**: Multi-subAgent approach for broader architectural awareness
- **Multi-tool calls**: To improve API/method lookup efficiency
- **Context compression**: Mitigates token-length limits
**Non-tool issues** often arise from:
- Insufficient **project understanding**
- Vague or indirect task descriptions
- Scattered keyword/context, leading to high token use and hallucinations
**Solution approach**:
- Clear and direct prompts
- Sufficient context
- Relevant architectural and coding standards in input
Suggestions from feedback:
---
## 2. Business Requirement Case Study
**Requirement**: Outfit feed framework to support multi-tab nesting.
**Involves**:
1. **UI Layer**: Multi-tab templates & feed components
2. **Service Layer**: New service for multiple info flow instances
3. **Debugging/Interaction**: Pull-to-refresh, clicks, etc.
Architecture:
Human-designed → AI builds scoped modules
*(We avoid “AI complete everything” upfront—explained later).*
---
### 2.1 Service for Multiple Info Flow Instances
**Existing module**: `InfoFlowService` (handles one-to-one info flow).
Goal: Expand to **one-to-many** (multi-tab). Requires deep design understanding.
**Step 1.1**: Produce `InfoFlowService Module Analysis Report.md`
---
### Benefits of Scoped AI Tasks
- Improved accuracy
- Reduced hallucination
- Better efficiency for complex projects
---
## 3. `InfoFlowService` Module Analysis
### 3.1 Overview: Role in Architecture
- **Central data orchestration**
- **Unified API** for feed data
- **Event subscriptions**
- **Lifecycle integration** in `TurboService`
---
### 3.2 Modules Depending on `InfoFlowService`
- `InfoFlowListTemplate`
- `FeedStackContainer`
- `InfoFlowComponent`
- `SearchInfoFlowProvider`
- `HomeFeedCoordinator`
---
### 3.3 Dependency Graph
graph TD
InfoFlowService --> InfoFlowListTemplate
InfoFlowService --> FeedStackContainer
InfoFlowService --> InfoFlowComponent
InfoFlowService --> SearchInfoFlowProvider
InfoFlowService --> HomeFeedCoordinator
---
### 3.4 Class Diagram
classDiagram
class InfoFlowService {
+fetchInitialData(params)
+fetchNextPage(params)
+subscribe(listener)
+unsubscribe(listener)
+notifyUpdate(data)
}
class InfoFlowRepository {
+getLocalCache()
+saveCache(data)
+requestNetworkData(endpoint, params)
}
InfoFlowService --> InfoFlowRepository
---
### 3.5 Summary of Functions
**Roles**:
- Aggregator
- Notifier
- Cache Coordinator
- Microservice Participant
Ensures **separation of concerns** between UI and data.
---
## 4. MultiInfoFlowService Design Notes
Based on existing service, `MultiInfoFlowService` will:
- Comply with `MultiInfoFlowServiceProtocol : AnyObject`
- Avoid `pageDataService` dependency
- Manage **multi-tab feeds**
- Coordinate retrieval, caching, updates
---
## 5. TurboDressing UI Tree Structure
### V2 MultiTabTemplate Example
graph TD
VC --> MultiTabTemplate
MultiTabTemplate --> FeedStackContainer[Header Container]
MultiTabTemplate --> HorizontalPageContainer[Tabs Container]
HorizontalPageContainer --> InfoFlowComponent1
HorizontalPageContainer --> InfoFlowComponent2
HorizontalPageContainer --> InfoFlowComponentN
---
### Next Steps
- **MultiTabTemplate**: UITableView with header/tabs containers
- **HorizontalPageContainer**: Pages horizontally
- **InfoFlowComponent**: Tab-specific info flow rendering
---
## 6. Extending Data Binding Protocol — `isRepeat`
### Requirements:
- Understand project → Create `PageModelV2数据绑定规则.md`
- Then extend data binding to support `isRepeat`
**Example JSON**:{
"subTemplates": [
{
"layout": {
"tabs": [
{
"isRepeat": "true",
"type": "infoflowListComponent",
"data": "{{$.tabs}}"
}
]
}
}
]
}
**Logic**:
- If `isRepeat` is `true`, `data` field must be array
- Create `CardModel` per array element
- Applies to root and sub-templates
---
**Outcome**:
- Acceptance rate: **95%**
- Fixed duplication/readability issues after feedback
---
## 7. Efficiency Metrics
- AI-assisted coding: **1 person-day** + manual checks
- Manual estimate: **6 person-days**
- Integrated debug buffer: +33%
- Net efficiency gain: **~300%**
---
## 8. Reflection
### 8.1 Task Suitability for AI
**Better suited for AI**:
- Clear dependencies
- Strong documentation
**Requires human review**:
- All AI output
---
### 8.2 Breaking Down Work
- Smaller, cohesive units
- Easier verification
- Less prompt complexity
---
### 8.3 Crafting Effective Prompts
- Direct, explicit descriptions
- Predictable output scope
- Avoid overly long context
---
### 8.4 Building the Knowledge Base
- Architecture docs + Coding constraints
- Tools: *OneDayNative*, *Yuque*, *Cursor*
---
## 9. Business Development Paradigm
Example: **TurboFlow** microservice framework
Directory:Sources/
├── Core/
│ ├── Base/
│ ├── Engine/
│ ├── Data/
│ └── Utils/
├── Biz/
│ ├── Services/
│ ├── Components/
│ ├── Containers/
│ └── Templates/
---
## 10. Cursor Rules Overview
(Developers follow specific `.mdc` rule files for architecture, component, template, service, model, UI tree.)
---
## 11. Development Workflow
**Approach**:
- Align technical solution
- Use AI during coding stage for new features
- Manual coding for integration debug work
---
**Example**: Recent 3-day work snapshot
---
## 12. Final Notes
Combining **AI-assisted coding** with platforms like [AiToEarn官网](https://aitoearn.ai) enables:
- Centralized generation
- Multi-platform release
- Analytics & ranking
Especially beneficial for:
- Maintaining cross-platform design consistency
- Converting AI output into measurable, monetizable work
