How a Designer started shipping production Rails - Alicia Rojas & Arely Rivera

Alicia Rojas and Arely Rivera shared how a designer began contributing directly to a Rails production codebase by leveraging structured frameworks, design “harnesses,” and clear design rules, which improved collaboration and code consistency but still required human judgment for quality. Their experience highlighted that while automation and systems can empower designers to ship production code, enforcing rules and maintaining close designer-engineer collaboration remain essential for robust products.

Certainly! Here’s a five-paragraph summary of the talk “How a Designer Started Shipping Production Rails” by Alicia Rojas and Arely Rivera:

Alicia Rojas, a software engineer, and Arely Rivera, a lead product designer, shared their experience of how a designer began contributing directly to a Rails production codebase. The story began with a massive pull request (PR) from Arely—over 7,000 lines added and 153 files changed—which Alicia, after thorough checks, decided to merge. Despite passing all automated tests and reviews, the release caused several issues in production, highlighting the difference between engineering and QA reviews and the importance of structural safeguards.

The bulk of the PR was not as daunting as it seemed: most changes were in development-only directories, with only a small portion affecting actual product markup. The team had been experimenting with “harnesses”—safe environments and tools that allowed designers to work directly in the codebase. They also introduced the concept of “binding” for design, encoding design rules and patterns in both code and natural language, making it easier for agents (and designers) to follow consistent guidelines.

Despite the structural improvements, four defects slipped through: hardcoded hex values, a duplicate canonical tag, smaller form labels, and a white navigation bar on a white page. These issues underscored that while frameworks and automated checks can catch many problems, some require human judgment or specialized audits. The process, however, significantly reduced inconsistencies and improved the overall quality of the codebase.

To formalize their approach, the team developed a five-level “onion” design model: base values (like padding and radii), primitives (basic components), compositional patterns (combinations of primitives), written rules (contextual design decisions), and screens (final UI with evidence for debugging). They tested how well agents could follow the design system, discovering that clear, strict schemas worked best. After refining their prompts and framework, agents could reliably produce UI that matched expectations, though human judgment remained essential for quality and context.

The speakers concluded that while frameworks and automation make execution more repeatable and accessible—enabling designers to contribute directly to production code—the value of human judgment, taste, and understanding of users has only increased. They encouraged teams to evaluate their own frameworks and consider how better systems could empower more team members to contribute effectively, emphasizing that rules must be enforced to be meaningful and that collaboration between designers and engineers is key to building robust products.

Useful Links