More Code, Fewer Pixels
summary
Explains how Hashrocket replaces a separate design phase with three concrete tools: UI directory (a maintained set of static, versioned views used as living design refs), Phil (a Faker wrapper that generates realistic test content), and Stagehand (data-attribute driven UI state toggles). Designers commit HTML/CSS into the repo, developers take over JavaScript, and there’s now one clear handoff point, cutting PSD back-and-forth and preventing layout regressions; these tools power the company site and client prototypes and are used successfully in production.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:21Pixels to code at HashiRocket
- 4:13Client-driven design challenges
- 8:22Iterative design workflow
- 10:48Expertise handoffs
- 13:36Design process evolution
- 16:46Design-to-code friction
- 18:33UI directory tool
- 22:48Fixing layout bugs
- 26:44UI states with Stagehand
- 30:55Key takeaways
- 32:00Q&A
related talks
28mBecause F$%k Photoshop
48mResponsive Design Workflow
31mIncremental Design - A conversation with a designer and a developer
49mA Better Design-Dev Handoff Experience: Code-based Design System
29mEffective user interface design with HTML prototyping
14mRethinking Designer-Developer Collaboration
21mFrom handoffs to upstream
24mRethinking Design Practices