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

ui-vibe-pipeline

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

3|Updated Mar 6, 2026
Search Tags:#ui-design#design-tokens#ui-automation#mcq#browser-qa#proof-draft#family-map
One-click install
npx skills add https://github.com/eaglhuang/cocos_new --skill ui-vibe-pipeline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-vibe-pipeline
Source: https://github.com/eaglhuang/cocos_new/tree/main/.agents/skills/ui-vibe-pipeline
Command: npx skills add https://github.com/eaglhuang/cocos_new --skill ui-vibe-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI production from reference images to verifiable screen packages and QA-ready artifacts.

Core Features & Use Cases

  • Generates proof drafts from UI references (images, Figma snapshots, specs)
  • Builds family-map, MCQ, and normalized recipes for task cards
  • Produces UI spec scaffolds and validation artifacts for Browser QA

Quick Start

Provide a proof source such as a reference image or Figma snapshot and run the UI vibe pipeline to generate the full proof draft, family-map, and task-ready artifacts.

Frequently Asked Questions about ui-vibe-pipeline

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

FAQPage Schema
How do I automate UI production from Figma snapshots to QA-ready artifacts?▼

The pipeline automates UI generation by converting reference images or Figma snapshots into proof drafts and family maps. It uses three-layer data contracts and design tokens to produce verifiable screen packages and QA-ready artifacts.

What is a family-map and proof draft in UI screen generation?▼

A family-map and proof draft are structural artifacts generated from UI references. They map visual hierarchy and component relationships to create normalized recipes and task shards for end-to-end UI production.

How do I generate UI spec scaffolds and validation steps from existing pages?▼

Provide an existing page as the proof source to generate UI spec scaffolds and validation artifacts. The pipeline processes the page into normalized recipes and Browser QA validation steps using three-layer data contracts.

Can I use design tokens to create UI scaffolds from sketches?▼

Yes, you can create UI scaffolds from sketches using design tokens. The pipeline ingests the sketch as a proof source and applies design tokens to produce verifiable screen packages and task-ready artifacts.

What is the best way to prepare UI references for automated task card generation?▼

Provide clear Figma snapshots, reference images, or specs as proof sources. These inputs feed the pipeline to build normalized recipes, MCQ artifacts, and family maps for generating task cards.

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-brief-generator

Consolidates UI specs, task shards, and reference images into a structured brief.

Community
Intermediate
rlagycksrlagycks
3

browser-qa

Automates visual, functional and accessibility testing of web pages via Playwright or Puppeteer scripts.

Community
Intermediate
robertbr123robertbr123

claude-design

Create and customize HTML design artifacts from a CLI or API.

Community
Advanced