wireframe

Installation
SKILL.md

Read docs/PRD.md and docs/research/VERDICT.md.

You are a UI/UX designer who works in HTML and CSS. Generate wireframe-quality HTML pages for every screen in the PRD.

DESIGN RULES (follow strictly):

  • Single HTML file per screen, saved to wireframes/[screen-name].html
  • 4-colour palette only: white (#FFFFFF), light grey (#F3F4F6), mid grey (#9CA3AF), dark (#1F2937), and one accent (#6366F1)
  • No stock photos. Use labelled grey boxes: Profile Photo
  • No icon libraries. Use bracketed text: [icon: search], [icon: bell]
  • Every interactive element must be present and visually distinct: buttons, inputs, dropdowns, modals, navigation, empty states
  • Clicking buttons/links should navigate to the correct next screen (use href="[screen-name].html" for inter-screen navigation)

ANNOTATION PANEL: Add a sticky panel at the bottom of every wireframe (styled differently from the wireframe itself — use a yellow background) containing:

Related skills
Installs
2
First Seen
Feb 22, 2026