Back to Details

screen-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Screen Design Generator

屏幕设计生成器

Design individual screen element trees using Screen Tree Notation (STN).
使用Screen Tree Notation（STN）设计单个屏幕的元素树。

When to Use This Skill

何时使用此技能

Trigger phrases: "화면 설계", "화면 만들어", "screen design", "design screen", "화면 구조", "요소 트리"
触发短语："화면 설계", "화면 만들어", "screen design", "design screen", "화면 구조", "요소 트리"

Reference

参考资料

Read 
screen_tree_notation.md
in this skill's directory for STN syntax, responsive notation, validation rules, and good/bad examples. All output must conform to that specification.
阅读此技能目录中的
screen_tree_notation.md
文件，了解STN语法、响应式标记、验证规则以及正反示例。所有输出必须符合该规范。

Flow

流程

Step 1: Gather Screen Requirements

步骤1：收集屏幕需求

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?
询问用户需要什么屏幕。接受以下任意输入：
  • 屏幕名称和简要描述（例如："用户资料页面"）
  • 对现有IA文档或SCREENS.md条目的引用
  • 屏幕的详细功能列表
若信息不明确，需澄清：
  • 该屏幕的主要用途是什么？
  • 它需要显示或收集哪些数据？
  • 该屏幕上有哪些用户操作？

Step 2: Establish Global Layout

步骤2：确定全局布局

Check if 
GLOBAL_LAYOUT.md
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 
GLOBAL_LAYOUT.md
in STN format based on the user's answers and save it. Use 
{content}
to mark where individual screen content is inserted.
检查当前工作目录中是否存在
GLOBAL_LAYOUT.md
文件。
若已存在： 读取该文件并将其作为共享布局包装器使用。告知用户正在应用哪个全局布局。
若不存在： 询问用户对共享布局元素的偏好：
  • 页眉：品牌标志、用户菜单、通知、搜索？
  • 导航：侧边栏、顶部导航、底部标签栏？
  • 页脚：链接、法律声明、支持入口？
  • 响应式行为：在移动端导航应如何变化？
然后根据用户的回答生成STN格式的
GLOBAL_LAYOUT.md
文件并保存。使用
{content}
标记插入单个屏幕内容的位置。

Step 3: Generate Screen Element Tree

步骤3：生成屏幕元素树

Build the screen's element tree in STN format:
  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
Present the full STN output to the user.
以STN格式构建屏幕的元素树：
  1. 以
    - Screen: {ScreenName}
    开头
  2. 嵌入全局布局结构，将
    {content}
    替换为屏幕特定元素
  3. 在桌面端和移动端存在差异的地方应用响应式注释
  4. 根据STN规则验证：
    • 单个根节点
    • 无空容器
    • 叶子节点包含内容
    • 无重复同级节点
    • 深度 ≤ 5
    • 响应式替换为单个元素
    • 仅可选元素使用
      ?
      前缀
向用户展示完整的STN输出。

Step 4: Save

步骤4：保存

After presenting the result, ask:
"Save this as 
{screen_name}.md
?"
If the user agrees, save to the current working directory with this format:
markdown
undefined
展示结果后，询问：
"是否将此保存为
{screen_name}.md
？"
若用户同意，按以下格式保存到当前工作目录：
markdown
undefined

{Screen Name} — Screen Design

{Screen Name} — Screen Design

Generated: {date}
Generated: {date}

Element Tree

Element Tree

{STN output}
undefined
{STN output}
undefined