skills.rest
carllelandtaylor
carllelandtaylorCOMMUNITY
Explore all skills by this author →
GitHub

ref-design-mock

Generates Figma-style design mock HTML files with pan/zoom capabilities.

Updated Jun 9, 2026
Search Tags:#template#UI/UX#HTML#Figma#design mock
One-click install
npx skills add https://github.com/carllelandtaylor/facto --skill ref-design-mock
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ref-design-mock
Source: https://github.com/carllelandtaylor/facto/tree/main/plugins/facto/skills/ref-design-mock
Command: npx skills add https://github.com/carllelandtaylor/facto --skill ref-design-mock

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the process of creating Figma-style design mocks, allowing users to focus on design work without worrying about the technical aspects.

Core Features & Use Cases

  • Design Mock Creation: Generate HTML files that mimic Figma designs, complete with pan/zoom capabilities.
  • Customizable Templates: Utilize a template that can be filled in with design tokens and frames.
  • Device Accuracy: Render design mocks at device scale for accurate representation.
  • Use Case: When designing a new feature for a mobile app, use this Skill to create a mockup that matches the actual device's screen size and resolution.

Quick Start

Run the /facto:ref-design-mock command to start creating a design mock.

Frequently Asked Questions about ref-design-mock

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

FAQPage Schema
How do I create Figma-style design mocks from HTML templates?▼

You can create Figma-style design mocks from HTML templates by running the design mock command, which generates interactive, pan/zoomable design files using the template-task-spec.html file and token replacement for design consistency.

What is device-scale rendering for UI/UX design workflows?▼

Device-scale rendering for UI/UX design workflows is the process of generating design mocks that match a mobile device's actual screen size and resolution, ensuring accurate visual representation within pan/zoomable HTML files.

Can I use HTML templates for mobile app design mockups?▼

Yes, you can use HTML templates for mobile app design mockups. The Skill generates HTML files that mimic Figma designs, rendering frames at accurate device scale and supporting token replacement for consistent styling.

Do I need design tokens to generate interactive design files?▼

You do not strictly need design tokens to generate interactive design files, but utilizing token replacement within the HTML template ensures design consistency across the generated pan/zoomable UI/UX mocks.

What's the best way to customize HTML mockups for UI/UX workflows?▼

The best way to customize HTML mockups for UI/UX workflows is to fill the provided template-task-spec.html file with your specific design tokens and frames, allowing the Skill to generate the interactive design mock.

Related Skills

Explore More Design & Creative Skills→
joeylife94joeylife94

plan-design-review

Review design plans and generate visual UI/UX mockups.

Community
Advanced
rittmananalyticsrittmananalytics
8

looker-dashboard-mockup

Generate self-contained HTML Looker dashboard mockups with Chart.js.

Official
Intermediate
darblexdarblex

ui-ux-pro-max

Generate design systems and frontend UI code for web frameworks.

Community
Advanced
jordanhubbardjordanhubbard
9

sketch

Generate interactive HTML mockups with 2-3 design variants for UI/UX exploration.

Community
Intermediate