skills.rest
subvisual
subvisualOFFICIAL
Explore all skills by this author →
WebsiteGitHub

build-lofi

Generate navigable greyscale Astro wireframe prototypes from drafted screen flows.

Updated Jul 10, 2026
Search Tags:#prototype#tailwind#astro#wireframe#greyscale#lo-fi#user testing
One-click install
npx skills add https://github.com/subvisual/the-a-team --skill build-lofi-subvisual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-lofi
Source: https://github.com/subvisual/the-a-team/tree/main/.claude/skills/build-lofi
Command: npx skills add https://github.com/subvisual/the-a-team --skill build-lofi-subvisual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires astro, @astrojs/tailwind, tailwindcss.

What problem does it solve? Turning drafted screens and flows into something clickable for design review and user testing normally requires manual prototyping work; this Skill scaffolds a multi-screen greyscale Astro wireframe where buttons and links actually work, directly from a design document's flow contract. ## Core Features & Use Cases - Wireframe Generation: Builds a per-screen Astro + Tailwind prototype at docs/features/<slug>/lofi/ from design.md's Screens & flows section, with navigation following the stable flow graph. - Greyscale Enforcement: Ships a lint step (lofi-lint.mjs) that rejects raw colors, named CSS colors, and non-token color utilities so the prototype stays greyscale by default, with optional palette/scale variants mounted via URL parameters. - Surgical Regen & Debrief: regen <screen> rebuilds a single screen idempotently (the design gate's REVISE mechanic), and debrief stages post-user-test interview notes as an append-only evidence batch. - Use Case: After drafting a checkout flow in design.md, run the skill to produce a clickable prototype, review it at the design gate, regenerate only the cart screen after feedback, then record moderated user-test findings as evidence. ## Quick Start Build the lo-fi prototype for the current feature from design.md's Screens & flows section.

Frequently Asked Questions about build-lofi

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a clickable lo-fi wireframe from a design doc?▼

Run the skill against a design.md containing a valid flow-contract JSON fence and a Screens & flows section. It scaffolds an Astro project under docs/features/<slug>/lofi/, generates one page per screen, and wires navigation from the flow graph edges.

How to regenerate a single screen in an Astro wireframe prototype?▼

Use the regen subcommand with the screen name, optionally with an instruction. It resolves the stable page ID in the flow contract and rewrites only that screen's .astro file plus its LOFI.md entry, leaving layouts, styles, and other screens untouched.

Does the prototype support color or only greyscale?▼

The default render is strictly greyscale, enforced by lofi-lint.mjs which fails on raw hex colors, named CSS colors, and undeclared palette utilities. Color appears only through palette-variant stylesheets mounted at runtime via ?palette=<name> URL parameters.

Why does lofi-lint fail on my Tailwind color classes?▼

The lint only allows white, black, gray-*, neutral-* utilities and color roles bound to CSS variables in the target's Tailwind config. Classes like ring-offset-red-500 or raw hex values trigger lofi/no-color-utility or lofi/no-raw-color errors with file and line.

When should I not use a lo-fi prototype for UI work?▼

Do not use it for ad-hoc design exploration without drafted screens, or for hi-fi production UI. The lofi is a throwaway visual reference; production UI is built downstream from spec.md against the design system during the dev phase.

Related Skills

Explore More Design & Creative Skills→
jnlanahanjnlanahan

prototype

Generate three clickable Tailwind CDN HTML UI prototype variants.

Community
Intermediate
Imad-OuteImad-Oute
2

mh-cto-sdlc-component-spec

Write UI component specifications with design system tokens and wireframe behavior.

Community
Advanced
oldwinteroldwinter
5

usability-testing

Plan, execute, and synthesize usability tests into a Usability Test Pack.

Community
Advanced
bughqbughq
2

stacks-imagegen-mobile

Generate platform-aware mobile app screen mockups and user flow visualizations.

Official
Advanced