Skills
.Work. You
Rest

ls-stitch-pipeline

Community

Turn Stitch designs into production code

Design & Creative#nextjs#tailwindcss#design-to-code#stitch#mcp tools#ui engineering#taste enforcement
Authorahostbr
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It reduces the gap between Google Stitch-generated UI designs and production-ready, taste-consistent Next.js code so you do not ship raw or inconsistent layouts.

Core Features & Use Cases

  • End-to-end Stitch-to-code pipeline: pulls Stitch screen HTML/screenshots (via MCP) or uses pasted Stitch output, then maps screens to routes.
  • Mandatory taste enforcement: audits the design against explicit style and UX rules (typography, spacing, shadows, motion, dark mode, hover/focus/active states) using local taste modules.
  • Production-ready scaffolding: outputs complete Next.js 15 + TypeScript + Tailwind CSS v4 code with accessibility and performance considerations, avoiding placeholders.
  • Verification and integration guidance: enumerates created files, provides run commands, and calls out TODO items for remaining user input.

Quick Start

Tell the assistant: Pull my UI from Stitch and generate production-ready Next.js code with taste enforcement, mapping my Stitch screens to routes and returning complete files.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ls-stitch-pipeline
Download link: https://github.com/ahostbr/liteharness/archive/main.zip#ls-stitch-pipeline

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.