Install skill

Website Mockup

Develop a homepage concept with a repeatable design process. Research the source, compose a wireframe, build responsive HTML, review it, and compare approved versions.

By for designers, developers and site ownersv1.0.0CLI · mockup and presentation pipeline

Install the skill

Choose your terminal runtime and run the command from your project folder, or download the complete skill ZIP below.

npx skills@latest add normlstudio/norml-website-mockup --skill=norml-website-mockup -a claude-code
Then askUse Website Mockup to create a homepage concept for https://example.com.
On this page
  1. What it does
  2. How it works
  3. Review and compare
  4. What it creates
  5. Capabilities and limits
  6. Inside the skill

What it does

Website Mockup combines an AI-led design process with a bundled Python engine. It includes source capture, a project brief, sitemap, wireframe blocks, design direction, design catalogs, imagery guidance, iconography, motion, QA, presentation templates and a version board.

Use it to explore a homepage redesign, turn a project brief into a concept, or compare several design directions before implementation.

How it works

Start with your URL or brief, audience, real content and authorized brand assets. The AI records verified claims and unknowns, chooses a structure, writes the design direction, and builds the responsive HTML.

The engine captures source evidence and renders outputs. The AI still creates and reviews the design. Install Python dependencies and Chromium using the bundled setup instructions; no private Norml account or reference file is required.

Review and compare

Each concept lives in its own numbered version folder. A responsive and interaction review checks the result before presentation. Passing concepts appear in a comparison board; previous versions remain available.

The presentation includes HTML and PDF. Pricing and timelines appear only when you supply approved figures. The package does not send outreach or publish your work automatically.

What it creates

The project folder holds the source capture, project brief, sitemap, wireframe, design direction, responsive mockup, asset manifests, review evidence, presentation and comparison board. Generated client material stays outside the installed skill.

Capabilities and limits

A mockup is a design concept. Forms, checkout, authentication and other backend workflows need implementation before production. Use WordPress Copilot Advanced when the approved concept should become an editable WordPress site.

Image generation requires your own connected provider or supplied/licensed assets. Figma is optional and uses your own access. Experimental motion research is separate from the baseline workflow.

HTML may use external font or library dependencies. Offline use requires capturing and verifying those dependencies. The package includes third-party license notices for its bundled design library.

Build the approved concept with WordPress Copilot Advanced

Inside the skill

norml-website-mockup/
SKILL.md
One installed entry point for the complete workflow.
recipes/pipeline.md
Ordered research, design, build, QA and handoff steps.
pipeline/
Python capture, presentation rendering, versions and comparison board.
pipeline/stages/
Bundled design procedures, craft notes, wireframe blocks and search catalogs.
pipeline/templates/
Presentation and comparison-board templates.
licenses/
Bundled third-party software licenses.