Table of Contents
What You’ll Learn
- Development approach that achieved 90% time reduction
- How to break complex tasks using a breakdown strategy
- Documented challenges of AI development and their solutions
- When AI struggles vs. succeeds based on this experiment
The Result
The experiment proved that AI can reduce development time by 90% – turning a 2-week project into a 1-day project. We’ve built a fully functional internal application in 9 hours instead of the estimated 144-180 hours.
Project Scope: Scopic People Tool
The exercise involved developing Scopic People, an internal application designed to solve a common organizational challenge: accessing consolidated information about contractors that is typically scattered across multiple systems. The tool aims to create a centralized dashboard where users can view all relevant information about themselves or others (with appropriate permissions) on a single interface.
Key Requirements Implemented
- Single Source Integration: Initially pulls data exclusively from Zoho People, with architecture designed to accommodate additional data sources
- Caching Mechanism: Stores retrieved data in local database to prevent API overload and stay within usage limits
- Authentication: Secured behind Scopic’s Keycloak Single Sign-On (SSO) system
- Role-Based Access Control: Two roles implemented:
- Regular users: Access limited to viewing their own profile
- Management users: Access to search functionality and ability to view all contractor profiles
- User Interface: Built using Tailwind CSS with DaisyUI components, following Cupcake theme
Why Vanilla PHP
The methodology deliberately used vanilla PHP without frameworks to ensure the tool would have no head start from existing libraries, providing a fair evaluation of AI-powered development capabilities.
Technology Stack Used
- AI Tool: Windsurf by Codeium with Claude 3.5 Sonnet
- Backend: Vanilla PHP (no frameworks)
- Frontend: Tailwind CSS with DaisyUI components
- Theme: Cupcake theme
- Database: PostgreSQL with pgAdmin
- Authentication: Keycloak Single Sign-On (SSO)
- Containerization: Docker and docker-compose
- Version Control: Git
Documented Development Workflow
- Task Definition: Break down project into smaller, manageable tasks
- Instruction: Provide Windsurf’s Cascade feature with natural language instructions
- Code Generation: Allow the LLM to generate necessary code
- Review and Iteration: Evaluate generated code, accept or provide further instructions
- Version Control: Commit accepted changes to Git to maintain clear history
Challenges and Solutions
Task Complexity Management
Challenge: Initially providing comprehensive instructions for complex UI components overwhelmed the LLM, resulting in incomplete or incorrect implementations.
Solution: Breaking down tasks into smaller, more manageable steps proved highly effective. Instead of requesting an entire interface at once, the process was divided into discrete components (header, footer, main content), each reviewed and refined before proceeding.
Example prompt of successful breakdown:
Let’s split the main content into 4 cards:
– Top left: Card with photo, full name, email, job title
– Top right: Card with compensation details: contract type, salary, table with history
– Bottom left: Card with person’s files. It should be a table with file name and size
– Bottom right: Card with leave details. Available PTO balance, available holiday balance, available sick day balance and a table with vacations taken/scheduled in the last 12 months.
This prompt succeeded by breaking one complex interface into four specific, manageable components with clear boundaries and explicit content requirements.
LLM Loop Prevention
Challenge: In certain scenarios, Cascade entered repetitive loops, making the same changes or undoing previous work without progress.
Solution: When loops were detected, the process was halted, changes were reverted to the last stable state, and instructions were reformulated with greater specificity. Frequent commits to version control proved invaluable for recovering from these situations.
Balancing AI and Manual Intervention
Challenge: Determining when to rely on the LLM versus making manual changes required judgment calls throughout the process.
Finding: For minor adjustments or simple changes, direct manual editing would be more efficient than instructing the LLM. Optimal productivity results from a hybrid approach—using AI for boilerplate generation, complex logic, and architectural design while reserving simple tweaks for direct human intervention.
External API Integration
Challenge: The LLM struggled when attempting to integrate with the Zoho People API due to insufficient public documentation.
Solution: Human intervention to manually explore the API and provide specific endpoint information allowed the LLM to successfully complete the integration.
Code Quality Assessment
The quality of code produced by the LLM was evaluated as meeting acceptable standards:
- Structure: The code followed logical organization patterns and appropriate abstraction levels
- Maintainability: The code was readable and well-documented
- Functionality: All specified requirements were successfully implemented
- Extensibility: The architecture properly supported future additions as specified
Development Sequence Used
- Initial Setup: Repository initialization with Git
- Static UI Development:
- Header creation
- Footer and theme selection
- Search functionality
- Main content area (required more detailed instructions and several iterations)
- Dynamic Conversion: Converting static HTML to PHP templates
- Authentication: Composer integration, AuthMiddleware, Keycloak integration
- Data Integration: Mock data model, service architecture, Zoho People integration
- Infrastructure: Docker configuration, database connection, migration scripts, caching
- Access Control: Role-based permissions
Key Findings
What Worked
- Small Task Granularity: Breaking complex tasks into smaller, manageable steps
- Continuous Review: Evaluating every change generated by AI before proceeding
- Frequent Commits: Maintaining clear history and enabling recovery
- Conversational Continuity: Building on previous work with references
- Specific Breakdowns: Detailed component specifications
What Didn't Work
- Complex Instructions: Initial attempt to generate entire interface overwhelmed the LLM
- Large Tasks: Comprehensive instructions for complex UI components resulted in incomplete implementations
- Insufficient API Documentation: LLM struggled with Zoho People API integration due to inadequate public documentation
The New Developer Role
Developers are no longer just coders—they’re becoming AI instructors, curators, and reviewers. The success of vibe coding depends on clear communication, domain understanding, and critical assessment skills, not just technical expertise.
Best Practices Derived
- Break complex tasks into small, discrete steps
- Review every change generated by AI before proceeding
- Commit changes frequently to maintain clear history and enable recovery
- Use AI for generating boilerplate, complex logic, and architectural patterns
- Handle simple modifications manually
- Provide explicit, unambiguous instructions with necessary context
NOTE: For complete technical details, methodology, and additional validation experiments, see the full white paper:
About Creating the AI Development Toolkit
This guide was authored by Mikheil Kandaurishvili, and reviewed by Mladen Lazic, Cheif Operations Officer at Scopic.
Scopic provides quality and informative content, powered by our deep-rooted expertise in software development. Our team of content writers and experts have great knowledge in the latest software technologies, allowing them to break down even the most complex topics in the field. They also know how to tackle topics from a wide range of industries, capture their essence, and deliver valuable content across all digital platforms.
Note: This blog’s images are sourced from Freepik.
