norml-website-mockup · skill guide · for humans

Website Mockup

v1.0.0

Create a responsive homepage concept, explain its design and compare preserved versions.

For: Website owners and designers comparing homepage conceptsActs on: Authorized source material and local versioned outputsFull engine included
The problem

A homepage concept needs accurate content, a clear structure and responsive behavior that survives review.

Website Mockup connects source research, design, HTML and QA, then presents the result with its earlier versions still available.

AI design · local engine
Your terminal agent writes the concept. The bundled Python engine captures sources and builds presentation artifacts; capture alone is not a finished design. Run the install command from your target project folder for a project-local skill.
What you can do
Ground the conceptsource backed
Record the brief, sitemap and authorized content before design.
Design and buildresponsive HTML
Compose wireframes, choose a visual direction, add assets, icons and motion.
Verify the resultfive widths
Measurements and independent review check layout, content and interactions.
Present and compareHTML + PDF + board
Explain the approved concept and preserve v1, v2 and later directions.
Ship a production backendseparate work
Forms, checkout and accounts need their own implementation.
Publish automaticallynot enabled
Public sharing needs review of the exact export and explicit authorization.
Inside the skill
norml-website-mockup/
SKILL.md + recipes/Public scope and ordered pipeline.
pipeline/cli.pyCapture, version allocation, presentation, board and run index.
pipeline/stages/Design catalogs, wireframes, build, motion and QA guidance.
pipeline/templates/Presentation and comparison board templates.
pipeline/tests/Engine tests and synthetic fixtures.
licenses/Included third-party software licenses.

Generated project research and concepts stay outside the installed package.

How it flows
01
Source
Verify the brief, source facts and sitemap.
02
Structure
Choose supported blocks in a grayscale wireframe.
03
Design
Record the visual direction, images and icons.
04
Build
Write responsive HTML with baseline motion.
05
Review
Run independent QA and fix failed checks.
06
Compare
Render HTML/PDF and a board of passing concepts.
Say this to Claude
“make a website mockup
“redesign this homepage
“compare website concepts
“use Website Mockup to create a homepage concept for https://example.com
What it can't do
Claude Code, Codex or Gemini CLI with Python and Playwright; no Desktop upload workflow.
Source sites are read-only; use authorized references and asset rights.
No invented proof, prices, timelines or conversion results.
Independent review must pass before normal presentation and board delivery.
Fonts and CDN dependencies can require network access; offline use needs separate verification.
Where it sits
wp build norml-wp-developer norml-website-mockup ● you are here
norml-website-mockup You are here
norml-wp-developer This skill hands off here · wp build
this skill hands off to