Skills
.Work. You
Rest

web-prototype

Community

Turn briefs into a ready HTML prototype.

Design & Creative#html#prototype#design-system#desktop#layouts#seed-template
Authorjunainfinity
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Streamline the creation of a desktop web prototype by transforming briefs into a self-contained HTML file using a seed template and a library of paste-ready layouts.

Core Features & Use Cases

  • Single-file prototype assembly: Convert a brief into a complete, self-contained HTML prototype by reusing the seed template and paste-ready layout blocks.
  • Design-system aware: Map design tokens to the seed CSS to ensure visual consistency across sections.
  • Offline, portable export: Output index.html and optional assets for quick sharing and offline previews.

Quick Start

Copy assets/template.html to index.html, update the design tokens from DESIGN.md, and paste the required sections from references/layouts.md into the main content.

Dependency Matrix

Required Modules

None required

Components

assetsreferences

💻 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: web-prototype
Download link: https://github.com/junainfinity/osmDesign/archive/main.zip#web-prototype

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.