Screen Design Generator
Design individual screen element trees using Screen Tree Notation (STN).
When to Use This Skill
Trigger phrases: "화면 설계", "화면 만들어", "screen design", "design screen", "화면 구조", "요소 트리"
Reference
Read
in this skill's directory for STN syntax, responsive notation, validation rules, and good/bad examples. All output must conform to that specification.
Flow
Step 1: Gather Screen Requirements
Ask the user what screen they need. Accept any of:
- 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
Clarify if unclear:
- 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
Check if
exists in the current working directory.
If it exists: Read it and use it as the shared layout wrapper. Inform the user which global layout is being applied.
If it does not exist: Ask the user about their preferences for shared layout elements:
- 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?
Then generate
in STN format based on the user's answers and save it. Use
to mark where individual screen content is inserted.
Step 3: Generate Screen Element Tree
Build the screen's element tree in STN format:
- Start with
- Embed the global layout structure, replacing with the screen-specific elements
- Apply responsive annotations where desktop and mobile differ
- 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
Present the full STN output to the user.
Step 4: Save
After presenting the result, ask:
If the user agrees, save to the current working directory with this format:
markdown
# {Screen Name} — Screen Design
> Generated: {date}
## Element Tree
{STN output}