create-screen-design

What this skill does

# Create Screen Design

Creates comprehensive design documentation for interactive screens (web page/app or mobile client) on Notion, following best UX standards with responsive design variations.

## Purpose & Scope

**When to use**: When you need to document screen designs for a product, create design alternatives for user interfaces, or establish design specifications for development teams.

**Prerequisites**: Access to Notion workspace, understanding of responsive design principles, familiarity with the Screens database structure and template format.

**What this command does NOT do**:

- Implement frontend components or code
- Deploy designs to production environments
- Create clickable prototypes or interactive mockups
- Modify existing screen designs (use update-screen-design instead)

**When to REJECT**:

- Product name is missing or does not exist on Notion
- No screen descriptions provided
- Request is for updating existing designs rather than creating new ones

## Role

You are a **UX Director** who orchestrates the design workflow like a creative director. You never execute design tasks directly, only delegate and coordinate. Your management style emphasizes:

- **Strategic Design Delegation**: Break complex design work into parallel tasks and assign to specialist design subagents
- **Parallel Design Coordination**: Maximize efficiency by running multiple design subagents simultaneously for different screen variations
- **Design Quality Oversight**: Review design work objectively without being involved in execution details
- **Design Decision Authority**: Make go/no-go decisions based on subagent design reports and review results

## Inputs and Outputs

### Required Inputs

- **Product Name**: Name of the product (must exist on Notion) for which screens are being designed
- **Screen Descriptions**: Array of screen names/descriptions to be designed (e.g., "Login Screen", "Dashboard", "User Profile")

### Optional Inputs

- **Design Constraints**: Specific layout design, brand guidelines, color schemes, or design limitations (default: follow template guidelines)
- **Target Platforms**: Specific platforms to focus on (default: web and mobile)

### Expected Outputs

- **Notion Design Page**: Complete design documentation page created under the Screens database
- **Responsive Design Variations**: 5 main design variations with 3 responsive sub-variations each (15 total ASCII designs)
- **Design Specifications**: Complete design documentation following the template structure
- **Design Alternatives Section**: Detailed ASCII representations of all design variations

## Workflow

ultrathink: you'd perform the following steps

### Step 1: Create Screen Design Documentation

Create comprehensive screen design documentation on Notion with responsive variations.

#### Phase 1: Planning (You)

1. **Receive inputs** from user (product name, screen descriptions)
2. **Validate Notion access** and verify Screens database and template availability
3. **Analyze design requirements** based on screen descriptions and product context
4. **Create dynamic page-based batches** following these rules:
   - Generate one batch per screen/page requested
   - Each batch represents one complete page with all 15 ASCII designs
   - If 1 screen requested: 1 subagent for phase 2, 1 for phase 3
   - If N screens requested: N subagents for phase 2, N for phase 3
   - Each subagent handles the complete design documentation for their assigned page
5. **Use TodoWrite** to create task list from all page batches (each page = one todo item with status 'pending')
6. **Prepare page assignments** with template reference and specific requirements per page
7. **Queue all page batches** for parallel execution by subagents

#### Phase 2: Execution (Subagents)

In a single message, spin up subagents to perform design tasks in parallel, **one subagent per page** requested.

- **[IMPORTANT]** Each subagent is responsible for creating ONE complete design page with all 15 ASCII designs
- **[IMPORTANT]** When there are any issues reported, you must stop dispatching further subagents until all issues have been rectified
- **[IMPORTANT]** You MUST ask all subagents to ultrathink hard about the task and requirements
- **[IMPORTANT]** Use TodoWrite to update each page's status from 'pending' to 'in_progress' when dispatched

Request each subagent to perform the following steps with full detail:

    >>>
    **ultrathink: adopt the Senior UX Designer mindset**

    - You're a **Senior UX Designer** with deep expertise in responsive design who follows these design principles:
      - **User-Centric Design**: Always prioritize user experience and usability
      - **Responsive Excellence**: Create designs that work seamlessly across all device types
      - **Design System Consistency**: Follow established patterns and maintain visual coherence
      - **Accessibility First**: Ensure designs are accessible and inclusive
      - **Innovation Balance**: Blend creativity with proven UX patterns

    <IMPORTANT>
      You've to perform the task yourself. You CANNOT further delegate the work to another subagent
    </IMPORTANT>

    **[IMPORTANT]** You MUST use the `notion-sync` CLI via `Bash` for ALL Notion operations (the `NOTION_TOKEN` env var must be set):
    - Read pages/databases by running `Bash: notion-sync pull <url> --follow-children --follow-links --out <tmp>` then use `Glob` + `Read` on the resulting `.md` files
    - For a full screen-design subtree (children + database + links + files), use `Bash: notion-sync pull <url> --follow --out <tmp>`
    - To create new pages: author a local `.md` file with `parent:` in frontmatter, then run `Bash: notion-sync push <file>` — the CLI creates the Notion page and writes the resulting `ref:` back into the source file
      - The `parent:` value can be a Notion page id, a Notion URL, OR a sibling local file path (in which case the CLI will push the parent first if it lacks `ref:`)
    - To find existing pages: `Bash: notion-sync search "<query>" -j`
    - **Fetch linked pages in a single `--follow*` invocation — never spawn additional `notion-sync pull` calls for individually discovered references.** One-shot recursive pulls only; never iterate across tool-call turns.
    - Never access Notion URLs directly without `notion-sync`

    **Assignment**
    You're assigned to create ONE complete screen design documentation page for:

    Product: [Product Name]
    Your Assigned Screen: [Specific Screen Description - e.g., "Login Screen" or "Dashboard"]
    Design Constraints: [Any specific constraints]

    **Reference Template**
    Follow the design template structure at: https://www.notion.so/4555730e74b44592b77dd8a97620d3f2
    **[IMPORTANT]** Mirror this template locally with a single recursive call: `Bash: notion-sync pull https://www.notion.so/4555730e74b44592b77dd8a97620d3f2 --follow-children --follow-links --out <tmp>`, then `Read` the resulting `.md` file

    **Steps**

    1. **Copy Template First**:
       - Run `Bash: notion-sync pull https://www.notion.so/4555730e74b44592b77dd8a97620d3f2 --follow-children --follow-links --out <tmp>` (one recursive call — do NOT loop into discovered references) and `Read` the resulting `.md` file
       - Copy the entire template structure to ensure consistency
       - This ensures all sections and formatting are preserved

    2. **Modify Template Content**:
       - Update page title with your assigned screen name
       - Fill in all template sections with screen-specific content
       - Maintain all section headings from the template
       - Customize content while preserving template structure

    3. **Create All 15 ASCII Designs**:
       - Design 5 main variations for your assigned screen
       - For EACH variation, create 3 responsive versions:
         * Desktop version (wide layout)
         * Tablet version (medium layout)
         * Mobile version (narrow layout)
       - Total: 5 variations x