Promptles
Constraints

Spell Out the States

Name what a static frame can't show: hover, empty, loading, breakpoints.

A static frame shows one moment. It can't show hover, focus, disabled, loading, empty, or error — and it rarely shows the narrow-screen layout. If you want those, name them. Otherwise you get a pixel-accurate component that falls apart the moment a user interacts with it or opens it on a phone.

Where you'll practice this

2 Promptles scenarios teach this principle directly. Each one drops you into a real engineering ticket and asks you to write the prompt you'd send to Claude Code.

  • Spell Out the States

    Claude built a clean 'Primary button' from a single frame — but the frame only showed the default look. In the running app the button feels dead: no hover, no keyboard focus ring, no disabled treatment, and no loading state for slow actions. A static frame can only show one…

  • Responsive From One Frame

    The design only has a desktop frame for a three-column pricing section. On a phone it overflows sideways and the cards get crushed. The designer never made a mobile frame, but you still have to ship something that reflows. The frame can't tell Claude what mobile looks like — so…

Other principles in Constraints