Setup and context
The future of mobile development is concurrent, not sequential.
Traditional: Requirements → Design (days) → Code (weeks) → Test → Ship
AI-Driven: Requirements (AGENTS.md) → Design, Code, Tests (parallel) → Ship
All phases execute simultaneously, with AI agents coordinating through a shared specification. This article walks you through the complete setup.
The AI-Agent Development Paradigm
What Changes
| Aspect | Traditional | AI-Driven |
|---|---|---|
| Spec Format | 50-page doc (lost in translation) | AGENTS.md (machine-readable) |
| Design Process | Designer → Design file | AI reads AGENTS.md → Figma |
| Code Process | Dev manually implements | AI reads Figma via Code Connect → Code |
| Testing | QA writes tests manually | AI generates tests from code |
| Review | Human code review (1-2 days) | AI instant review + auto-fix |
| Total Time | 4-6 weeks | 2-3 days |
The Cost of Serialization
When tasks wait for the previous task to finish:
- Design delays development
- Missing tests delay review
- Review blockage delays fixes
AI agents eliminate these bottlenecks by executing in parallel.
AGENTS.md: The Single Source of Truth
Structure
# Project: Task Manager Mobile App
## Overview
Build a native iOS/Android task management app.
- iOS 16+, Android 12+
- Offline-first with cloud sync
- Dark mode support
## Agents & Capabilities
### Design Agent (Figma MCP)
- Generate screens matching Material Design 3 & HIG
- Create responsive variants
- Enforce accessibility (WCAG AA)
### Dev Agent
- Tech: Swift (iOS), Kotlin (Android), Rust (shared)
- Patterns: MVVM, Repository, Clean Architecture
- Constraints: Type-safe, no hardcoded strings, DRY
### Test Agent
- Coverage: 85% minimum
- Types: Unit, Widget, Integration, E2E
- Security focus: No secrets in code, input validation
### Review Agent
- Security scanning
- Performance profiling
- Accessibility checks
- Auto-fix safe issues, block unsafe ones
## Features to Implement
1. Task CRUD
2. Recurring tasks
3. Dark mode
4. Offline sync
5. Push notifications (future)
## Development Phases
- Phase 1: Auto-design (Day 1)
- Phase 2: Auto-code (Day 2)
- Phase 3: Auto-test (Concurrent)
- Phase 4: Auto-review (Continuous)Every agent reads this file. It's the source of truth.
Design Pipeline: Figma MCP
Step 1: AI Generates Screens
$ rork agent run --task "Generate all screens from AGENTS.md"
# AI executes:
# 1. Parse AGENTS.md features
# 2. Create Figma frames for each screen
# 3. Apply Material Design 3 tokens (Android)
# 4. Apply Human Interface Guidelines tokens (iOS)
# 5. Generate dark mode variants
# 6. Create tablet/landscape layoutsStep 2: Code Connect Extraction
// figma.config.ts - defines design ↔ code mapping
figma.connect("TaskListScreen", {
component: "lib/screens/task_list_screen.dart",
props: {
tasks: figma.array("Tasks"),
onTaskTap: figma.function("onTaskTap"),
onAddTask: figma.function("onAddTask"),
},
});
// Auto-generated from Figma:
class TaskListScreen extends StatefulWidget {
final List<Task> tasks;
final Function(Task) onTaskTap;
final VoidCallback onAddTask;
const TaskListScreen({
required this.tasks,
required this.onTaskTap,
required this.onAddTask,
});
@override
State<TaskListScreen> createState() => _TaskListScreenState();
}Development Pipeline: Code Generation
Constrain: Define Boundaries
dev_constraints:
forbidden:
- hardcoded_strings # Use i18n
- direct_database_access # Use repository
- api_key_in_code # Use environment
- weak_validation # Validate inputs
allowed:
- async/await patterns
- dependency_injection
- loggingInform: Provide Context
async function buildContext() {
return {
agents_md: readFile("AGENTS-md"),
figma_file: await fetchFigmaFile(),
tech_stack: {
ios: "Swift + SwiftUI",
android: "Kotlin + Jetpack Compose",
},
standards: {
architecture: "MVVM",
patterns: ["Repository", "DI"],
},
};
}Verify: Automated Validation
#!/bin/bash
set -e
# Type checking
dart analyze --fatal-infos
swift build -configuration Debug
# Tests
flutter test --coverage
swift test
# Security
dart pub dev analyze
snyk test
# Coverage
if coverage < 85%; then
exit 1
fi
echo "✓ All verifications passed"Correct: Automated Fixes
async function fixCodeIssues(pr: PullRequest) {
let attempts = 0;
while (attempts < 3) {
const validation = await verify(pr.code);
if (validation.passed) {
return pr.code;
}
// AI attempts fix with error feedback
pr.code = await ai.generateFix({
code: pr.code,
errors: validation.failures,
agents_md: readFile("AGENTS-md"),
});
attempts++;
}
// If still failing, escalate to human
return null;
}Testing Pipeline: Parallel Test Generation
Unit Tests
// Generated automatically from source code
test('TaskModel.isOverdue returns true when past due date', () {
final task = Task(
title: 'Buy milk',
dueDate: DateTime.now().subtract(Duration(days: 1)),
);
expect(task.isOverdue, isTrue);
});Widget Tests
// Generated from Figma component specs
testWidgets('TaskCard displays task title', (WidgetTester tester) async {
await tester.pumpWidget(
MaterialApp(
home: TaskCard(
task: Task(title: 'Test task'),
onTap: () {},
),
),
);
expect(find.text('Test task'), findsOneWidget);
});Integration Tests
// Generated from AGENTS.md feature specs
testWidgets('User can create, edit, and delete task',
(WidgetTester tester) async {
// Create
await createTask('New task');
expect(find.text('New task'), findsOneWidget);
// Edit
await editTask('New task', 'Updated task');
expect(find.text('Updated task'), findsOneWidget);
// Delete
await deleteTask('Updated task');
expect(find.text('Updated task'), findsNothing);
},
);E2E Tests
// Generated from critical user journeys
testWidgets('Complete onboarding and create first task',
(WidgetTester tester) async {
// Sign up
await signup('user@example.com', 'password123');
// Accept permissions
await acceptNotifications();
// Create first task
await createTask('My first task');
// Verify sync to cloud
await expectCloudSync('My first task');
},
);Code Review Pipeline: Harness Engineering
Security Checks
const securityReview = {
checks: [
"No hardcoded API keys",
"SQL injection prevention",
"Secure crypto usage",
"Permission handling",
],
action: "BLOCK if CRITICAL",
};Performance Checks
const performanceReview = {
checks: [
"No N+1 database queries",
"Animation frame rate > 60fps",
"Memory leaks detection",
"Build time regression",
],
action: "COMMENT if HIGH",
};Accessibility Checks
const a11yReview = {
checks: [
"Color contrast (WCAG AA)",
"Touch target size (48px+)",
"Screen reader labels",
"Keyboard navigation",
],
action: "BLOCK if CRITICAL",
};End-to-End Example: Day 1 Automation
Input: AGENTS.md with feature specs
Execution (parallel):
├─ Design Agent
│ ├─ TaskListScreen (with dark mode)
│ ├─ TaskDetailScreen
│ ├─ AddTaskScreen
│ └─ Tablet layouts
│ Status: ✓ 4 screens in Figma
│
├─ Dev Agent
│ ├─ task_model.dart (with validation)
│ ├─ task_repository.dart (with caching)
│ ├─ task_list_screen.dart (400 LOC)
│ ├─ Database schema + migrations
│ └─ Network layer
│ Status: ✓ 1200 LOC production code
│
├─ Test Agent
│ ├─ unit_tests.dart (250 LOC)
│ ├─ widget_tests.dart (300 LOC)
│ ├─ integration_tests.dart (150 LOC)
│ └─ e2e_tests.dart (200 LOC)
│ Status: ✓ 900 LOC test code, 87% coverage
│
└─ Review Agent
├─ Security: 0 issues
├─ Performance: 0 regressions
├─ A11y: 2 minor suggestions
├─ Auto-fixed 2 issues
└─ Status: ✓ Ready for merge
Output: Production-ready app, fully tested, reviewed, documented
Time: ~4 hours (parallel execution)
Conclusion
The future isn't "AI replaces developers"—it's "developers + AI = 10x output." AGENTS.md + Figma MCP + harness engineering creates a system where requirements flow seamlessly into tested, reviewed, production-ready code.
Start today. Your AGENTS.md is waiting.