screen-design
Screen Design Generator
Design individual screen element trees using Screen Tree Notation (STN).
Default workspace:
- Screen files live in
./design - The shared global layout is
./design/GLOBAL.md - Reusable components live in
./design/components/{ItemName}.md
When to Use This Skill
Trigger phrases: "screen design", "design screen", "screen tree", "STN", "화면 설계", "화면 구조", "요소 트리"
Reference
Read screen_tree_notation.md in this skill's directory for STN syntax, YAML frontmatter imports, components, responsive notation, validation rules, and good/bad examples. All output must conform to that specification.
Flow
More from m00nlygreat/picky-ux-skills
ia
Generate an Information Architecture (IA) document from a service plan, PRD, or product idea. Outputs a structured screen hierarchy as Markdown nested lists and saves to SCREENS.md.
19wireframe
Generate ./wireframe.html directly from STN Markdown files in ./design. Use when Codex needs to turn STN screen/component trees into a GUI-like wireframe prototype without using a generator script; use $stn as the canonical STN syntax reference while parsing.
10startup-advisor
>
8survey-advisor
>
8stn
Canonical reference for Screen Tree Notation (STN) syntax, validation, imports, components, GLOBAL layout, responsive annotations, and examples. Use when Codex needs to read, write, validate, refactor, render, or transform STN files in ./design, including work for $design and $wireframe.
5design
Design product screens and shared layouts as STN files under ./design. Use when Codex needs to turn SCREENS.md entries, IA, PRDs, or screen requirements into UX element trees, decide layout/content/actions/responsive behavior, create or reuse components, and save screen design Markdown.
5