What problem does it solve? Producing hand-drawn-looking UX wireframes as clean, editable SVG is hard: naive attempts end up with uniform translucent rectangles, filter noise, host-dependent handwriting fonts, or graphite effects that destroy the underlying artwork. This Skill encodes an approved, calibrated visual grammar so desktop and mobile wireframes come out as self-contained vector files with consistent marker and graphite behavior. ## Core Features & Use Cases - Marker and graphite SVG construction: Build shaded regions from visible chisel passes with composited overlap, plus pressure-sensitive pencil arrows, checks, loops, and underlines using alpha-mask grain instead of white overpainting. - Six routed workflows: Create from a brief, restyle an existing wireframe without changing its information architecture, continue a screen family, produce calibration fixtures, build comparison sets, or evaluate an existing SVG against a weighted rubric. - Portable annotation lettering: Convert short notes into Kalam glyph outlines with a fontTools script so SVGs never depend on host handwriting fonts. - Use Case: Ask for a mobile onboarding screen wireframe; the Skill emits a self-contained SVG with an absolute white background, cool-gray marker fields, graphite margin callouts, and a rubric-scored render check. ## Quick Start Create a mobile portrait wireframe SVG of a login screen with cool-gray marker shading and graphite annotations pointing out the weak primary button.
