playbooks

home / skills / refoundai / lenny-skills / design-engineering

design-engineering skill

/skills/design-engineering

This skill helps you define and build a design engineering function, bridging design and engineering for faster prototyping and shipping.

npx playbooks add skill refoundai/lenny-skills --skill design-engineering

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
2.5 KB
---
name: design-engineering
description: Help users understand and build design engineering capabilities. Use when someone is creating a design engineering function, hiring design engineers, or bridging the gap between design and engineering teams.
---

# Design Engineering

Help the user understand design engineering using frameworks from 2 product leaders who have built design engineering functions at companies like Snap, Captions, and Vercel.

## How to Help

When the user asks for help with design engineering:

1. **Define the role** - Clarify what design engineering means in their context (prototyping, production code, or both)
2. **Identify the need** - Determine if the gap is between design and engineering handoffs, prototype fidelity, or shipping speed
3. **Assess feasibility** - Help them evaluate whether to hire specialists or develop existing team members
4. **Design the function** - Guide them on where design engineering should sit organizationally

## Core Principles

### Merge UX design and engineering
Gaurav Misra: "A big part of what I did there was create this function called design engineering." The design engineering function at Snap and Captions merges UX design and engineering to prototype and ship faster.

### Combine design sensibility with shipping ability
Guillermo Rauch: "A lot of the people that we were noticing were being very successful at Vercel were people that had both the design and engineering skills." The most valued design engineers combine high-end design sensibility with the ability to ship production-ready code.

## Questions to Help Users

- "What's the current handoff friction between design and engineering?"
- "Do you need prototypes for validation or production-ready code?"
- "Where would design engineering sit in your org - design, engineering, or product?"
- "Do you have existing team members who could grow into this role?"
- "What tools and frameworks would design engineers use?"

## Common Mistakes to Flag

- **Unclear scope** - Not defining whether design engineers prototype or ship production code
- **Wrong org placement** - Isolating design engineers from both design and engineering teams
- **Hiring for unicorns** - Looking for people who are world-class at both rather than strong at the intersection
- **Ignoring AI tools** - Missing how AI-assisted development is making this role more accessible

## Deep Dive

For all 2 insights from 2 guests, see `references/guest-insights.md`

## Related Skills

- Technical Roadmaps
- Managing Tech Debt
- Platform & Infrastructure
- Engineering Culture

Overview

This skill helps teams define, build, and scale a design engineering capability that bridges UX design and software engineering. It focuses on clarifying the role, identifying gaps in handoffs and fidelity, and designing where the function reports and how it operates. Use it to decide between prototyping-focused or production-oriented design engineering and to plan hiring or internal development paths.

How this skill works

I guide you through a structured assessment: define the intended scope (prototypes vs production code), diagnose handoff friction points, and evaluate whether to hire specialists or upskill existing staff. Then I recommend org placement, tools, and workflows that align with your product velocity and design standards. Finally, I surface common pitfalls and practical steps to measure impact and iterate on the function.

When to use it

  • Creating a new design engineering function from scratch
  • Hiring design engineers or writing job specs
  • Bridging persistent design-to-engineering handoff issues
  • Deciding whether prototypes should be production-ready
  • Choosing org placement for hybrid roles (design, engineering, or product)

Best practices

  • Explicitly define scope: prototypes, production, or both with clear deliverables
  • Place the function where it maximizes cross-team collaboration, not siloed under one discipline
  • Hire for the intersection: strong in design sensibility plus practical shipping ability rather than mythical mastery of everything
  • Enable career paths and training to grow internal candidates into the role
  • Adopt modern tooling and AI-assisted workflows to accelerate prototyping and reduce repetitive engineering work

Example use cases

  • A startup needs faster validation—set up design engineers focused on high-fidelity prototypes to test UX hypotheses quickly
  • A scale-up wants smoother handoffs—insert design engineers as embedded partners with product squads to deliver production-ready UI components
  • A company is hiring—use role definitions to decide whether to recruit specialists or upskill frontend engineers with design training
  • An org struggles with inconsistent UI—charter design engineering to build a component library and enforce design system adoption

FAQ

Should design engineering report to design or engineering?

It depends on goals: report to design if the priority is UX fidelity and prototypes; to engineering if the priority is shipping production code. A matrix or dotted-line model often works best to preserve collaboration.

Do I need to hire unicorns who are top-tier designers and engineers?

No. Prefer candidates strong at the intersection with complementary team members. Invest in training and pair them with specialists to cover gaps efficiently.