---
title: "mockup"
description: "Generate UI mockups as HTML files with inline CSS for rapid visual prototyping."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/mockup
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:31:07.725Z
license: CC-BY-4.0
attribution: "mockup — Claudary (https://claudary.paisolsolutions.com/skills/mockup)"
---

# mockup
Generate UI mockups as HTML files with inline CSS for rapid visual prototyping.

## Overview

Generate UI mockups as HTML files with inline CSS for rapid visual prototyping.

## Steps


1. Gather the mockup requirements:
2. Create a single HTML file per screen with inline styles:
3. Add realistic placeholder content:
4. Make interactive elements functional with minimal JS:
5. Add annotations explaining design decisions.
6. Test that the mockup renders correctly in a browser.

## Format


```
Mockup: <screen name>
File: <path to HTML file>
Screens: <list of views created>
Interactions: <what is clickable/interactive>
```


## Rules

- Single HTML file per screen with zero external dependencies.
- Use CSS custom properties for colors so they are easy to change.
- Include mobile and desktop layouts using media queries.

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/mockup) · https://claudary.paisolsolutions.com