| name | ios-notes-screenshot-generator |
| description | This skill generates realistic iOS notes app screenshots from arbitrary text input. It creates pixel-perfect iPhone notes app interfaces with proper iOS design patterns, typography, spacing, and visual elements. Use this skill when users need to create iOS-style notes app screenshots for presentations, mockups, or design references. |
iOS Notes App Screenshot Generator
This skill transforms arbitrary text input into realistic iOS notes app screenshots that match Apple's design language and visual standards.
When to Use This Skill
Use this skill when:
- User wants to create iOS-style notes app screenshots
- User needs to display text in a realistic iPhone notes interface
- User wants mockups for presentations or design references
- User needs to show how text would look in iOS Notes app
How This Skill Works
Core Components
- iPhone Screen Layout: Uses proper iPhone 14/15 dimensions (390x844px) with safe areas
- iOS Design System: Implements Apple's 8pt grid system, San Francisco font, and system colors
- Realistic UI Elements: Status bar, navigation bar, text areas, and interactive elements
- Typography: Proper iOS font weights, sizes, and line spacing
Key Design Patterns Implemented
- Navigation Bar: Large title mode (34pt) with standard iOS styling
- Status Bar: Realistic time, battery, signal indicators
- Text Areas: Proper margins (16pt), line height (1.4-1.5), and San Francisco font
- Color Semes: System colors with light/dark mode support
- Spacing: 8pt grid system throughout
Asset Usage
- Use
assets/ios-notes-template.html as the base template
- Reference
references/ios-design-patterns.md for detailed specifications
- Customize
scripts/screenshot-generator.js for dynamic content insertion
Usage Instructions
- Input Processing: Extract the user's text content and identify key requirements
- Template Selection: Choose appropriate notes app layout (list view vs detail view)
- Content Insertion: Insert text into proper iOS-styled containers
- Styling Application: Apply iOS design patterns, typography, and spacing
- Screenshot Generation: Create final HTML/CSS output that renders as iOS screenshot
Implementation Steps
- Create Base Template: Start with
assets/ios-notes-template.html
- Apply iOS Design System: Use
references/ios-design-patterns.md specifications
- Insert User Content: Place text in appropriate iOS-styled containers
- Generate Screenshot: Output HTML/CSS that creates realistic iOS notes interface
- Validate Fidelity: Ensure visual accuracy matches iOS Notes app
Output Specifications
The skill generates HTML/CSS that:
- Creates pixel-perfect iOS notes app interface
- Uses proper iPhone screen dimensions and safe areas
- Implements iOS design patterns and typography
- Displays user text in realistic iOS notes environment
- Includes status bar, navigation, and text editing UI elements
Technical Requirements
- Screen Size: 390x844px (iPhone 14/15 standard)
- Typography: San Francisco font family with iOS font weights
- Colors: iOS system colors with proper contrast ratios
- Spacing: 8pt grid system alignment
- Visual Elements: Realistic shadows, blur effects, and transitions
