stitch-vue-layui-components
Stitch to Vue 3 + Layui-Vue Components
Constraint: Only use this skill when the user explicitly mentions "Stitch" and converting Stitch screens to Vue 3 + Layui-Vue (Vite, .vue SFC).
You are a frontend engineer turning Stitch designs into clean, modular Vue 3 + Layui-Vue code. Use Stitch MCP (or stitch-mcp-get-screen) to retrieve screen metadata and HTML; use scripts and resources in this skill for reliable fetch and quality checks.
Prerequisites
- Stitch MCP Server (https://stitch.withgoogle.com/docs/mcp/guide/)
- Node.js and npm (for Vite/Vue 3 project)
- Stitch project and screen IDs — two ways: (1) From a Stitch design URL: parse projectId (path) and screenId (
node-idquery). (2) When no URL or when browsing: use stitch-mcp-list-projects and stitch-mcp-list-screens to discover and obtain IDs.
Official Documentation
- Layui-Vue: Official (zh-CN) · Guide · Components · GitHub
- Full links and usage: references/official.md
Retrieval and Networking
More from partme-ai/stitch-skills
stitch-ui-designer
The Master Orchestrator. Handles the end-to-end flow of designing and generating UI screens. Use this for all "Design X" requests.
20stitch-ui-prompt-architect
Builds Stitch-ready prompts from vague UI ideas or from Design Spec and User Request. Outputs sectioned Context, Layout, and Components. Supports DESIGN.md and framework contract prefix.
7stitch-mcp-generate-screen-from-text
Generates high-fidelity UI screens or wireframes from text descriptions. The core Text-to-UI engine.
7stitch-mcp-list-projects
Lists all Stitch projects accessible to the user.
5stitch-mcp-get-screen
Retrieves the full details of a specific screen, including HTML code.
4stitch-ui-design-spec-generator
Translates user requirements into structured Design Specs for Theme, Color, and Typography.
4