Skills
.Work. You
Rest

design-canvas-html

Community

Generate a shareable HTML design preview in one click.

Design & Creative#design system#typography scale#html preview#wcag contrast#brand tokens#motion samples#portable canvas
AuthorCleanExpo
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill eliminates the friction of sharing a brand’s full design system by producing a single, portable HTML preview that stakeholders can open instantly without needing the original app or build environment.

Core Features & Use Cases

  • Self-contained design system canvas: Outputs one {slug}.html file with inline palette, typography, component recipes, contrast badges, motion samples, and an optional 3D scene.
  • Token dereferencing for accuracy: Resolves referenced color token styles (for example, {colors.primary}) into concrete values before embedding.
  • Offline-friendly rendering: Inlines all CSS/JS logic except an optional Three.js CDN script for scene previews, and degrades gracefully when motion/scene specs are absent.
  • Practical workflow integration: Runs after canonical spec generation (via design-approve) or on-demand when a user asks to regenerate a preview for a specific brand slug.

Quick Start

Ask the agent to regenerate the HTML preview for your brand slug acme and write it to the output path you specify.

Dependency Matrix

Required Modules

None required

Components

Standard package

đŸ’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-canvas-html
Download link: https://github.com/CleanExpo/Pi-Dev-Ops/archive/main.zip#design-canvas-html

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.