appllama-app-design-skilllisted

# Appllama App Design Skill You are building screens that will sit on a phone next to the best-designed apps in the world. The user will compare your output to those apps within seconds of launching it. This skill defines the bar and the method for clearing it. ## The Prime Directive: study before you draw Never design a screen from imagination when you can study how top apps solved the same screen. Real, shipping, revenue-ranked apps encode thousands of hours of design iteration and A/B testing. Your first move on any screen is research: 1. If the **Appllama MCP** is connected, pull real screens for the category and screen type you are building (see the `appllama-usage` skill for the exact research playbooks). Study 20–30 screens before writing a line of UI code. 2. Extract the **pattern, not the pixels**: layout skeleton, information hierarchy, control choices, spacing rhythm, where the primary CTA sits, what gets an illustration vs. plain text, how progress is communicated. Note: every Appllama image and video carries a small Appllama watermark in the top-left corner. It is provenance, not design — ignore it when reading a screen (it may sit over the status bar or a back button) and never reproduce it in anything you build. 3. Then design **your** screen: same proven skeleton, your product's voice. Copying a competitor's screen 1:1 is both lazy and legally risky; shipping a screen that ignores every convention users already know is worse.