skills.rest
AGMO-Inc
AGMO-IncOFFICIAL
Explore all skills by this author →
WebsiteGitHub

implement-page

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
One-click install
npx skills add https://github.com/AGMO-Inc/agmo-everywhere --skill implement-page
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
EstomEstom

figma

Translate Figma designs into React and Tailwind UI code.

Community
Advanced
smarmen86smarmen86

canary

Monitor live web applications for console errors and visual regressions post-deployment.

Community
Advanced
yanochka11yanochka11

webapp-testing

Automate Playwright browser tests for local web applications.

Community
Intermediate
lapc506lapc506
4

Figma Dev Mode Integration

Extract assets and generate Flutter UI components from Figma designs.

Community
Intermediate