skills.rest
FunnelEnvy
FunnelEnvyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

experiment-mockup

Orchestrate browser-based mockups from hypotheses via Chrome DevTools MCP, Playwright MCP, or static HTML extraction.

1|Updated Apr 17, 2026
Search Tags:#hypothesis#mockup#browser-mcp#experiment-mockup#live-mode#static-mode
One-click install
npx skills add https://github.com/FunnelEnvy/funnelenvy-skills --skill experiment-mockup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: experiment-mockup
Source: https://github.com/FunnelEnvy/funnelenvy-skills/tree/main/skills/experiment-mockup
Command: npx skills add https://github.com/FunnelEnvy/funnelenvy-skills --skill experiment-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates end-to-end creation of visual mockups from CRO hypotheses by driving a multi-mode orchestration that can operate in live browser, screenshot-based Playwright, or pure static mode for non-interactive validation.

Core Features & Use Cases

  • Orchestrates the end-to-end workflow to generate mockups from hypothesis data
  • Supports live Chrome DevTools MCP, Playwright MCP, and static HTML extraction
  • Produces deliverables: mockup.html, placement.md, and (for live) mockup-screenshot.png
  • Enables rapid CRO validation and stakeholder demos from experiment roadmaps

Quick Start

Run /experiment-mockup 1 to generate a mockup for hypothesis #1 on the target URL.

Frequently Asked Questions about experiment-mockup

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

FAQPage Schema
How do I create CRO mockups from experiment hypotheses?▼

CRO mockups are generated from hypotheses by orchestrating inspection, injection, capture, and annotation stages to produce visual mockup artifacts like mockup.html and placement.md.

What's the best way to automate conversion rate optimization mockup generation?▼

Automating conversion rate optimization mockup generation involves routing hypothesis data through a multi-mode orchestration workflow that supports live Chrome DevTools, Playwright, and static HTML extraction.

Does the mockup generation workflow support live browser mode and static HTML extraction?▼

The mockup generation workflow supports live Chrome DevTools MCP, Playwright MCP, and static HTML extraction modes to handle both interactive and non-interactive validation scenarios.

How do I generate visual mockups from an experiment roadmap?▼

Visual mockups are derived directly from the hypothesis data in an experiment-roadmap.md file, writing outputs like mockup.html and placement.md under dedicated experiment deliverable directories.

Can I capture browser screenshots for CRO validation without a live browser environment?▼

Screenshot capture for CRO validation is available in live mode using Chrome DevTools MCP or Playwright MCP, while static mode produces HTML artifacts without requiring an interactive browser environment.

What deliverables are produced when creating browser-based CRO mockups?▼

Browser-based CRO mockups produce mockup.html and placement.md deliverables, along with an optional mockup-screenshot.png file when operating in live browser mode.

Related Skills

Explore More Design & Creative Skills→
FunnelEnvyFunnelEnvy
1

hypothesis-generator

Generate testable CRO hypotheses and a prioritized experiment roadmap from L0/L1 context.

Official
Advanced
tamirdreshertamirdresher
41

fact-checking

Break down claims, test counter-hypotheses, and validate external references.

Community
Intermediate
githubgithub
37.6k

chrome-devtools

Automate browser control and debugging via the Chrome DevTools MCP.

Official
Advanced
Zoomma1Zoomma1
3

claude-design-to-code

Convert Claude Design HTML mockups into Angular standalone components with templates and SCSS.

Community
Intermediate