Design Engineer
Turns Figma designs into reviewed front-end code.
Design Adapted from use case · Added Aug 21, 2026
Based on 231 ways to use an agent by @dhruvamin
Run Design Engineer yourself. Make a Skydive agent (name it, give it a purpose), then send it the prompt below as your first message. It asks for what it needs and sets itself up. Free to copy, adapt, and edit after.
THE SETUP PROMPT
Set up a new agent named Design Engineer to turn finished Figma frames into shipped components. Walk me through connecting Figma and GitHub, then: when a frame is marked ready alongside its ticket, read the frame's spacing, states and tokens, build the component to match our design system, and open a PR with a live preview link so design can review pixel-by-pixel instead of guessing from a screenshot. Flag anything the frame doesn't specify (like an empty or error state) instead of inventing one. Learn our component conventions from the codebase, then save it and run on new ready-for-dev tickets.
CONNECT FIRST
Figma
GitHub TALKS TO YOU IN
SlackEmailiMessage
Every Skydive agent ships with these channels. Connect one in your workspace and it gets its own inbox or number. Not agent-specific.
SKILLS INSIDE
component-buildpreview-linking
Reusable capabilities the prompt sets up. Browse the open skills ecosystem at skills.sh.
See something off with Design Engineer? Suggest an edit. Every agent is one markdown file in the repo.