NewFree workflows that run in your AI tool, for designers, PMs and developers
SkillHub
Workflow for developers

Turn a design into working UIin 5 steps

Start from a Figma frame and end with components that match it, are built to last and pass a review. Your agent reads the design, builds it and checks the result against the spec.

for your terminal; each skill also has its own page

The steps and the skill for each

  1. 1

    Read the design

    Read the frame itself: structure, auto-layout, variables and styles, instead of guessing from a screenshot.

    Skill: Figma Dev Mode MCP

  2. 2

    Build the components

    Build the screen as accessible, responsive components on your existing system.

    Skill: Frontend Ui Engineering

  3. 3

    Shape the component API

    Shape the components so they stay usable: composition instead of a growing list of boolean props.

    Skill: React Composition Patterns

  4. 4

    Compare build and design

    Compare the build with the design and log every gap as a build error or a gap in the spec.

    Skill: Design To Code Check

  5. 5

    Review before the PR

    Review the code against web interface best practices before the PR.

    Skill: Web Design Guidelines

More skills for Frontend

This workflow uses a few of them. The kit page has all 7, in the order to install them.

Frontend

Build interfaces in React, Next.js and friends, the way designers meant them.

  • Frontend Ui Engineering
  • React Best Practices
  • React Composition Patterns
  • next-devtools-mcp
  • +3
7 skills · 2 workflows

More workflows for developers

All workflows