skills.rest
pipixia-labs
pipixia-labsOFFICIAL
Explore all skills by this author →
GitHub

mobile-app

Generate mobile app screen mockups in a device frame from seed templates.

38|3|Updated Apr 8, 2026
Search Tags:#layout#prototype#design-system#archetype#mockup#seed#mobile-app
One-click install
npx skills add https://github.com/pipixia-labs/creative-claw --skill mobile-app-pipixia-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-app
Source: https://github.com/pipixia-labs/creative-claw/tree/main/skills/design-knowledge-and-skills/skills/mobile-app
Command: npx skills add https://github.com/pipixia-labs/creative-claw --skill mobile-app-pipixia-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Designers often need to produce realistic mobile app screen mockups without building the device chrome from scratch or re-creating layouts for every brief. This skill provides a pixel-accurate iPhone 15 Pro frame seeded with a set of archetypes and a seed template to accelerate prototyping.

Core Features & Use Cases

  • Seed-driven mobile screen generation using assets/template.html as the starting point.
  • Archetype-driven content: pick one of six archetypes from references/layouts.md and adapt copy to the brief.
  • Design-system alignment: map tokens to the seed's :root variables for consistent typography, spacing, and color.

Quick Start

Copy assets/template.html to the project root as index.html, replace the design tokens, and paste one archetype from references/layouts.md into the main content.

Frequently Asked Questions about mobile-app

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

FAQPage Schema
How do I generate pixel-perfect mobile app mockups quickly?▼

To generate mobile app mockups, copy the provided template.html to your project root, replace the design tokens, and paste an archetype layout to instantly render pixel-accurate iOS or Android screens inside an iPhone 15 Pro frame.

What is the best way to prototype mobile app screens without building device chrome?▼

The best way to prototype mobile app screens without manual device chrome is using a seed-driven HTML template that provides a pixel-accurate iPhone 15 Pro frame, letting you focus entirely on swapping archetype copy and design tokens.

Can I use my own design system tokens for mobile app UI layouts?▼

Yes, you can use your own design system tokens for mobile app UI layouts by mapping your typography, spacing, and color values directly onto the seed template's :root variables to ensure consistent visual output.

How do I adapt a mobile app prototype for different content briefs?▼

You adapt a mobile app prototype for different content briefs by selecting one of six predefined archetypes from the layout reference file and swapping the copy to match the specific requirements of your design task.

Does this mockup tool support both iOS and Android screen layouts?▼

Yes, the mockup tool supports both iOS and Android screen layouts by guiding you to select a single archetype and swap copy accordingly, rendering the UI within a pixel-accurate device frame for cross-platform design briefs.

What are the limitations of using a seed-driven template for app mockups?▼

A limitation of using a seed-driven template for app mockups is that it enforces a specific HTML workflow with fixed archetypes and an iPhone 15 Pro frame, restricting you from dynamically generating entirely new layout structures outside the provided references.

Related Skills

Explore More Design & Creative Skills→
ncsound919ncsound919

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Advanced
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into Expo-compatible React Native components with TypeScript.

Community
Advanced
QuestForTech-InvestmentsQuestForTech-Investments
5

pptx

Create, edit, and analyze PPTX presentations using Node-based tools.

Official
Advanced
skkeoriwskkeoriw

popular-web-designs

Render HTML/CSS templates and design tokens from 54 real-world design systems.

Community
Intermediate