skills.rest
gooseworks-ai
gooseworks-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

render-ios-lockscreen

Render iOS lockscreen mockups from JSON config to HTML and PNG.

6|1|Updated May 29, 2026
Search Tags:#design#iOS#notification#mockup#lockscreen
One-click install
npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill render-ios-lockscreen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: render-ios-lockscreen
Source: https://github.com/gooseworks-ai/gooseworks-ads-skills/tree/main/skills/atoms/messaging/render-ios-lockscreen
Command: npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill render-ios-lockscreen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a tool to generate pixel-accurate iOS lockscreen mockups, allowing for visualization of app notifications, status bar details, and decorative elements.

Core Features & Use Cases

  • Lockscreen Rendering: Create static lockscreen mockups with status bars, notifications, clock, and optional decorative elements.
  • Configurable Elements: Customize the device type, wallpaper, status bar details, clock, notifications, and decorative tear/glow overlays.
  • Use Case: Use this Skill to create a visual representation of a lockscreen for use in marketing materials, design mockups, or software prototyping.

Quick Start

Use the render-ios-lockscreen skill with the following command: node render.js --config path/to/config.json

Frequently Asked Questions about render-ios-lockscreen

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

FAQPage Schema
How do I create pixel-accurate iOS lockscreen mockups for design prototypes?▼

You can customize iOS lockscreen mockups by modifying a JSON configuration file that controls device type, wallpaper, status bar details, clock, notification stacks, and decorative tear or glow overlays for your design mockups.

Do I need Node.js and Playwright to render lockscreen notifications as PNG?▼

Yes, generating lockscreen mockups requires Node.js and Playwright installed in your environment. Playwright handles the headless browser rendering and screenshot capture needed to convert the HTML output into a PNG image.

What's the best way to visualize app notification stacks in an iOS lockscreen mockup?▼

The best way to visualize app notification stacks is by defining them in a JSON config and rendering the lockscreen mockup. This process outputs a static visual representation of the notification stack details for marketing materials.

Can I use HTML and PNG lockscreen mockups for marketing and ad creatives?▼

Yes, the tool outputs static HTML and PNG files of the iOS lockscreen. These pixel-accurate visual representations are specifically designed for use in marketing materials, ad creatives, and software prototyping.

What are the limitations of rendering iOS lockscreen mockups from a JSON config?▼

A key limitation is that the tool generates static lockscreen mockups rather than interactive interfaces. It relies strictly on predefined JSON configurations, meaning it cannot simulate live iOS notifications or dynamic system behaviors.

Related Skills

Explore More Design & Creative Skills→
TW-NLPTW-NLP
91

webapp-testing

Execute Playwright scripts to automate web application testing and debugging.

Community
Advanced
gooseworks-aigooseworks-ai
6

notification-flood-ad

Generate a vertical iOS lockscreen notification avalanche clip with Playwright and ffmpeg.

Official
Advanced
microwindmicrowind
65

JSON验证器

Validate and format JSON data with syntax, structural, and optional schema checks.

Official
Advanced
j-mckerracherj-mckerracher

frontend-design

Create distinctive frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Community
Advanced