- AI
- A
Specifications instead of prompts: how we rebuild frontend development with AI
The use of AI in development has long moved beyond generating simple functions. For large fintech, it's a matter of system integration and security. At the "SVOY Tech" IT cluster, we are constantly looking for ways to optimize Time-to-Market. In this material, we share our experience on how to make neural networks work with legacy code, why they need access to Figma via the MCP protocol, and why the future belongs to Spec Driven Development.
Systemic Approach Instead of Hype
We view AI as a real production tool, dividing the process into clear stages: from task evaluation to self-review. The main problem with standard chats is that they "drift" over long distances due to context limits, "blindness" to architecture, and lack of understanding of API contracts.
To overcome these limitations, we implemented a combination of Plan-First and Spec Driven Development (SDD). The process is structured as follows:
Planning Stage (Plan-First): First, an AI agent analyzes the task to understand the nuances and forms a high-level plan (plan). This allows for early synchronization of the system vision and avoids architectural errors.
Specification Creation (Spec): Based on the approved plan, a detailed specification is born. It serves as the "single source of truth" within the project, helping to maintain context and significantly simplifying information search or the implementation of new functionality in the future.
With this approach, the team defines behavior, interfaces, and software requirements before writing the implementation. The AI agent first generates a detailed plan and updates the specification, considering the business context and current code. The developer validates this plan, fixes weak points, and only then gives the go-ahead for code generation.
Tech Stack: The "Brain" and the "Hands"
Within the company, we use a combination of top LLMs: Claude 4.7 Sonnet, Opus 4.6, and GPT-5.3 CODEX. Two main paths are established for working with them:
Cursor: An IDE based on VS Code, which allows you to perform most of the work in a single environment — from code generation and analysis to debugging the interface in the browser. These are our "hands" for direct work with files.
OpenCode: Our proprietary CLI solution. It is more lightweight and used by developers for quick iterations, operational analysis of solutions, and as an additional knowledge base for the project.
ChatGPT: Acts as the "brain". We analyze Best Practices in it and configure complex system prompts, which are then implemented in Cursor.
Automating the "design — code" connection via MCP
Frontend is impossible without layout, so we implemented Model Context Protocol (MCP). This open standard allows the AI model to connect to external services, acting as "senses" for AI:
Integration with Figma: The agent gets direct access to the parameters of layouts, which allows meeting design requirements without endless edits.
Bundle with Sentry: Gives AI the ability to work with errors and events in real-time. Using AI analysis, the agent itself searches for relevant issues, analyzes stacktrace, and links them to specific code sections for quick correction.
This works like "senses" for AI: the agent gets direct access to the parameters of layouts, which allows meeting design requirements without endless edits. And with the help of Cursor Browser, we test and correct the interface directly inside the IDE, which saves a lot of time at the stage of layout and primary testing of components.
Security and determinism
The issue of security in fintech is critical. We have a strict policy: no work with clients' personal data is done through external AI. We use internal AI agents working through special layers and filters. The agent sees the code structure and logic, but sensitive information and real data are hidden from it. The use of AI is always determined by internal regulations.
Verification and quality control
After completing the task, the verification stage begins, where several levels of control are involved:
Qodo: a tool that acts as an independent reviewer, checking the code against company standards.
Advanced self-review: the developer runs auto-tests, compares the implementation with Figma layouts, and goes through the QA-checklist. For this stage, we use commands with formalized output (findings → plan → todos).
An important point: the final plan for the entire task is attached to the ticket. This allows the human reviewer not just to look at the "sheet" of code, but to immediately see the implementation structure: what decisions were made and how the work on the functionality was built. This approach significantly speeds up external review and improves its quality.
MCP integration with GitLab: the system evaluates changes according to given scenarios and forms comments on the Merge Request.
AI also helps monitor logs and performance, allowing for faster identification of the reasons for metric drops compared to manual analysis.
Results and profit
The introduction of these tools into the frontend development of the fintech group gave a net increase in productivity of 10–15% (taking into account the costs of training and infrastructure support).
However, it is essential to understand that the requirements for developer expertise have increased. Now, it is not only necessary to be able to write code but also to master automation tools virtuously. Development with AI is becoming a new industry standard, which we are actively shaping.
Write comment