appllama-app-design-skill

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