npx claudepluginhub partme-ai/full-stack-skills --plugin t2ui-skillsThis skill is limited to using the following tools:
**Constraint**: Use this skill when the user wants to turn a **Stitch screen** (HTML or Stitch URL/IDs) into a **Pencil .pen design** that matches the page layout and style (100% precise correspondence). Combines Stitch MCP (get_screen, htmlCode) when input is URL with Pencil MCP (open_document, batch_design, find_empty_space_on_canvas, get_screenshot).
LICENSE.txtexamples/sample-batch-ops.mdexamples/sample-multi-batch.mdexamples/sample-simple-create-product.mdexamples/sample-with-framework-refs.mdexamples/usage.mdreferences/bootstrap-to-pencil-styles.mdreferences/element-to-pencil-styles.mdreferences/html-to-pencil-mapping.mdreferences/layui-to-pencil-styles.mdreferences/tailwind-to-pencil-styles.mdreferences/uview-to-pencil-styles.mdreferences/uviewpro-to-pencil-styles.mdreferences/vant-to-pencil-styles.mdCreates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Constraint: Use this skill when the user wants to turn a Stitch screen (HTML or Stitch URL/IDs) into a Pencil .pen design that matches the page layout and style (100% precise correspondence). Combines Stitch MCP (get_screen, htmlCode) when input is URL with Pencil MCP (open_document, batch_design, find_empty_space_on_canvas, get_screenshot).
This skill belongs to pencil-skills. When input is a Stitch URL or projectId/screenId, Stitch MCP (get_screen) is used to obtain HTML; Stitch skills are responsible for PRD→prototype only, and this skill is responsible for prototype→.pen design.
You are a design conversion specialist: Stitch exports Tailwind-based HTML; Pencil uses a node tree and batch_design (I/U/R/M/D/C/G). This skill defines HTML element → Pencil node mapping rules, strict execution order, and Tailwind → .pen style mapping (background, color, size, margin, padding, shadow, border-radius) so the drawn artboard is a precise visual match.
list_projects → list_screens → pick screen. If user provides pasted HTML, skip to Parse.get_screen with projectId and screenId; obtain htmlCode.downloadUrl, screenshot.downloadUrl, width, height, title.htmlCode.downloadUrl (Bash script or web_fetch); save to e.g. temp/source.html. If fetch fails, ask user to paste HTML.open_document('new') or path); optionally find_empty_space_on_canvas for root frame position; then call batch_design once per batch in order. After each batch (or at end), call get_screenshot on root frame to verify.main from Batch 1 used as parent in Batch 3).Strict execution order for converting Stitch HTML into Pencil batch_design calls: parents must exist before children; each batch at most 25 operations (Pencil recommendation).
| Phase | Description | Typical batch | Parent ref |
|---|---|---|---|
| 0 | Canvas prep (optional) | — | — |
| 1 | Document + root + header + main placeholder | Batch 1 | document → root, main |
| 2 | Header content (back, title, actions) | Batch 2 | header |
| 3 | Tabs bar (if present) | Batch 3 | root |
| 4 | Section 1 (card + title + body placeholder) | Batch 4 | main |
| 5 | Section 1 body (form rows, inputs, buttons) | Batch 5 | card1Body |
| 6 | Section 2 (card + …) | Batch 6 | main |
| 7 | Section 2 body | Batch 7 | card2Body |
| … | One batch per section body if large | … | … |
| N | Footer or final dividers | Batch N | main |
Parents created in an earlier batch are referenced by binding name in later batches (e.g. I(main, ...), I(card1Body, ...)). Binding names are unique per batch; do not reuse the same name across batches for different nodes.
When a target framework is set, use that framework's refs for section/card, hints, divider, button, input, tabs per that framework's *-to-pencil-styles.md section 15 and tailwind-to-pencil-styles.md section 16.
batch_design, if the artboard must be placed at a specific position on the canvas.find_empty_space_on_canvas with desired width/height (e.g. screen width × height from Stitch get_screen). Use returned position when creating the root frame in Phase 1 (x, y on document). No batch_design in this phase.Goal: Create the root frame, header frame, and main content placeholder so all later content has a parent.
Order of operations (≤25): (1) Insert root frame under document: layout vertical, width from screen (e.g. 390), height a fixed value (844 or 884) so the canvas is not blank—avoid root fit_content when children use fill_container. Fill = page background. (2) Insert header frame under root: layout horizontal, height 56 or 64, width fill_container, padding, fill #fff, optional stroke bottom. (3) Insert main frame under root: layout vertical, width fill_container, height fit_content(800), padding 16, gap 16, placeholder true.
Binding names for later batches: root, header, main. Style: root fill from <body> or wrapper class (bg-*); header/main padding and gap from Tailwind (p-4, space-y-4 → 16).
Goal: Fill the header with back icon, title text, and optional right actions. Parent: header. Insert backIcon (icon_font arrow_back), titleText (content = page title), and optionally headerRight frame with actions. Binding names: backIcon, titleText, headerRight.
Goal: Create the tab row. Parent: root. Insert tabsWrap frame under root (horizontal, height 48), then tab1/tab1Text, tab2/tab2Text, tab3/tab3Text under tabsWrap. If more than 3 tabs, split into Batch 3a/3b or keep under 25 ops total.
Batch 4 — Parent: main. Insert card1 frame (vertical, fill_container, padding 24, gap 16, fill #fff, cornerRadius 12, stroke 1px); card1Header under card1; card1Title under card1Header; optional card1Right; card1Body under card1 (vertical, placeholder true).
Batch 5 — Parent: card1Body. For each form row: insert row frame, label text, input frame (or ref). If more than ~8 rows, split into Batch 5a, 5b. Binding names: card1, card1Header, card1Title, card1Body.
Same pattern: Batch 6 — card2, card2Header, card2Title, card2Body under main. Batch 7 — card2Body children. Repeat for Section 3, 4, … (Batch 8, 9, …). If one section has very many rows, use multiple batches with same parent (e.g. card3Body).
Insert any footer frame under main, or final divider lines. Keep under 25 ops; if many small elements, group into one batch.
batch_design call. Split large section bodies (e.g. 15 form rows → Batch 5 first 7, Batch 5b next 8).placeholder: true on frames that will receive many children in the next batch (main, card1Body).Before running Pencil: [ ] Phase 0 optional find_empty_space_on_canvas; [ ] Phase 1 Batch 1 — root, header, main; [ ] Phase 2 Batch 2 — header content; [ ] Phase 3 Batch 3 — tabs if any; [ ] Phase 4–5 Batch 4–5 — card1 + card1Body + body children; [ ] Phase 6–7 Batch 6–7 — card2 + card2Body; [ ] … repeat for remaining sections; [ ] Phase N footer/final; [ ] After all batches: get_screenshot(root) to verify.
| Batch | Ops | Content |
|---|---|---|
| 1 | 3 | root, header, main |
| 2 | 2 | backIcon, titleText under header |
| 3 | 6 | card1, card1Header, card1Title, card1Body |
| 4 | 5 | row1, label1, input1; row2, label2, input2 under card1Body |
Total: 4 batches, 16 operations. Order is fixed: 1 → 2 → 3 → 4.
skills/pencil-design-from-stitch-html/
├── SKILL.md
├── LICENSE.txt
├── references/
│ ├── html-to-pencil-mapping.md # Element → node + op rule
│ ├── tailwind-to-pencil-styles.md # Generic Tailwind → Pencil; §15–16 framework mapping + refs vs primitives
│ ├── uview-to-pencil-styles.md # uView 2 → Pencil (full style table + §15 refs/constraints)
│ ├── uviewpro-to-pencil-styles.md
│ ├── element-to-pencil-styles.md
│ ├── bootstrap-to-pencil-styles.md
│ ├── layui-to-pencil-styles.md
│ └── vant-to-pencil-styles.md
└── examples/
├── usage.md # When to use, steps, MCP flow, example prompts
├── sample-batch-ops.md # Minimal page → one batch_design (≤25 ops)
├── sample-multi-batch.md # Header + card + form rows → four batches
├── sample-with-framework-refs.md # Same page with target framework (refs + tokens)
└── sample-simple-create-product.md # Simplified Create Product (1–2 batches) for quick validation
English: Stitch, Pencil, batch_design, .pen, HTML to design, Tailwind, layout, fidelity.
中文关键词： Stitch、Pencil、绘图、HTML 转设计稿、批动作。