skills.rest
coreyone
coreyoneCOMMUNITY
Explore all skills by this author →
GitHub

design-rapid-prototype-facade

Build clickable wireframe and high-fidelity UI prototype facades for design sprint user testing.

1|Updated Jun 29, 2026
Search Tags:#ui testing#prototype#wireframe#stitch#tldraw#design sprint#pencil.dev
One-click install
npx skills add https://github.com/coreyone/software-maestro --skill design-rapid-prototype-facade-coreyone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-rapid-prototype-facade
Source: https://github.com/coreyone/software-maestro/tree/main/design/experience-and-flows/design-rapid-prototype-facade
Command: npx skills add https://github.com/coreyone/software-maestro --skill design-rapid-prototype-facade-coreyone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @pen.dev/cli, and includes references (resource) components.

What problem does it solve? Design sprint teams need a realistic, testable prototype in a single day without writing production code, and this Skill provides the workflow to build disposable clickable facades matched to the uncertainty being tested. ## Core Features & Use Cases - Dual-Fidelity Prototyping: Build low-fidelity clickable wireframes on tldraw Desktop or high-fidelity pixel-perfect screens via Google Stitch MCP with responsive HTML/CSS output. - Pencil.dev Exploration: Generate Crazy 8s concept boards and reconstruct existing iOS app UIs as editable layers using the headless pen CLI with design-system constraints from DESIGN.md. - Sprint Role Orchestration: Coordinate Maker, Stitcher, Writer, and Asset Collector roles with a zero Lorem Ipsum rule and a mandatory 15:00 Trial Run QA audit. - Use Case: On Thursday of a design sprint, generate a 12-screen checkout flow facade with authentic copy, wire the navigation links, and rehearse the full golden path before Friday's user interviews. ## Quick Start Ask the agent to build a Thursday Goldilocks prototype facade for your storyboard using Stitch MCP or tldraw, with authentic copy and a 15:00 trial run QA check.

Frequently Asked Questions about design-rapid-prototype-facade

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a clickable prototype for a design sprint in one day?▼

Choose a fidelity tier based on what you are testing: use tldraw Desktop for schematic clickable wireframes or Google Stitch MCP for pixel-perfect HTML/CSS screens. Divide work across Maker, Stitcher, Writer, and Asset Collector roles, then run a 15:00 Trial Run QA before testing.

tldraw vs Google Stitch for rapid prototyping?▼

Use tldraw when testing rough layout, information architecture, and structural navigation with fast clickable frames. Use Google Stitch MCP when testing visual appeal, branding, conversion, or emotional resonance with pixel-perfect responsive HTML/CSS.

Can Pencil.dev recreate an existing iOS app UI?▼

Pencil.dev cannot pull a running native app into editable layers directly. Capture Simulator screenshots with xcrun simctl, import them as locked reference layers, and have the agent recreate the SwiftUI or UIKit views as editable Pencil layers using the source code as structural truth.

What are the requirements for using the Pencil pen CLI?▼

Install the CLI with npm install -g @pen.dev/cli, confirm Node.js 22.19 or later, and authenticate with pen login or PEN_CLI_KEY. You must also import the .lib.pen library and attach DESIGN.md to prompts so generated screens follow the design system.

When should I not use a prototype facade?▼

Do not use this workflow for storyboarding or feature decisions, writing production backend APIs or databases, or conducting 5-Act user interviews. The facade is a disposable testing artifact, not a production implementation.

Related Skills

Explore More Design & Creative Skills→
product-on-purposeproduct-on-purpose
640

tool-design-sprint-map-and-target

Facilitates Design Sprint Day 1 to produce long-term goal, sprint questions, customer map, HMW clusters, and target moment.

Official
Intermediate
product-on-purposeproduct-on-purpose
640

tool-design-sprint-prototype-plan

Generates the Thursday planning artifact for a Design Sprint prototype build day.

Official
Intermediate
PriyanshuSingh06PriyanshuSingh06

design-md

Analyze Stitch projects and generate a semantic DESIGN.md design system document.

Community
Advanced
omarshahineomarshahine
155

swiftui-uikit-interop

Wrap UIKit views and controllers for use in SwiftUI, and embed SwiftUI in UIKit via UIHostingController.

Community
Advanced