skills.rest
spencer-a11y
spencer-a11yCOMMUNITY
Explore all skills by this author →
GitHub

lb-ui-builder

Generate Svelte prototype screens and a component manifest from feature briefs.

Updated Apr 9, 2026
Search Tags:#automation#ui#figma#svelte#prototype#design-system
One-click install
npx skills add https://github.com/spencer-a11y/claude-skills --skill lb-ui-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lb-ui-builder
Source: https://github.com/spencer-a11y/claude-skills/tree/main/skills/lb-ui-builder
Command: npx skills add https://github.com/spencer-a11y/claude-skills --skill lb-ui-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

LB UI Builder automates the design-to-prototype workflow for Lyrebird Health features. It ingests feature briefs, PRDs, wireframes, Figma URLs, or natural language descriptions and translates them into pixel-perfect Svelte prototype screens using baked-in design tokens and a 49-component library.

Core Features & Use Cases

  • Ingests varied inputs (natural language, documents, Figma links) to generate complete screen sets.
  • Enforces design-system consistency by applying the T object tokens and the 49-component library across all screens.
  • Emits a new-component manifest for any gaps the library does not cover, guiding future design work.

Quick Start

Provide a feature brief, Figma URL, or PRD to generate screens and a manifest in seconds.

Frequently Asked Questions about lb-ui-builder

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

FAQPage Schema
How do I generate Svelte prototypes from a Figma URL or PRD?▼

To generate Svelte prototypes from a Figma URL or PRD, provide the design link or document as input. The tool translates these feature briefs into pixel-perfect Svelte screens using baked-in design tokens and a 49-component library.

What is the best way to automate UI prototyping from natural language descriptions?▼

Automating UI prototyping from natural language descriptions involves ingesting text inputs and applying a design-system component library. This process enforces consistency by using baked-in tokens to output pixel-perfect Svelte screens and a gap manifest.

Can I use this to enforce design-system consistency across generated Svelte screens?▼

Yes, you can enforce design-system consistency across generated Svelte screens. The automation applies baked-in T object tokens and a 49-component library to every screen set, ensuring visual and structural alignment throughout the prototype.

Does the UI builder work with wireframes and existing feature briefs?▼

Yes, the UI builder works directly with wireframes and existing feature briefs. It ingests these inputs alongside Figma URLs or natural language to automatically generate complete sets of pixel-perfect Svelte screens.

What happens if my feature requires components not in the 49-component library?▼

If your feature requires components not in the 49-component library, the tool emits a new-component manifest. This manifest identifies library gaps and directs future design work to cover the uncovered UI elements.

Related Skills

Explore More Design & Creative Skills→
terzigoluterzigolu
37

edit-figma-design

Create or update Figma designs from natural-language descriptions.

Community
Advanced
natelandaunatelandau
222

daisyui

Guide daisyUI component usage with Tailwind CSS for UI development.

Community
Basic
claudioborjaclaudioborja

skill-ui-ux

Design and implement accessible UI components and design systems across frameworks.

Community
Advanced
haidonglethqbhaidonglethqb

frontend-design

Convert visual designs into ready-to-implement frontend components and tokens.

Community
Advanced