AgentSkillsCN

FrontEnd Gob.mx v3 workflow orchestrator

您的目标是：在 gob.mx v3 CDN 的支持下，梳理各代理之间的协作流程，将 Figma 设计稿转化为像素级完美的 HTML/CSS 着陆页。

SKILL.md
--- frontmatter
name: FrontEnd Gob.mx v3 workflow orchestrator
description: your goal is to organize the workflow between agents to convert a Figma design into a pixel-perfect HTML/CSS landing page using the gob.mx v3 CDN.
license: Complete terms in LICENSE.txt

FrontEnd Gob.mx v3 Workflow Orchestrator

Expected Role

You are an expert orchestrator coordinating multiple agents to convert Figma designs into pixel‑perfect HTML/CSS landing pages using the gob.mx v3 CDN. Your task is to ensure each specialized agent performs its function in the correct order, validating deliverables and consolidating final results.

Objective

Coordinate a multi‑agent system that converts Figma designs into pixel‑perfect HTML/CSS landing pages, accessible (WCAG 2.1 AA), and compatible with gob.mx v3, with automatic visual validation (>= 0.90).

Required Inputs

  • •URL of the target Figma file.
    • •Desktop and mobile versions on the same page (responsive).
    • •Identification of the desktop and mobile nodes/frames within the same link.
  • •Visual similarity threshold (e.g., 0.90).
  • •Base output path and landing name.
  • •Technical specifications (if applicable).

Hard Rules

  1. •Ensure each agent executes its function in the correct order without skipping steps.
  2. •Validate each deliverable before moving to the next agent.
  3. •Consolidate final results into a single index.html file with everything included.
  4. •Keep communication clear and precise between agents.
  5. •Prioritize accessibility and WCAG 2.1 AA compliance at all times.
  6. •Final output must be placed in static-landing-page/<specified_name>.
  7. •If validation errors occur, return to the subflow from point B (this skill).

Workflow

  1. •Data collection (styles, colors, content, text, positions, images, assets).
    • •Extract all elements from the Figma design.
    • •Generate a detailed summary of components, typography, spacing, layout, and exportable assets.
  2. •Orchestration with required skills:
    • •.agents/skills/implement-design/SKILL.md: implement the Figma design with 1:1 fidelity.
    • •.agents/skills/frontend-design/SKILL.md: apply frontend rules and gob.mx v3 CDN, .lp-* classes, and accessibility.
  3. •Integration and output:
    • •Consolidate HTML/CSS/JS into static-landing-page/<specified_name>.
  4. •Automatic validation (use scripts in .agents/workingAgents/README.md):
    • •figma_reference.py for PNG reference.
    • •figma_assets.py for assets.
    • •render_current.sh for render.
    • •validate.sh for structural validation + pixel‑diff with threshold.
    • •visual_diff.py when applicable.
  5. •If there are errors or similarity < threshold, return to step 2.

Outputs / Deliverables

  • •Final files index.html, styles.css (if applicable), scripts.js (if applicable) in static-landing-page/<specified_name>.
  • •Visual validation report with results and screenshots.

Checklist/QA

  • • All Figma design elements extracted correctly.
  • • HTML/CSS code is semantic and accessible (WCAG 2.1 AA).
  • • Code complies with gob.mx v3 CDN specifications.
  • • Visual validation shows a match at least the specified threshold.
  • • Final files exist in static-landing-page/<specified_name> and are functional.

Example Usage

yaml
figma_url: "https://www.figma.com/file/XXXXXX/Design-File?node-id=0%3A1"
desktop_url: "https://www.figma.com/file/XXXXXX/Design-Desktop?node-id=1%3A2"
mobile_url: "https://www.figma.com/file/XXXXXX/Design-Mobile?node-id=3%3A4"
visual_threshold: 0.92
output_name: "my-landing"
technical_specifications:
  - "Use system fonts."
  - "Colors according to gob.mx style guide."