workspace-design

Files (3)

• SKILL-cn-long.md
• SKILL-cn.md
• SKILL.md

SKILL.md (first lines)

# Workspace Design

## Goal

Design pages as workspaces where the user first understands the current situation, then narrows into real work, and then acts on real objects directly. Do not let the page collapse into an admin-console pattern where the user filters records first and only acts afterward.

Keep this order in mind:

1. Establish the current situation
2. Narrow into the right work pool
3. Land on real objects quickly
4. Support action in the most suitable view

When rules conflict, use this priority:

1. Keep the output structurally complete
2. Satisfy the hard rules
3. Preserve the workspace hierarchy when it matters
4. Replace generic labels with business language
5. Add explanation or examples last

## Parse The Input First

Before producing the solution, extract:

- Role
- Primary goal
- High-frequency actions
- Risks or exceptions
- Core objects
- Work rhythm
- Key stages or handoff points
- Whether the work is queue-driven, category-driven, or mixed
- Whether mobile drill-down, responsive behavior, routing, or browser history matters for this task
- Problems in the current page, if a current page exists

If information is missing:

- Make 1 to 5 minimal assumptions
- Put them in `0. Assumptions`
- Do not fall back to vague principles

## Choose The Mode

### Generate Mode

Use this when the user provides requirements, a PRD, a workflow, a role goal, or a verbal description.

### Review Mode

Use this when the user provides a screenshot, wireframe, HTML, an existing page proposal, or explicitly asks whether something feels like a workspace.

In review mode:

1. Judge whether the current design is closer to a workspace or an admin console
2. Identify structural problems
3. Propose a full workspace-oriented redesign

Do not stop at criticism. Always produce a concrete redesign.

## Default Structural Pattern

Prefer this as the default pattern unless the task clearly needs another layout.

```text
Page title + one-line positioning + global quick actions
Situation card strip
Optional page-level filters / scope controls

Two-column workspace:
Left: Level 1 ALL + work categories OR Level 2 Back + task queue
Main: category work view OR Back + task detail / action surface
Optional right drawer
```

### Meaning Of The Areas

- The top establishes the situation instead of starting with a large table
- The left column is a hierarchical work finder, not app navigation
- The left column should move quickly from category scope to concrete tasks
- The main column is the real workspace surface
- The right drawer is optional and only carries secondary context

## Responsive, Mobile, And Routing

Use this section only when the task involves responsive behavior, mobile flow, routing, browser history, or implementation details that depend on navigation structure.

### Desktop

Prefer a 2-column workspace:

- Left: hierarchical finder
- Main: workspace surface
- Right drawer: optional only

### Mobile

Do not try to preserve side-by-side panes.

Serialize the same hierarchy into drill-down screens:

```text
Categories -> Tasks -> Task -> Subtasks / Operation
```

### Routing Model

Treat the workspace as a navigable hierarchy:

```text
workspace -> scope -> task -> step
```

How this hierarchy is expressed depends on platform and app conventions:

- Path segments
- Query state
- In-app navigation state
- Native stack navigation

From yysun/awesome-agent-world, MIT.

More from yysun/awesome-agent-world