skills.rest
eaglhuang
eaglhuangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-reference-decompose

Convert screenshots or Figma links into structured UI proof JSON drafts.

3|Updated Mar 6, 2026
Search Tags:#ui#reference#proof-draft#visual-zones#component-intents#spacing-recipe#content-slots
One-click install
npx skills add https://github.com/eaglhuang/cocos_new --skill ui-reference-decompose
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-reference-decompose
Source: https://github.com/eaglhuang/cocos_new/tree/main/.github/skills/ui-reference-decompose
Command: npx skills add https://github.com/eaglhuang/cocos_new --skill ui-reference-decompose

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Gathered UI visuals from screenshots, Figma links, or reference PNGs are transformed into a structured, machine-readable proof draft to jump-start UI production planning.

Core Features & Use Cases

  • Visual-to-structure conversion: identify UI zones and component intents from reference images to create a usable proof draft.
  • Designer-to-dev handoff starter: produce a first-pass specification for visual zones, spacing, and content slots.
  • Use Case: When a new screen is provided via a screenshot or Figma link, generate a proof draft at assets/resources/ui-spec/proof/screens/{screenId}.proof.json to begin the production pipeline.

Quick Start

Provide the reference source (ref:// or figma://) and the target screenId to generate the proof draft.

Frequently Asked Questions about ui-reference-decompose

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

FAQPage Schema
How do I convert a Figma link or screenshot into a structured UI spec?▼

To convert a Figma link or screenshot into a structured UI spec, provide the reference source and target screenId. The system identifies visual zones, component intents, spacing, and content slots to generate a machine-readable proof draft JSON file.

What is a UI proof draft and when do I need it for production?▼

A UI proof draft is a structured, machine-readable specification that formalizes visual zones, component intents, and spacing recipes from reference images. You need it to jump-start UI production planning and enable a concrete designer-to-dev handoff.

Can I generate a UI proof draft directly from a PNG reference image?▼

Yes, you can generate a UI proof draft directly from a PNG reference image. Supply the image reference alongside a target screenId, and the workflow extracts visual zones and content slots to output the first-pass specification JSON.

How do I start the UI production pipeline from a visual reference?▼

To start the UI production pipeline from a visual reference, provide the source URL or image path and a screenId. This generates a first-pass proof draft at assets/resources/ui-spec/proof/screens/ to serve as the foundational spec.

What is the best way to formalize visual zones and component intents from a design reference?▼

The best way to formalize visual zones and component intents from a design reference is to translate the visual source into a structured proof draft. This process extracts structural UI elements and outputs them as a flagged draft JSON for refinement.

Does the generated UI proof draft require further refinement?▼

Yes, the generated UI proof draft requires further refinement. The output JSON file is created with a _draft flag, indicating it is a first-pass specification intended for subsequent refinement before finalizing the UI production pipeline.

Related Skills

Explore More Design & Creative Skills→
easingthemeseasingthemes
6

dx-figma-extract

Extract design context, tokens, and screenshots from a Figma URL.

Community
Advanced
eaglhuangeaglhuang
3

ui-vibe-pipeline

Generate proof drafts, family maps, and UI scaffolds from UI references.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

screenshot-intake

Convert website screenshots or live URLs into structured build specifications.

Official
Advanced