Convert Stitch designs into uni-app + Vue 3 + uView Pro pages and components. Use when the user mentions uView Pro, uviewpro, or uni-app Vue 3 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces u-* component contracts (u-tabs, u-form, u-picker, u-card) with script setup.
Constraint: Only use this skill when the user explicitly mentions "Stitch" and converting Stitch screens to uni-app + Vue 3 + uView Pro (pages/, components/, .vue or .uvue, u-* components).
You are a frontend engineer turning Stitch designs into clean, modular uni-app + uView Pro 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.
node-idlist_tools to find the prefix (e.g. mcp_stitch__stitch:)./projects/) and screenId from the node-id query parameter. (2) Otherwise, or when the user wants to choose a project/screen, call list_projects (e.g. filter view=owned) then list_screens with the chosen projectId to get screenIds.[prefix]:get_screen with projectId and screenId to get design JSON, htmlCode.downloadUrl, screenshot.downloadUrl, dimensions, deviceType.bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"
screenshot.downloadUrl to confirm layout and details.pages/ and shared components under components/; avoid one giant page.<script setup>; put event handlers and composables in appropriate modules.data/ or page data.u-* components only; do not use raw <button>, <input>, <div> for buttons/inputs/modals when u-* exists. Use u-card for cards (use title when only a title, or u-section with #right when title + right content), u-text for label hints and tips (type="info"/"warning", size="24"), u-line / u-divider for dividers; do not use view/text + custom class (.card, .card-title, .label-optional, .tips-text, .unit). Tab bar must use u-tabs; do not use custom tab-header/tab-item. Before drafting a page, read references/component-index.md and references/contract.md for mapping rules, slot syntax (#label, #suffix, #right), and anti-patterns (Picker v-model + :range 1D; Radio value not name; no slot="...").data/mockData.js) from the design content.resources/page-template.vue as base; replace placeholder with real page name and uView Pro tags per contract.pages.json; add tabBar or navigation as needed.resources/architecture-checklist.md; run in HBuilderX or CLI to confirm on simulator/device.When converting Stitch HTML to uView Pro, verify against references/contract.md and uView Pro docs. Common corrections:
| Element | Wrong (often from Stitch/other UI) | Correct (uView Pro) |
|---|---|---|
| Tab switcher | Custom <view class="tab-header"> + <view class="tab-item"> | Always use <u-tabs :list="..." :current="..." @change="...">; do not build tabs with raw views/divs |
| Tabs props | lineColor, activeStyle, inactiveStyle, itemStyle | :current, @change(index) (number), active-color, inactive-color |
| Picker | :show="show", :columns="[['A','B']]" (2D) | v-model="show"; mode="selector" + :range (1D array, e.g. ['A','B']); @confirm; do not use :columns |
| Radio | name="opt1", customStyle, placement="row" | value="opt1" (not name), label for text; no customStyle/placement |
| Slots (Vue 3) | slot="label", slot="suffix" | #label, #suffix, v-slot:label — never slot="..." |
| Form-item label | slot="label" | #label or v-slot:label |
| Input type=select | — | Pair with u-picker; use :select-open bound to picker visibility |
Pre-generation checklist — before writing the template, ensure: (1) Card/section use u-card (with title or + u-section for title+right), not view.card + card-header + card-title. (2) Label hints and tips use u-text (type="info"/"warning", size="24"), not text with .label-optional/.tips-text/.unit. (3) Divider use u-line or u-divider, not view + border. (4) Tab switcher uses u-tabs, not custom divs. (5) All slots use #slotname or v-slot:slotname. (6) Picker uses v-model and :range (1D). (7) Radio uses value and label, not name/customStyle/placement.
node-id) or by using stitch-mcp-list-projects and stitch-mcp-list-screens when no URL is given or when the user needs to browse/select.htmlCode from get_screen), use references/stitch-html-patterns.md for page structure and form fields; references/tailwind-to-uviewpro.md for Tailwind utility → rpx/theme (spacing, typography, colors, borders, shadows); then references/contract.md for component API and anti-patterns.scripts/fetch-stitch.sh is executable.Testing is triggered by user instruction, not by calling MCP directly. Flow: user pastes the test command below into the chat → Agent runs this skill → resolve URL → call get_screen → fetch/parse design → generate uView Pro code → output page file or full code.
Use the Stitch skill to convert https://stitch.withgoogle.com/projects/3492931393329678076?node-id=375b1aadc9cb45209bee8ad4f69af450 into a uView Pro page
English: Stitch, uni-app, uView Pro, Vue 3, u-button, u-navbar, rpx.
中文关键词： Stitch、uni-app、uView Pro、组件。
Component API: api/component-api.md
Examples: examples/usage.md
Contract & Patterns:
Resources:
Scripts:
Component index (must read) — Full uView Pro component list (80+) with minimal usage; consult when generating so you use u-modal, u-popup, u-action-sheet, u-empty, u-avatar, u-picker, u-tabbar, etc., instead of raw HTML.
Stitch HTML patterns — Stitch HTML → uView Pro (page structure, forms); use when converting from get_screen htmlCode.
Tailwind → uView Pro — Tailwind utility classes → rpx / theme (spacing, typography, colors, borders, shadows); use so output is framework-native, not raw Tailwind.