القائمة
Create distinctive, production-grade iOS mobile UI screens. Use for mobile app prototyping.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | mobile-design |
| description | Create distinctive, production-grade iOS mobile UI screens. Use for mobile app prototyping. |
Generate production-grade iOS screens (iPhone 14 Pro, 393×852). Make them memorable, not just correct.
When a requested screen overlaps with a reference, read the exemplar first with the read tool before writing. Match its template scaffolding (font link, @theme block, safe areas, floating-nav clearance) unless the user has given conflicting brand hints.
examples/wellness.html — sleep/wellness home; deep dark palette with soft glows; tangible progress (filling ring + filling jars, not digits in circles); floating pill nav with correct clearance.examples/finance.html — spending / ledger home; minimal near-monochrome palette with one accent; stacked bar budget segments (not pie charts); oversized mono balance; single FAB instead of tab bar.Add your own variation on top — do not copy verbatim.
Produce 3 screens unless the user says otherwise, picked from:
Numbers in circles are forgettable. Make achievements feel like real rewards:
bottom-[12px] to bottom-[18px]pb-[88px] to pb-[104px]| Domain | Feel | Typical fonts |
|---|---|---|
| Sleep / wellness | Deep dark (navy, indigo), soft glows, large radii | Plus Jakarta Sans, Nunito |
| Food / fitness | Warm accents (coral, orange, green) | DM Sans, Outfit |
| Finance / productivity | Minimal, one bold accent | Geist, SF Pro |
| Social / entertainment | Bold colors, varied card sizes | Satoshi, General Sans |
<!DOCTYPE html>
<html lang="en" data-title="Screen Name">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=393, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<style type="text/tailwindcss">
@theme {
--font-sans: "DM Sans", system-ui, sans-serif;
--color-background: #0f172a;
--color-foreground: #f8fafc;
--color-card: #1e293b;
--color-primary: #3b82f6;
--color-muted-foreground: #94a3b8;
--color-accent: #8b5cf6;
--color-border: rgba(255, 255, 255, 0.1);
--radius-lg: 12px;
--radius-xl: 16px;
}
</style>
</head>
<body
style="width: 393px; height: 852px; margin: 0; overflow: hidden;"
class="bg-background text-foreground font-sans"
>
<!-- Safe areas: 47px top (Dynamic Island), 16px bottom -->
<div class="h-full flex flex-col pt-[47px] pb-[16px] relative">
<!-- content -->
</div>
</body>
</html>
Body: fixed 393×852, overflow: hidden. Safe areas: 47px top, 16px bottom baseline.
Use the write tool — never inline HTML in your reply.
screens/<kebab-name>.htmldata-title="<Screen Name>" on the <html> tagDecide in one sentence each:
Honor these over defaults if filled.
@keyframes definitionsanimation: CSS shorthandanimate-* utilities (animate-spin, animate-pulse, animate-bounce, animate-ping, custom keyframe-backed ones)opacity: 0 initial states (mount-time fade-ins)href="#")Allowed: hover/focus transitions on interactive elements (transition-*, hover:*, focus:*) — these are legitimate UI affordances, not decorative motion.
<span class="iconify" data-icon="solar:home-bold" data-width="24"></span>
Sets: solar (modern) · phosphor (friendly) · tabler (crisp) · lucide (clean)
https://images.unsplash.com/photo-<ID>?w=<W>&h=<H>&fit=crop
Widths: mobile 400–600 · tablet 800–1000 · desktop 1200–1600