---
id: daily-brief-to-tasks
name: "brief-to-tasks"
url: https://skills.yangsir.net/skill/daily-brief-to-tasks
author: julianoczkowski
domain: product
tags: ["project-management", "product-strategy", "workflow-automation"]
install_count: 3400
rating: 4.40 (8 reviews)
github: https://github.com/julianoczkowski/designer-skills
---

# brief-to-tasks

> 将设计简报拆解为有序的可构建任务列表，每个任务都是可独立构建、审查和验证的垂直切片

**Stats**: 3,400 installs · 4.4/5 (8 reviews)

## Before / After 对比

### 任务拆解合理性

**Before**:

按技术模块拆解任务，前端后端分离开发，集成时发现接口不匹配，大量返工修改

**After**:

按垂直功能拆解，每个任务包含完整前后端，独立可验证，集成顺畅无冲突

| Metric | Before | After | Change |
|---|---|---|---|
| 集成问题返工率 | 60% | 10% | -83% |

## Readme

# brief-to-tasks

This skill turns a design brief into an ordered, buildable task list. Each task is a vertical slice: a piece of UI that can be built, reviewed, and verified on its own.

## Example prompts

- "Break the brief into tasks"

- "What should I build first?"

- "Create a task list from the design brief"

- "Plan the build order for this feature"

## Process

- 

Read the design brief. Look for `.design/*/DESIGN_BRIEF.md`. If multiple subfolders exist, use the most recently modified one, or ask the user which feature they are working on. Also check for `INFORMATION_ARCHITECTURE.md` and a tokens file in the same subfolder. If none exist, ask the user to describe what they are building.

- 

Explore the existing codebase to understand what is already built. Scan specifically for:

**Component directories**: `components/`, `ui/`, `shared/` and list every component by name

- **Existing pages/views**: what is already built that this feature must coexist with

- **Token/theme files**: `tokens.css`, `globals.css`, Tailwind config, theme providers

- **File naming conventions**: kebab-case, PascalCase, how files are organized (by feature, by type)

- **Test files**: if tests exist alongside components, new tasks should include test expectations

- **Package.json dependencies**: what UI libraries, animation libraries, and icon sets are already installed

- Classify each relevant component as: will be reused as-is, needs modification, or does not exist yet. Only components that need modification or creation get their own tasks.

- 

Break the work into vertical slices. Each task should:

Be independently buildable (no task should block another unless noted).

- Include structure, styling, and interaction in a single task (not "build HTML" then "add CSS" then "add JS" as separate tasks).

- Be verifiable: you can look at the result and confirm it matches the brief.

- Be small enough to complete in a single session.

- 

Order tasks by:

**Dependencies first**: foundational elements (tokens, layout shells, shared components) before page-specific work.

- **Visual priority**: the most prominent UI element early, so the user can validate the aesthetic direction before investing in details.

- **Risk first**: the hardest or most uncertain piece early, so problems surface before everything else is built around them.

- 

Save the task list as `TASKS.md` in the same `.design/<feature-slug>/` subfolder as the design brief.

## Task List Template

```
# Build Tasks: [Feature/Page Name]

Generated from: .design/<feature-slug>/DESIGN_BRIEF.md
Date: [date]

## Foundation
- [ ] **[Task name]**: [One sentence describing what to build and what "done" looks like]. _Reuses: [existing components/tokens if any]._
- [ ] **[Task name]**: [Description]. _New component._

## Core UI
- [ ] **[Task name]**: [Description]. _Depends on: [task name if any]._
- [ ] **[Task name]**: [Description].

## Interactions & States
- [ ] **[Task name]**: [Description]. Covers: [list of states, e.g., hover, loading, error, empty].
- [ ] **[Task name]**: [Description].

## Responsive & Polish
- [ ] **[Task name]**: [Description]. Breakpoints: [which ones].
- [ ] **[Task name]**: Accessibility pass. [Specific checks from the brief].

## Review
- [ ] **Design review**: Run /design-review against the brief.

```

## Rules

- Every task must reference whether it reuses, modifies, or creates components.

- Never create a task that is only "set up the project" or "create the file structure." Those are not vertical slices.

- If the brief specifies an aesthetic philosophy, note it in the first build task so the visual direction is established immediately.

- Group related tasks but do not nest them more than one level deep. Flat lists are easier to work through.

Weekly Installs557Repository[julianoczkowski…r-skills](https://github.com/julianoczkowski/designer-skills)GitHub Stars56First SeenMar 28, 2026Security Audits[Gen Agent Trust HubPass](/julianoczkowski/designer-skills/brief-to-tasks/security/agent-trust-hub)[SocketPass](/julianoczkowski/designer-skills/brief-to-tasks/security/socket)[SnykPass](/julianoczkowski/designer-skills/brief-to-tasks/security/snyk)Installed ongithub-copilot544cursor544opencode544codex544gemini-cli543kimi-cli543

---
*Source: https://skills.yangsir.net/skill/daily-brief-to-tasks*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-brief-to-tasks/markdown*