القائمة
Generate placeholder images using picsum.photos that match the design system color scheme. Use during build phase when sections need hero images, avatars, backgrounds, or any visual content.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
Conversational interview to gather site requirements. Asks language, branding, purpose, and tone — then suggests theme presets or accepts images. Use when /orchestrator:start kicks off a run.
Build orchestrator projects with the same shape/craft/polish/audit flow used by pi-orchestrator. Use during building phase only.
Deploy orchestrator output with Cloudflare after confirmation, preserving pi-orchestrator deploy behavior.
| name | orchestrator-picsum |
| description | Generate placeholder images using picsum.photos that match the design system color scheme. Use during build phase when sections need hero images, avatars, backgrounds, or any visual content. |
Generates picsum.photos URLs for placeholder images that suit the design context.
During craft-* tasks when a section needs images (hero backgrounds, testimonial avatars, feature illustrations, product screenshots, team photos, etc).
Picsum provides real photography at any dimension. Use these URL patterns:
https://picsum.photos/{width}/{height}
https://picsum.photos/seed/{seed}/{width}/{height}
https://picsum.photos/seed/{seed}/{width}/{height}?grayscale
https://picsum.photos/seed/{seed}/{width}/{height}?blur=2
https://picsum.photos/seed/{seed}/{width}/{height}?grayscale&blur=2
| Section Kind | Dimensions | Notes |
|---|---|---|
| hero | 1920x1080 | Full-width background |
| hero (contained) | 800x600 | Side illustration |
| features | 400x300 | Feature card images |
| testimonials (avatar) | 80x80 | Round avatar |
| testimonials (photo) | 200x200 | Larger portrait |
| pricing | none | Usually no images |
| gallery | 600x400 | Grid items |
| team | 300x300 | Square headshots |
| blog/cards | 600x340 | 16:9 card thumbnails |
| logo/partners | 200x80 | Grayscale recommended |
Use deterministic seeds based on section + index for consistency:
seed = {section-id}-{index}
Examples:
https://picsum.photos/seed/hero-1/1920/1080https://picsum.photos/seed/testimonials-1/80/80https://picsum.photos/seed/testimonials-2/80/80https://picsum.photos/seed/features-1/400/300Read the design system to decide image treatment:
| Design Tone | Treatment |
|---|---|
| Minimal / monochrome | ?grayscale |
| Dark theme | ?grayscale or blurred backgrounds |
| Colorful / vibrant | No filter (full color) |
| Soft / muted | ?blur=1 for backgrounds |
| Professional / corporate | ?grayscale for team, color for hero |
<!-- Hero background -->
<div class="bg-cover bg-center" style="background-image: url('https://picsum.photos/seed/hero-1/1920/1080?blur=2')">
<!-- Avatar -->
<img src="https://picsum.photos/seed/avatar-1/80/80" class="rounded-full" alt="User avatar" />
<!-- Feature card -->
<img src="https://picsum.photos/seed/feature-1/400/300" class="rounded-lg object-cover" alt="Feature illustration" />
seed/ URLs for deterministic resultsalt attributes for accessibilityobject-cover or object-contain in Tailwind for responsive fit