mcpField
D
design-engineering

design-engineering

github.com/kemiljkDesign & UI6164 installsUpdated 2w ago
Repository

About design-engineering

design-engineering is a practice guide for design and engineering collaboration. It emphasizes accounting for implementation constraints early and mapping design structures to code, with a checklist covering components, tokens, accessibility, and production readiness.

Key features

  1. 01Bring engineering constraints in early
  2. 02Map design structures to code
  3. 03Use tokens instead of isolated styles
  4. 04Account for accessibility and error states
  5. 05Review prototypes against production needs

Use cases

  1. 01Explore interface directions with design and engineering
  2. 02Map design component models to component APIs
  3. 03Review token use in a design system
  4. 04Check prototypes for production requirements

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kemiljk/skills --skill design-engineering

After installing, type/design-engineeringin Claude Code to confirm it loaded.

Details

From the project README

Design Engineering

Design engineering is shared responsibility for the interface in production, not a relay race between finished mockups and ticketed implementation.

Defaults

  1. Prefer handshakes over handovers: involve implementation constraints early.
  2. Map design structure to code structure deliberately.
  3. Prototype to learn; ship with production rigor.
  4. Keep taste attached to materials knowledge (CSS, framework rendering, tokens, a11y).
  5. Optimise for reduced translation loss between intent and implementation.

Translation map

Design conceptCode concept
Frame / auto layoutStack, flex, grid
Component + variantsComponent API + props/state
Local stylesTokens + semantic classes
Prototype interactionsReal state, routes, and motion
RedlinesDefaults encoded in the component

Prefer / Reject

PreferReject
Shared ownership of quality"Design is done" / "Dev will polish"
Constraints in the exploration phaseSurprising feasibility after visual lock
Production concerns during prototypingTreating vibe demos as launch-ready
Tokenised systemsOne-off values that cannot survive themes

Review checklist

  • Did engineering constraints inform the design direction early?
  • Does the component API match the variant model people design with?
  • Are tokens used instead of disconnected raw values?
  • Are accessibility and empty/error states designed, not deferred?
  • Is the prototype honest about what still needs production work?
  • Can design and engineering point to the same source of truth for behaviour?

Source essays

  • Design for handshakes, not handovers
  • A manifesto on design engineering
  • Thinking in design code
  • The design engineer

Comments

Markdown supported