A method for low- and mid-fidelity wireframing and prototyping of clinical and product workflows — moving from "we have a ticket" to "we have something concrete enough to evaluate", without jumping to high-fidelity design or production code.
Match the fidelity to the question you're asking.
- prototyping-method.md — the method: the fidelity ladder, the working sequence, the lenses you hold throughout, how to handle chrome and explanatory text, and the do/don't list.
- tokens.css — a neutral, brand-agnostic baseline (type scale, spacing, greys, focus, basic controls) with a swappable brand layer.
- examples.md — short before/after walk-throughs.
- skills/clinical-prototyping.md — Claude Code skill that loads the method and applies it.
Anyone building a prototype to test a decision — product designers, QAs, engineers, and managers — particularly in healthcare or clinical contexts. The method is universal; the examples are healthcare-grounded.
Copy skills/clinical-prototyping.md to your .claude/skills/ directory. Claude Code will load the skill automatically. Then ask Claude to wireframe, sketch, or prototype a screen or flow, and it will follow the method.
tokens.css ships neutral defaults. The brand layer at the bottom of the file is the only part you swap when your design system or branding changes — everything above it stays put. This keeps a prototype transferable to new branding references without a rewrite.
A design system doesn't need a live connection to be usable in a prototype — it needs its tokens expressed as CSS. So to make a demo match a specific product, add a local brand/ directory (git-ignored — see .gitignore) with a stylesheet that redefines the brand-layer variables using your own palette. Import it after tokens.css:
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="brand/your-system.css"><!-- local only -->The brand file only needs to remap the handful of brand-layer names (--brand-primary, --status-*, --text, --surface, --radius, --focus-ring, …). Prototypes built on the neutral tokens then render in your product's identity without any markup changes.
Keep proprietary tokens out of the public repo: real design-system values, internal names, and source paths stay local via .gitignore. The published tokens.css stays neutral.
For UI copy and prose, this method defers to the editorial standards at oleksiilapenko/editorial: British English, plain language, calm tone, tone scaled to clinical stakes.
Originally drafted by the C the Signs design team. C the Signs is an AI-powered clinical decision support platform for early cancer detection, built across the NHS and US healthcare markets.
CC BY 4.0. Use freely, adapt, redistribute. Attribution required.
The examples reference clinical workflows and guidance (e.g. NICE pathways). Apply that guidance to your own product only with qualified clinical review. CC BY 4.0 carries no warranty; nothing here is medical or regulatory advice.