← Library

Agent skill

figma-design-to-code

Figma

Mandatory prerequisite before get_design_context. Handles the parts a naive export gets wrong: components over detached layers, variables over hardcoded values.

Design-to-codeSystems

Install on its own

Or add it to your stack above and install everything at once.

Ships with the Figma MCP server

https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/
Source ↗Figma

Trust audit

View the source ↗
100%verified
Resolved (HTTP 200), passed
Transcribed from the author's own page, passed
Credited to Figma, passed

All 3 checks passed when this was last run. Links were last checked on .

Goes well with

  • pick-ui-library

    Picks the library from the set Emil actually uses and trusts.

    Emil KowalskiSystemsComponents

    Stops your agent hand-rolling a toast or installing whatever is trending. Covers components, motion, charts, interaction, state and styling.

    npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library

  • better-ui

    Concentric radius, optical alignment, surface depth, hit areas.

    Jakub KrehelCraftSystems

    Based on the Details That Make Interfaces Feel Better article. The small corrections that separate a shipped interface from a generated one.

    npx skills add https://github.com/jakubkrehel/skills --skill better-ui

  • ordinary-interfaces

    180 interface rules that each carry a number and its evidence grade.

    Finn MartenSystemsAccessibility

    Every rule states a value, cites whether that value is spec, measured or convention, and says where it stops applying. Reads your project's own tokens before it quotes a default, so a 7px radius in a 7px system is correct rather than a finding.

    npx skills add https://github.com/Board-ly/ordinary-interfaces

    SystemsAccessibilityReviewCraftFull page & trust audit →

Work with us