メニュー
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