Surrounding has been a discourse polarized into two types of people: those who fully embraced its potential and those who reject it outright. In between are those (like us at Espina Studio) who recognize AI’s capabilities, but are firm believers in the irreplaceable nature of human creativity.
Work dynamics have undeniably shifted, with expectations for faster production and polished output fueled by AI’s accelerated, but often overestimated, processes. Still, human oversight, strategy, and quality control remain central to everything we do, even with assistance in our workflow. Our approach comes from curiosity: continuously exploring how to make AI a valuable tool in our arsenal that preserves and coexists with the creative sensibility of our work.
Since LLMs are trained on massive datasets of human-made content, even the most advanced model’s output lacks uniqueness due to its constraint of solely working with patterns. While this challenges its creative capabilities, it highlights what AI truly excels at: analytical work.
Understanding its capabilities in web development
The growing popularity of vibe-coded apps and websites has dramatically accelerated development timelines. While AI can translate ideas into functional code, successful implementation still demands human judgment to determine what works and what‘s unnecessary.
As with design, web development also suffers from poor-quality, generic, or soulless outputs, correcting those mistakes ultimately consumes more time than building it ourselves would have. but we recognized something important: AI could handle the heavy lifting if we maintained control over the architecture, naming conventions, and interactions.
Along with our development team, we conducted research, tested tools, and experimented with workflows that aligned with our needs to determine what parts could be delegated. By comparing results from different assistants using real studio projects, we established clear rules and frameworks that keep outputs aligned with our development processes and avoid the unnecessary styles, animations, and layouts that are typically generated.
Establishing constraints
Before outlining the rules for AI to follow, we wanted to establish internal guidelines defining how this human-and-machine relationship should function. We agreed that code generation needed to respect three principles:
- To maintain consistent quality through standardized coding patterns, AI generates only the base structure for website sections. Developers then polish the fine details and interactions.
- Code generation would have to be based on our programming standards and include responsive design considerations.
- Decisions should be in line with their defined brand identity variables (typography, variables, classes, color codes).
A singular file
Having our relationship defined, we compiled all these specifications into a singular SKILL.md file and built an infrastructure around it. This lightweight, plain-text file could be loaded into any compatible AI model with instructions, rules, and, if necessary, scripts. Housed in a private repository, any one of our developers can install and update from a single source with changes applied across all projects, enabling continuous improvement.
When paired with the skill file and design image, the agent generates section structures while adhering to several key constraints: Bootstrap grids over custom CSS for consistency, variable reuse for token efficiency, exclusive BEM class naming, built-in accessibility practices, centralized registration for component styles, and strict adherence to Bootstrap interactions that avoid implementing undefined behaviors.
Conclusion
AI handles the repetitive layers of coding, freeing our team to invest their efforts into the animations, unique interactions, and brand nuances that give a website its unique characteristics. Saved time flows back into the projects themselves, allowing us to scale our output and delivering even highly polished experiences.
For the time being, we think AI is still far from being a worthy competitor to human creativity, let alone a replacement. It’s a catalyst, one that lets us protect what makes our work human and pushing further than we could alone.
Glossary
AI: The broad umbrella for machines doing tasks that normally require human intelligence.
Architecture: The overall structure of the website or application. How pieces fit together, data flows, and systems communicate.
Assistant: An application that uses an LLM (or other AI) to help users accomplish tasks.
BEM (Block Element Modifier): a naming convention for CSS classes that keeps styles organized. Examples:
Block: .card (the independent component)
Element: .card__title (part of the card component)
Modifier: .card–large (a variation of the card)
Bootstrap: a pre-built CSS library of styled components and layout tools.
HTML(HyperText Markup Language): the base code of every webpage; it defines what things are (such as headings, paragraphs, buttons).
LLM(Large-Language Model): A specific type of AI trained on vast text data to understand and generate human language.
Markdown(.md extension): An almost universally readable and lightweight formatting language for plain text. In this case, it contains context, rules, or preferences the AI should follow.
Private Repository: A secure folder on a server where only authorized members can access the files.
Responsive Design: ensures websites look and function well on any screen size.
Tokens: chunks of text that AI systems count when processing input and generating output. Using more tokens takes longer and every AI has a maximum capacity.
Vibe-coding: slang for using AI to write code based on prompts.
Authors: Angel Gómez, Carlos Gómez, Carolina Ortiz, Diana Tolano, Osvaldo Vázquez
