design

Transform design reference HTML into a Vibes app with TinyBase data bindings.

134|5|Updated Dec 24, 2025

Search Tags:#workflow #design #html #react #transformation #design-reference #tinybase

Ready to run

npx skills add https://github.com/popmechanic/VibesOS --skill design-popmechanic

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/popmechanic/VibesOS/tree/main/skills/design
Command: npx skills add https://github.com/popmechanic/VibesOS --skill design-popmechanic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design reference HTML is often static and non-interactive. This skill performs a safe, deterministic transformation to a Vibes app, preserving structure and styles while wiring in TinyBase data.

Core Features & Use Cases

Self-contained transformer that takes a complete design reference HTML file and outputs a working Vibes app with React bindings.
Preserves CSS blocks exactly and converts HTML attributes to React-compatible syntax (class → className, for example) for a pixel-faithful result.
Use Case: you have a design.html, mockup, or static prototype and need a ready-to-run Vibes app that matches the design exactly.

Quick Start

Provide design.html to the skill and invoke it as /vibes:design to generate a ready-to-run Vibes app.

Frequently Asked Questions about design

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

FAQPage Schema

How do I convert a static HTML mockup into a React app with TinyBase?▼

To convert a static HTML mockup into a React app with TinyBase, provide your design.html file to the transformation skill. It outputs a ready-to-run Vibes app with React bindings and wired TinyBase reactive data.

Can I turn design reference HTML into a working app without altering the CSS?▼

Yes, you can turn design reference HTML into a working app without altering the CSS. The transformation process preserves style blocks verbatim and converts HTML attributes to React-compatible syntax for a pixel-faithful result.

What is the best way to match a static prototype exactly when building a Vibes app?▼

The best way to match a static prototype exactly when building a Vibes app is using deterministic transformation rules. It copies styles verbatim, preserves HTML structure, and wires TinyBase data bindings without reinterpretation.

Does the Vibes design workflow support converting HTML attributes like class to React className?▼

Yes, the Vibes design workflow supports converting HTML attributes like class to React className. It automatically translates standard HTML attributes into their React-compatible equivalents during the app generation process.

Why does my transformed HTML design look different in the React app?▼

If your transformed HTML design looks different in the React app, it may be due to non-deterministic conversion. This skill enforces deterministic rules to copy style blocks verbatim and preserve exact HTML structure, preventing visual discrepancies.

Do I need a complete HTML file to generate a Vibes app from a mockup?▼

Yes, you need a complete HTML file to generate a Vibes app from a mockup. The transformer requires a self-contained design reference HTML file to perform a safe, deterministic transformation into a working application.