Deft
Ask AI

Search

Search skills, authors and topics

Appllama / appllama-skills

appllama-app-design-skill

Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI — screens, flows, onboarding, paywalls, tab bars, sheets, settings, empty states — or when polishing motion, navigation, typography, dark mode, or perceived performance. Enforces Apple HIG fidelity, semantic colors, native controls, anti-slop discipline, navigation semantics, purposeful Reanimated motion, a full-motion simulator-verified iteration loop, and a study-real-apps-first workflow.

Install

npx skills add https://github.com/Appllama/appllama-skills --skill appllama-app-design-skill

Image & illustration assets — generation pipeline

App-quality artwork is generated, curated, and post-processed — never "one prompt, ship it". This is the pipeline.

1. Define the style system BEFORE generating anything

Write down, once per app:

  • Style family: flat-duotone / gradient-mesh / 3D-clay / paper-collage / hand-drawn-ink / photographic. Pick ONE.
  • Palette: 3–5 hexes lifted from the app's design tokens, including the exact surface color assets will sit on.
  • Lighting/texture: soft top-left studio light, matte, no specular — or whatever fits; but the same words in every prompt.
  • Subject grammar: mascot? abstract shapes? objects? People (and if so, what rendering style)?

Every asset prompt = style system + subject. This is what makes 12 assets read as one commissioned set instead of 12 stock images.

2. Generate with the best tool available

Use whatever image generation capability is present in your environment — an imagegen tool, the Higgsfield MCP/CLI, or another state-of-the-art model. Rules:

  • Highest quality settings, largest size, then downscale. Target at least 2× the largest rendered size (an asset shown at 200 pt needs ≥ 1200 px for @3x). Never upscale a small generation.
  • Generate 3–4 candidates per asset, pick the best, regenerate the rest of the set to match the winner if the winner drifted in style.
  • For icon sets and repeated elements, generate a sheet in one prompt (same lighting/palette guaranteed), then slice.
  • Backgrounds: ask for the exact surface hex as a solid background, or true transparency if the tool supports it. Inspect edges at 400% — halos, matte fringes, or JPEG blocking around the subject mean regenerate or run a background-removal pass.

3. Prompt patterns that work

[subject], [style family] illustration, [palette words + hexes],[lighting], solid background #0F0F13, centered composition,generous negative space, app illustration, no text, no watermark
  • Always append no text — models love baking in gibberish labels.
  • For empty states: subject should be quiet (a resting object, a soft scene), not a busy hero.
  • For celebration/success: motion implied by composition (confetti arcs, tilt), not literal speed lines.
  • For onboarding heroes: leave the upper or lower third empty for the headline; say so in the prompt ("composition weighted to bottom half").

4. Post-process

  1. Trim to content + consistent padding.
  2. Export @1x/@2x/@3x PNG (or a single high-res + let expo-image scale, for full-bleed art). WebP for large photographic assets.
  3. Verify on-device in BOTH themes: an asset generated on a dark ground often shows a halo on light ground. If the app is dual-theme, either generate theme twins or use assets on theme-invariant surfaces.
  4. Check file sizes: a decorative illustration should not cost 2 MB. Target < 200 KB per screen-level asset after compression.

5. App icon & store assets

  • App icon: generate at 1024×1024, no transparency, no rounded corners (the OS masks it). Test it at 60 px — if the concept dies small, simplify.
  • Screenshot frames/marketing come later; do not let store-asset style drift from in-app style.

6. Quality gate

Reject an asset if ANY of:

  • Style drifts from the set (different lighting, palette, line weight)
  • Halo/fringe on its background at 400% zoom
  • Baked-in text or watermark artifacts
  • Composition fights the layout (subject cropped by safe areas, focal point under a button)
  • Looks like clip-art / default-model-style with no art direction