Screen Design Generator

When to Use This Skill

Reference

screen_tree_notation.md

Flow

Step 1: Gather Screen Requirements

• A screen name and brief description (e.g. "user profile page")
• A reference to an existing IA document or SCREENS.md entry
• A detailed feature list for the screen

• What is the primary purpose of this screen?
• What data does it display or collect?
• Are there any user actions on this screen?

Step 2: Establish Global Layout

GLOBAL_LAYOUT.md

• Header: brand logo, user menu, notifications, search?
• Navigation: sidebar, top nav, bottom tab bar?
• Footer: links, legal, support?
• Responsive behavior: how should navigation change on mobile?

GLOBAL_LAYOUT.md

{content}

Step 3: Generate Screen Element Tree

1. Start with

   - Screen: {ScreenName}

2. Embed the global layout structure, replacing

   {content}

   with the screen-specific elements
3. Apply responsive annotations where desktop and mobile differ
4. Validate against STN rules:
   • Single root
   • No empty containers
   • Leaf nodes carry content
   • No duplicate siblings
   • Depth ≤ 5
   • Responsive replacements are single elements

   • ?

     prefix only on optional elements

Step 4: Save

"Save this as

{screen_name}.md

?"

# {Screen Name} — Screen Design

> Generated: {date}

## Element Tree

{STN output}