design-engineering

refoundai/lenny-skills

Build design engineering functions that bridge design and engineering to prototype and ship faster.

What is design-engineering?

Design engineering merges UX design and engineering capabilities to accelerate prototyping and production shipping. Use this skill when establishing a design engineering function, hiring design engineers, or reducing handoff friction between design and engineering teams.

Define design engineering scope in your context (prototyping, production code, or both)
Identify specific gaps between design and engineering handoffs, prototype fidelity, or shipping speed
Assess whether to hire specialists or develop existing team members into design engineers
Guide organizational placement of design engineering (within design, engineering, or product)
Combine design sensibility with shipping ability to select and develop design engineers
Flag common mistakes like unclear scope, wrong org placement, and unicorn hiring

How to install design-engineering

npx skills add https://github.com/refoundai/lenny-skills --skill design-engineering

Claude Code

Cursor

Windsurf

Cline

How to use design-engineering

1.Clarify what design engineering means in your specific context and goals
2.Ask what handoff friction exists between your design and engineering teams
3.Determine whether you need prototypes for validation or production-ready code
4.Assess your current team to identify candidates who could grow into design engineering
5.Decide where design engineering should sit organizationally
6.Evaluate common mistakes that could derail your function

Use cases

Good for

Creating a new design engineering function at your company
Hiring design engineers or converting existing staff into the role
Reducing friction in design-to-engineering handoffs
Accelerating prototype-to-production timelines
Evaluating whether design engineers should focus on validation prototypes or production-ready code

Who it's for

Product leaders building design engineering teams
Engineering managers hiring design engineers
Design leaders bridging gaps with engineering
Startups and scale-ups establishing product functions
Existing designers or engineers considering a design engineering career

design-engineering FAQ

What's the difference between a design engineer and a designer or engineer?

Design engineers combine high-end design sensibility with the ability to ship production-ready code. They're strong at the intersection of both skills rather than world-class at either individually.

Should design engineers prototype or ship production code?

It depends on your context. Some design engineers focus on high-fidelity prototypes for validation; others ship production code. Define this scope clearly before hiring or building the function.

Where should design engineering sit organizationally?

Design engineering can sit within design, engineering, or product teams. The right placement depends on your org structure and whether the primary need is faster prototyping or shipping speed.

Can I develop existing team members into design engineers instead of hiring?

Yes. Assess whether you have designers with engineering interest or engineers with design sensibility who could grow into the role. This is often more feasible than hiring external specialists.

What's the biggest mistake when building a design engineering function?

Unclear scope is common—not defining whether design engineers prototype or ship production code. Also avoid isolating them from both design and engineering teams, and don't hire only for unicorns; hire for strength at the intersection.

Full instructions (SKILL.md)

Source of truth, from refoundai/lenny-skills.

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:

Define the role - Clarify what design engineering means in their context (prototyping, production code, or both)
Identify the need - Determine if the gap is between design and engineering handoffs, prototype fidelity, or shipping speed
Assess feasibility - Help them evaluate whether to hire specialists or develop existing team members
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