skills.rest
quan2005
quan2005COMMUNITY
Explore all skills by this author →
GitHub

web-prototype

Generate a self-contained desktop web prototype in HTML from a seed template.

13|2|Updated Mar 13, 2026
Search Tags:#html#landing page#design system#web design#prototype#mockup#responsive layout
One-click install
npx skills add https://github.com/quan2005/journal-claw --skill web-prototype-quan2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-prototype
Source: https://github.com/quan2005/journal-claw/tree/main/.od-skills/web-prototype-4ab6e4cb5f
Command: npx skills add https://github.com/quan2005/journal-claw --skill web-prototype-quan2005

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you rapidly create a polished desktop web prototype without designing a page structure from scratch. It reduces inconsistency and design drift by forcing work through a reusable HTML seed, predefined layout patterns, and a built-in review checklist.

Core Features & Use Cases

  • Seed-based page generation: Starts from a bundled HTML template with typography, spacing, tokens, navigation, buttons, grids, and responsive behavior already defined.
  • Layout-driven composition: Uses paste-ready section skeletons for heroes, feature rows, stat blocks, quotes, changelogs, CTAs, and comparison tables so pages stay coherent and fast to assemble.
  • Design-system alignment: Maps the active design system into six root variables instead of introducing ad hoc styles, helping prototypes stay visually consistent.
  • Quality guardrails: Includes a checklist that enforces constraints like no filler copy, no invented metrics, limited accent usage, responsive reflow, and section targeting with data-od-id.
  • Use cases: Ideal for landing pages, SaaS homepages, documentation indexes, pricing pages, marketing pages, and other single-page desktop web mockups.

Quick Start

Ask the AI to create a high-fidelity desktop landing page prototype for your product using the web-prototype skill and return it as one self-contained HTML artifact.

Frequently Asked Questions about web-prototype

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

FAQPage Schema
How do I generate an HTML landing page prototype from a brief?▼

You can generate an HTML landing page prototype by providing a brief; the skill uses a bundled seed template and predefined responsive layout sections to output a self-contained desktop mockup artifact.

What is the best way to build a SaaS homepage mockup without design drift?▼

Using a seed-based HTML template is the best way to build a SaaS homepage mockup without design drift. It maps design system tokens to six root variables and uses a validation checklist to prevent ad hoc styling.

Can I use this approach to create responsive layouts for pricing pages?▼

Yes, you can create responsive layouts for pricing pages. The skill provides paste-ready section skeletons for comparison tables and preserves responsive reflow behavior within the single-page desktop web mockup.

Does the generated web prototype require external CSS frameworks?▼

No, the generated web prototype requires no external CSS frameworks. It outputs a single self-contained HTML artifact with typography, spacing, tokens, navigation, buttons, and grid responsive behavior already defined.

What are the limitations when assembling documentation index mockups?▼

A key limitation when assembling documentation index mockups is the built-in quality guardrail checklist. It enforces constraints like no filler copy, no invented metrics, limited accent usage, and strict section targeting via data-od-id.

Related Skills

Explore More Design & Creative Skills→
PiercingXXPiercingXX
1

mobile-app

Generate pixel-accurate iPhone 15 Pro framed HTML mockups from DESIGN.md tokens.

Community
Basic
samjhechtsamjhecht
4

figma-design-workflow

Generate Figma mockups from wrangler UI specifications with approval tracking.

Community
Advanced
xvawlxvawl
1

ui-design-system

Establish scalable UI design systems with tokens and shadcn/ui for React/TypeScript projects.

Community
Advanced
cafe3310cafe3310
248

oneshot-website

Generate self-contained single-file HTML websites with CSS and vanilla JavaScript.

Community
Advanced