| name | stitch-uview-plus-components |
| description | Convert Stitch designs into uni-app + Vue 3 + uview-plus pages and components. Use when the user mentions Stitch, uview-plus, up- components, or uni-app Vue 3 conversion targeting uview-plus. Retrieves screen HTML via Stitch MCP get_screen, rewrites Tailwind structure into up-* components, and enforces stronger setup, theme, safe-area, tabbar, popup, upload, and dark-mode rules than the generic uView Pro conversion skill. |
| allowed-tools | stitch*:*, Bash, Read, Write, web_fetch |
Stitch to uni-app + uview-plus Components
Constraint: Only use this skill when the user explicitly mentions Stitch and wants conversion to uni-app + Vue 3 + uview-plus with up-* components.
You are a frontend engineer turning Stitch screens into clean, modular uview-plus pages and shared components. Use Stitch MCP (or stitch-mcp-get-screen) to retrieve metadata and HTML, then rebuild the screen with up-* components, rpx, and the current uview-plus theme/runtime model.
What makes this skill different
This is not a rename of stitch-uviewpro-components.
It is a stronger uview-plus-specific skill that:
- defaults to
up-* instead of u-*
- aligns with current
uview-plus docs, setup, and theme guidance
- covers
up-status-bar, up-safe-bottom, up-popup, up-upload, up-subsection, up-tabbar, up-empty, up-gap, and up-line
- prefers CSS variables like
--up-* and runtime theme config over hardcoded colors
- requires stronger page-shell, safe-area, and bottom-CTA handling than the generic uView Pro skill
Prerequisites
- Stitch MCP Server: https://stitch.withgoogle.com/docs/mcp/guide/
uni-app / HBuilderX or Vue CLI project using Vue 3uview-plus installed and wired for Vue 3- Stitch project and screen IDs, resolved in one of two ways:
- Parse a Stitch design URL:
projectId from the /projects/{id} path and screenId from the node-id query
- Browse with stitch-mcp-list-projects and stitch-mcp-list-screens
Official Documentation
Retrieval and Networking
- Discover Stitch MCP prefix: inspect tools to find the Stitch namespace.
- Resolve projectId and screenId:
- If the user supplied a Stitch URL, parse both IDs directly
- Otherwise use stitch-mcp-list-projects and stitch-mcp-list-screens
- Fetch screen metadata: call get_screen to obtain design JSON,
htmlCode.downloadUrl, screenshot.downloadUrl, dimensions, and device type.
- Download HTML reliably:
bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"
- Use the screenshot as the visual source of truth when the exported HTML is structurally noisy.
Architectural Rules
- Use
up-* only when a uview-plus component exists. Do not generate u-* tags in this skill.
- Prefer modular output: page shell, shared components, and extracted mock/static data instead of one large page file.
- Prefer framework-native rebuilds over literal HTML translation. Reconstruct the page with
up-* semantics.
- Prefer theme-aware styles: use
var(--up-xxx) and setConfig({ color }) guidance instead of hardcoded colors when a theme token exists.
- Prefer runtime-safe page shells:
up-navbar for normal headersup-status-bar for custom branded headersup-safe-bottom for fixed bottom CTAs
- Read these before drafting code:
Execution Steps
- Environment
- ensure
uview-plus is installed
- ensure Vue 3 project wiring is valid
- ensure
App.vue, main.js, and uni.scss follow current uview-plus guidance
- Data layer
- extract repeated text, options, tabs, and upload/demo lists into data modules or page state
- Page drafting
- Component selection
- use
up-tabs or up-subsection for switching UI
- use
up-picker / up-popup instead of raw select
- use
up-upload instead of raw upload boxes
- use
up-tabbar for bottom nav
- use
up-empty for empty states
- Quality check
Official API alignment and common Stitch corrections
When converting Stitch HTML, verify against references/contract.md and the official uview-plus docs. Common corrections:
| Design element | Wrong from Stitch / generic UI | Correct for uview-plus |
|---|
| Top tabs | custom <view> pills or button row | <up-tabs :list="..." :current="current" @change="..."> or v-model:current |
| Segmented filters | custom capsule buttons | <up-subsection :list="..." :current="..." @change="..."> |
| Picker/select | native <select> or raw popup list | <up-picker v-model:show="show" :columns="columns" @confirm="..."> |
| Popup/sheet | fixed custom overlay + absolute panel | <up-popup v-model:show="show" mode="bottom"> |
| Upload | dashed custom upload box + hidden file input | <up-upload :fileList="..." @afterRead="..."> |
| Bottom navigation | fixed footer buttons manually styled as nav | <up-tabbar :value="value" @change="..."> |
| Empty state | plain text "No data" | <up-empty text="No data"> |
| Divider / spacing | manual border and margin blocks | <up-line>, <up-divider>, <up-gap> |
| Safe area | fixed bottom CTA without inset handling | <up-safe-bottom> wrapper |
| Custom header | hardcoded spacer height | <up-status-bar> when not using up-navbar |
| Theme | hex colors everywhere | var(--up-*), theme tokens, and runtime color config |
Engineering guidance specific to uview-plus
uview-plus current docs favor up-* naming in examples. This skill should output that convention by default.- For
.vue / .uvue pages, prefer CSS variables such as var(--up-primary) and var(--up-bg-color).
- For runtime theme customization, use
setConfig({ color }) guidance when the page needs explicit theme sync.
- Keep
@import 'uview-plus/theme.scss'; semantics in mind when describing project wiring.
- If the project uses the Root bridge, global calls like
uni.$u.toast() can replace manually placing up-toast in every page.
Testing trigger
Testing is command-triggered by the user, not by directly calling MCP for no reason.
Keywords
English: Stitch, uview-plus, up-button, up-tabs, up-tabbar, up-popup, up-upload, uni-app, Vue 3.
中文关键词： Stitch、uview-plus、up 组件、uni-app、Vue3、页面转换。
References
