{"id":"234b0895-6c6a-480a-b7cd-f1e5463dcb41","shortId":"Yzj4Bt","kind":"skill","title":"design-engineering","tagline":"Stand up a Design Engineering practice: charter, prototype-to-production workflow, component delivery plan.","description":"# Design Engineering\n\n## Scope\n\n**Covers**\n- Defining a **Design Engineering** function (hybrid design sensibility + ability to ship production code)\n- Choosing an operating model: **embedded** vs **platform/design-system** vs **tiger team**\n- Creating a **prototype → production** pipeline (what is throwaway vs shippable)\n- Establishing a **design-to-code contract** (tokens, components, reviews, quality bar)\n- Planning delivery for UI/UX-heavy work (components/flows, milestones, QA gates)\n\n**When to use**\n- “We want to create a design engineering function—write the charter and operating model.”\n- “Our prototypes never make it to production—define a prototype→production workflow.”\n- “We need faster UI iteration with high craft—set a design-to-code contract + quality bar.”\n- “We’re building a new UI/component library—create a component delivery plan and reviews.”\n\n**When NOT to use**\n- You need UX research, discovery, or product strategy (use interviews/surveys/PRD skills).\n- You’re doing mostly backend/platform architecture with minimal UI surface area.\n- You only need to ship a single small UI fix (just implement it).\n- You need a brand/visual identity system (separate design/brand process).\n- You want to build or evolve a design system (tokens, components, governance) without standing up a new practice (use `design-systems`).\n- You want to improve engineering team culture, rituals, or hiring practices (use `engineering-culture`).\n- You need to run a one-off design review or design critique session (use `running-design-reviews`).\n- You need a feature spec or detailed UX flow document (use `writing-specs-designs`).\n\n## Inputs\n\n**Minimum required**\n- Product/context: what you’re building and who it’s for\n- Current state: design artifacts (Figma, mockups) + codebase/stack (web/native) + existing design system (if any)\n- Goal: what “better” means (speed, consistency, craft, accessibility, quality, fewer handoff bugs)\n- Constraints: team composition, timeline, quality bar, accessibility/compliance requirements\n\n**Missing-info strategy**\n- Ask up to **5** questions from [references/INTAKE.md](references/INTAKE.md), then proceed with explicit assumptions.\n- If the team/stack is unknown, assume a modern web stack (component library + CI) and call out assumptions.\n- Do not request secrets/credentials; use redacted identifiers.\n\n## Outputs (deliverables)\n\nProduce a **Design Engineering Execution Pack** in Markdown (in-chat by default; write to files if requested):\n\n1) **Context snapshot** (goals, constraints, success signals)\n2) **Design Engineering charter** (mission, scope, ownership boundaries, engagement model)\n3) **Prototype → production workflow** (prototype ladder + decision rules + review gates)\n4) **Design-to-code contract** (tokens/components/spec handoff, PR review expectations, QA)\n5) **Component/flow delivery plan** (prioritized backlog + milestones + owners)\n6) **Quality bar** (checklists + rubric score)\n7) **Risks / Open questions / Next steps** (always included)\n\nTemplates: [references/TEMPLATES.md](references/TEMPLATES.md)\n\n## Workflow (7 steps)\n\n### 1) Intake + success definition\n- **Inputs:** User context; [references/INTAKE.md](references/INTAKE.md).\n- **Actions:** Confirm scope (product area), stakeholders, and what “design engineering” means here (role vs function vs project). Define success signals (e.g., faster UI iteration, fewer handoff bugs, higher consistency, improved accessibility).\n- **Outputs:** Context snapshot (draft).\n- **Checks:** The team can answer in one sentence: “What will change if we do this well?”\n\n### 2) Choose the operating model (and boundaries)\n- **Inputs:** Team org, roadmap pressures, existing design/engineering capabilities.\n- **Actions:** Select an engagement model (embedded, platform/design system, tiger team). Define responsibilities and boundaries vs Design and Engineering (who owns interaction design, component implementation, accessibility, visual QA, performance).\n- **Outputs:** Design Engineering charter (draft) with explicit boundaries.\n- **Checks:** No “two owners” ambiguity for components, tokens, and UI quality sign-off.\n\n### 3) Map the UI surface area + constraints\n- **Inputs:** Key flows/screens; existing components; constraints (devices, browsers, perf, a11y, localization).\n- **Actions:** Inventory the highest-leverage UI areas (top flows, shared components). Identify reuse opportunities and risk hotspots (complex interactions, animations, data density, edge cases).\n- **Outputs:** UI surface map + initial component/flow backlog.\n- **Checks:** Backlog is prioritized by user impact and reuse (not just what’s loudest).\n\n### 4) Define the prototype ladder (prototype → production)\n- **Inputs:** Timeline, iteration speed needs, risk tolerance.\n- **Actions:** Define a “prototype ladder” (lo-fi → hi-fi → coded prototype → production). For each rung, set purpose, expected fidelity, and whether it is disposable. Add decision rules for when to “graduate” a prototype.\n- **Outputs:** Prototype → production workflow (ladder + rules + gates).\n- **Checks:** Every prototype has an explicit label: **throwaway** vs **shippable**.\n\n### 5) Write the design-to-code contract (handoff + reviews)\n- **Inputs:** Design artifacts; code conventions; QA expectations.\n- **Actions:** Define the contract: design tokens, component API expectations, states, a11y requirements, and review gates (design review, engineering review, QA). Specify what must be in a PR (screenshots, storybook links, test plan, a11y notes).\n- **Outputs:** Design-to-code contract (v1).\n- **Checks:** A developer can implement a component without back-and-forth on states, spacing/typography, and acceptance criteria.\n\n### 6) Plan delivery (milestones + ownership)\n- **Inputs:** Backlog + constraints + team capacity.\n- **Actions:** Convert backlog into milestones (thin slices) with owners, dependencies, and acceptance criteria. Define how work is tracked (board columns) and how design engineering work is staffed.\n- **Outputs:** Component/flow delivery plan (milestones).\n- **Checks:** First milestone is small enough to ship within 1–2 weeks and sets patterns for the rest.\n\n### 7) Quality gate + alignment + finalization\n- **Inputs:** Draft pack.\n- **Actions:** Run [references/CHECKLISTS.md](references/CHECKLISTS.md) and score with [references/RUBRIC.md](references/RUBRIC.md). Add stakeholder cadence and a lightweight decision log (what was chosen, why). Finalize **Risks / Open questions / Next steps**.\n- **Outputs:** Final Design Engineering Execution Pack.\n- **Checks:** Quality bar is explicit; ownership is unambiguous; risks and open questions are not hidden.\n\n## Quality gate (required)\n- Use [references/CHECKLISTS.md](references/CHECKLISTS.md) and [references/RUBRIC.md](references/RUBRIC.md).\n- Always include: **Risks**, **Open questions**, **Next steps**.\n\n## Examples\n\n**Example 1 (stand up the function):** “Use `design-engineering`. We’re a 12-person product team. Web app. Designers ship Figma but engineering struggles with UI polish. Create a Design Engineering Execution Pack with an embedded model and a prototype→production workflow.”\n\n**Example 2 (design system delivery):** “Create a design engineering plan for building a component library (buttons, inputs, tables, modals). Include the design-to-code contract, PR review checklist, and a 6-week milestone plan.”\n\n**Boundary example 1:** “What is design engineering?”\nResponse: explain this skill produces an execution pack; ask for context (team, product, goals). If they only want a definition, give a brief definition and point them to the intake questions to proceed.\n\n**Boundary example 2:** “We need to build a component library with tokens, theming, and a governance model for adoption across teams.”\nResponse: this is a design system buildout, not standing up a design engineering practice; redirect to `design-systems`. Use `design-engineering` when the goal is defining the hybrid role/function that ships UI, not the system of reusable components itself.\n\n## Anti-patterns\n\nAvoid these common failure modes when producing a Design Engineering Execution Pack:\n\n1. **Charter without boundaries** — Defining a design engineering function that overlaps with existing design and engineering roles without explicitly stating who owns what. If the charter does not answer “who decides on component API shape?” and “who signs off on visual fidelity?”, it will create turf wars.\n2. **Prototype graveyard** — Building prototypes that are never graduated or killed. Every prototype must have an explicit label (throwaway vs shippable) and a time-boxed decision point for graduation or disposal.\n3. **Design-to-code contract as a checklist dump** — Writing a long list of “must haves” without specifying how they are verified. A contract that says “a11y compliant” without naming the WCAG level, test method, and reviewer is unenforceable.\n4. **Delivery plan without thin slices** — Planning milestones around “build all buttons, then all inputs, then all modals” instead of shipping a thin vertical slice (one flow end-to-end) that proves the workflow.\n5. **Ignoring the operating model decision** — Jumping straight to delivery without deciding whether design engineering is embedded, centralized, or a tiger team. The operating model determines staffing, rituals, and escalation paths.","tags":["design","engineering","lenny","skills","plus","liqiongyu","agent-skills","ai-agents","automation","claude","codex","prompt-engineering"],"capabilities":["skill","source-liqiongyu","skill-design-engineering","topic-agent-skills","topic-ai-agents","topic-automation","topic-claude","topic-codex","topic-prompt-engineering","topic-refoundai","topic-skillpack"],"categories":["lenny_skills_plus"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/liqiongyu/lenny_skills_plus/design-engineering","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add liqiongyu/lenny_skills_plus","source_repo":"https://github.com/liqiongyu/lenny_skills_plus","install_from":"skills.sh"}},"qualityScore":"0.474","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 49 github stars · SKILL.md body (9,370 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:21.614Z","embedding":null,"createdAt":"2026-04-18T22:16:26.779Z","updatedAt":"2026-04-22T00:56:21.614Z","lastSeenAt":"2026-04-22T00:56:21.614Z","tsv":"'1':363,430,812,895,974,1089 '12':907 '2':370,490,813,938,1014,1136 '3':380,555,1168 '4':390,619,1208 '5':309,402,685,1243 '6':410,761,968 '7':416,428,821 'a11y':571,712,734,1195 'abil':31 'accept':759,782 'access':289,469,529 'accessibility/compliance':300 'across':1031 'action':439,505,573,633,702,771,829 'add':659,838 'adopt':1030 'align':824 'alway':422,886 'ambigu':545 'anim':593 'answer':478,1117 'anti':1075 'anti-pattern':1074 'api':709,1122 'app':912 'architectur':157 'area':162,443,560,580 'around':1216 'artifact':272,697 'ask':306,987 'assum':324 'assumpt':318,335 'avoid':1077 'back':752 'back-and-forth':751 'backend/platform':156 'backlog':407,604,606,767,773 'bar':67,122,299,412,864 'better':284 'board':789 'boundari':377,496,518,540,972,1012,1092 'box':1161 'brand/visual':179 'brief':1001 'browser':569 'bug':293,465 'build':125,188,263,948,1018,1139,1217 'buildout':1039 'button':952,1219 'cadenc':840 'call':333 'capabl':504 'capac':770 'case':597 'central':1260 'chang':484 'charter':10,90,373,536,1090,1114 'chat':355 'check':474,541,605,675,743,803,862 'checklist':413,965,1176 'choos':36,491 'chosen':848 'ci':331 'code':35,61,119,394,644,691,698,740,961,1172 'codebase/stack':275 'column':790 'common':1079 'complex':591 'compliant':1196 'compon':16,64,132,195,329,527,547,566,584,708,749,950,1020,1072,1121 'component/flow':403,603,799 'components/flows':73 'composit':296 'confirm':440 'consist':287,467 'constraint':294,367,561,567,768 'context':364,436,471,989 'contract':62,120,395,692,705,741,962,1173,1192 'convent':699 'convert':772 'cover':22 'craft':113,288 'creat':46,83,130,922,942,1133 'criteria':760,783 'critiqu':234 'cultur':213,221 'current':269 'data':594 'decid':1119,1254 'decis':386,660,844,1162,1248 'default':357 'defin':23,101,456,515,620,634,703,784,1060,1093 'definit':433,998,1002 'deliver':344 'deliveri':17,69,133,404,763,800,941,1209,1252 'densiti':595 'depend':780 'design':2,7,19,25,29,59,85,117,192,205,230,233,239,255,271,278,347,371,392,447,520,526,534,689,696,706,717,738,793,858,902,913,924,939,944,959,977,1037,1044,1050,1054,1085,1095,1102,1170,1256 'design-engin':1,901,1053 'design-system':204,1049 'design-to-cod':58,116,391,688,737,958,1169 'design/brand':183 'design/engineering':503 'detail':247 'determin':1268 'develop':745 'devic':568 'discoveri':145 'dispos':658,1167 'document':250 'draft':473,537,827 'dump':1177 'e.g':459 'edg':596 'embed':40,510,930,1259 'end':1236,1238 'end-to-end':1235 'engag':378,508 'engin':3,8,20,26,86,211,220,348,372,448,522,535,719,794,859,903,917,925,945,978,1045,1055,1086,1096,1104,1257 'engineering-cultur':219 'enough':808 'escal':1272 'establish':56 'everi':676,1147 'evolv':190 'exampl':893,894,937,973,1013 'execut':349,860,926,985,1087 'exist':277,502,565,1101 'expect':400,652,701,710 'explain':980 'explicit':317,539,680,866,1107,1152 'failur':1080 'faster':108,460 'featur':244 'fewer':291,463 'fi':640,643 'fidel':653,1130 'figma':273,915 'file':360 'final':825,850,857 'first':804 'fix':172 'flow':249,582,1234 'flows/screens':564 'forth':754 'function':27,87,453,899,1097 'gate':76,389,674,716,823,878 'give':999 'goal':282,366,992,1058 'govern':196,1027 'graduat':665,1144,1165 'graveyard':1138 'handoff':292,397,464,693 'have':1184 'hi':642 'hi-fi':641 'hidden':876 'high':112 'higher':466 'highest':577 'highest-leverag':576 'hire':216 'hotspot':590 'hybrid':28,1062 'ident':180 'identifi':342,585 'ignor':1244 'impact':611 'implement':174,528,747 'improv':210,468 'in-chat':353 'includ':423,887,956 'info':304 'initi':602 'input':256,434,497,562,626,695,766,826,953,1222 'instead':1226 'intak':431,1008 'interact':525,592 'interviews/surveys/prd':150 'inventori':574 'iter':110,462,628 'jump':1249 'key':563 'kill':1146 'label':681,1153 'ladder':385,623,637,672 'level':1201 'leverag':578 'librari':129,330,951,1021 'lightweight':843 'link':731 'list':1181 'lo':639 'lo-fi':638 'local':572 'log':845 'long':1180 'loudest':618 'make':97 'map':556,601 'markdown':352 'mean':285,449 'method':1203 'mileston':74,408,764,775,802,805,970,1215 'minim':159 'minimum':257 'miss':303 'missing-info':302 'mission':374 'mockup':274 'modal':955,1225 'mode':1081 'model':39,93,379,494,509,931,1028,1247,1267 'modern':326 'most':155 'must':724,1149,1183 'name':1198 'need':107,142,165,177,223,242,630,1016 'never':96,1143 'new':127,201 'next':420,854,891 'note':735 'one':228,480,1233 'one-off':227 'open':418,852,872,889 'oper':38,92,493,1246,1266 'opportun':587 'org':499 'output':343,470,533,598,668,736,798,856 'overlap':1099 'own':524,1110 'owner':409,544,779 'ownership':376,765,867 'pack':350,828,861,927,986,1088 'path':1273 'pattern':817,1076 'perf':570 'perform':532 'person':908 'pipelin':50 'plan':18,68,134,405,733,762,801,946,971,1210,1214 'platform/design':511 'platform/design-system':42 'point':1004,1163 'polish':921 'pr':398,728,963 'practic':9,202,217,1046 'pressur':501 'priorit':406,608 'proceed':315,1011 'process':184 'produc':345,983,1083 'product':14,34,49,100,104,147,382,442,625,646,670,909,935,991 'product/context':259 'project':455 'prototyp':12,48,95,103,381,384,622,624,636,645,667,669,677,934,1137,1140,1148 'prototype-to-product':11 'prove':1240 'purpos':651 'qa':75,401,531,700,721 'qualiti':66,121,290,298,411,551,822,863,877 'question':310,419,853,873,890,1009 're':124,153,262,905 'redact':341 'redirect':1047 'references/checklists.md':831,832,881,882 'references/intake.md':312,313,437,438 'references/rubric.md':836,837,884,885 'references/templates.md':425,426 'request':338,362 'requir':258,301,713,879 'research':144 'respons':516,979,1033 'rest':820 'reus':586,613 'reusabl':1071 'review':65,136,231,240,388,399,694,715,718,720,964,1205 'risk':417,589,631,851,870,888 'ritual':214,1270 'roadmap':500 'role':451,1105 'role/function':1063 'rubric':414 'rule':387,661,673 'run':225,238,830 'rung':649 'running-design-review':237 'say':1194 'scope':21,375,441 'score':415,834 'screenshot':729 'secrets/credentials':339 'select':506 'sensibl':30 'sentenc':481 'separ':182 'session':235 'set':114,650,816 'shape':1123 'share':583 'ship':33,167,810,914,1065,1228 'shippabl':55,684,1156 'sign':553,1126 'sign-off':552 'signal':369,458 'singl':169 'skill':151,982 'skill-design-engineering' 'slice':777,1213,1232 'small':170,807 'snapshot':365,472 'source-liqiongyu' 'spacing/typography':757 'spec':245,254 'specifi':722,1186 'speed':286,629 'stack':328 'staf':797,1269 'stakehold':444,839 'stand':4,198,896,1041 'state':270,711,756,1108 'step':421,429,855,892 'storybook':730 'straight':1250 'strategi':148,305 'struggl':918 'success':368,432,457 'surfac':161,559,600 'system':181,193,206,279,512,940,1038,1051,1069 'tabl':954 'team':45,212,295,476,498,514,769,910,990,1032,1264 'team/stack':321 'templat':424 'test':732,1202 'theme':1024 'thin':776,1212,1230 'throwaway':53,682,1154 'tiger':44,513,1263 'time':1160 'time-box':1159 'timelin':297,627 'token':63,194,548,707,1023 'tokens/components/spec':396 'toler':632 'top':581 'topic-agent-skills' 'topic-ai-agents' 'topic-automation' 'topic-claude' 'topic-codex' 'topic-prompt-engineering' 'topic-refoundai' 'topic-skillpack' 'track':788 'turf':1134 'two':543 'ui':109,160,171,461,550,558,579,599,920,1066 'ui/component':128 'ui/ux-heavy':71 'unambigu':869 'unenforc':1207 'unknown':323 'use':79,140,149,203,218,236,251,340,880,900,1052 'user':435,610 'ux':143,248 'v1':742 'verifi':1190 'vertic':1231 'visual':530,1129 'vs':41,43,54,452,454,519,683,1155 'want':81,186,208,996 'war':1135 'wcag':1200 'web':327,911 'web/native':276 'week':814,969 'well':489 'whether':655,1255 'within':811 'without':197,750,1091,1106,1185,1197,1211,1253 'work':72,786,795 'workflow':15,105,383,427,671,936,1242 'write':88,253,358,686,1178 'writing-specs-design':252","prices":[{"id":"71182ff8-b3c5-4a2a-8f23-90288853c0e1","listingId":"234b0895-6c6a-480a-b7cd-f1e5463dcb41","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"liqiongyu","category":"lenny_skills_plus","install_from":"skills.sh"},"createdAt":"2026-04-18T22:16:26.779Z"}],"sources":[{"listingId":"234b0895-6c6a-480a-b7cd-f1e5463dcb41","source":"github","sourceId":"liqiongyu/lenny_skills_plus/design-engineering","sourceUrl":"https://github.com/liqiongyu/lenny_skills_plus/tree/main/skills/design-engineering","isPrimary":false,"firstSeenAt":"2026-04-18T22:16:26.779Z","lastSeenAt":"2026-04-22T00:56:21.614Z"}],"details":{"listingId":"234b0895-6c6a-480a-b7cd-f1e5463dcb41","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"liqiongyu","slug":"design-engineering","github":{"repo":"liqiongyu/lenny_skills_plus","stars":49,"topics":["agent-skills","ai-agents","automation","claude","codex","prompt-engineering","refoundai","skillpack"],"license":"apache-2.0","html_url":"https://github.com/liqiongyu/lenny_skills_plus","pushed_at":"2026-04-04T06:30:11Z","description":"86 agent-executable skill packs converted from RefoundAI’s Lenny skills (unofficial). Works with Codex + Claude Code.","skill_md_sha":"5b07c5d8cbf81fcfe747da63425887ca6ef2e822","skill_md_path":"skills/design-engineering/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/liqiongyu/lenny_skills_plus/tree/main/skills/design-engineering"},"layout":"multi","source":"github","category":"lenny_skills_plus","frontmatter":{"name":"design-engineering","description":"Stand up a Design Engineering practice: charter, prototype-to-production workflow, component delivery plan."},"skills_sh_url":"https://skills.sh/liqiongyu/lenny_skills_plus/design-engineering"},"updatedAt":"2026-04-22T00:56:21.614Z"}}