implement-page

Name: implement-page
Availability: InStock
Author: AGMO

Automate Figma-to-code workflows with frame discovery, per-frame orchestration, and visual verification.

4|1|Updated Mar 19, 2026

Search Tags:#frontend #implementation #figma #playwright #orchestrator #frame #visual-verification

Ready to run

npx skills add https://github.com/AGMO-Inc/agmo-everywhere --skill implement-page

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: implement-page
Source: https://github.com/AGMO-Inc/agmo-everywhere/tree/main/skills/implement-page
Command: npx skills add https://github.com/AGMO-Inc/agmo-everywhere --skill implement-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

Automates the end-to-end process of translating multi-frame Figma designs into implementation code by framing the design into manageable chunks and validating results via visuals.

Core Features & Use Cases

Frame discovery, per-frame orchestration, and a component registry for consistent UI.
Visual verification against Figma references to ensure pixel parity, with iterative refinement.
Asset/script management and optional integration with a dev server workflow for multi-page projects.

Quick Start

Provide the Figma design URL and local development server details to start the end-to-end workflow.

Frequently Asked Questions about implement-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert multi-frame Figma designs into frontend code automatically?▼

To convert multi-frame Figma designs into code, this Skill automates frame discovery, delegates per-frame implementation, and orchestrates Executors to handle multi-page projects like dashboards and landing pages end-to-end.

How do I verify visual pixel parity between my frontend implementation and a Figma reference?▼

To verify visual pixel parity against Figma references, the workflow uses a frontend visual verifier integrated with Playwright to compare implemented UI frames against design references and perform iterative refinement.

Can I use Playwright to orchestrate per-frame implementation for a Figma landing page?▼

Yes, you can use Playwright to support the orchestration of per-frame implementation. The workflow splits Figma landing page frames into manageable chunks and orchestrates Executors to build and verify the UI.

How does a component registry help with Figma-to-code workflows for multi-page projects?▼

A component registry ensures consistent UI in Figma-to-code workflows by managing component reuse across multi-page projects, handling assets and scripts centrally while Executors process individual design frames.

What do I need to start automating Figma page implementation with visual verification?▼

To start Figma page implementation with visual verification, you need to provide the Figma design URL and local development server details, which initiates the end-to-end frame discovery and visual validation workflow.

Are there limitations when using frame-by-frame orchestration for Figma dashboard implementation?▼

Frame-by-frame orchestration for Figma dashboard implementation relies on delegating to per-frame Executors and requires a local development server environment, meaning complex single-frame designs may not benefit from the splitting approach.