mcpField
B
brief-to-tasks

brief-to-tasks

github.com/julianoczkowski开发5945.2k 次安装16 周前更新
代码仓库

关于 brief-to-tasks

brief-to-tasks 根据设计简报和现有代码库，生成有序、可构建且可验证的 UI 任务清单，供功能开发规划使用。任务按独立的垂直切片组织，并保存为 TASKS.md。

主要功能

  1. 01读取设计简报和项目结构
  2. 02识别需复用、修改或创建的组件
  3. 03拆分为可验证的垂直切片
  4. 04按依赖、视觉优先级和风险排序
  5. 05将任务清单保存为 TASKS.md

适用场景

  1. 01依据设计简报规划实现工作
  2. 02确定优先开展的 UI 任务
  3. 03结合现有组件安排功能开发

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/julianoczkowski/designer-skills --skill brief-to-tasks

安装后在 Claude Code 中输入/brief-to-tasks确认已加载。

详细介绍

此技能会将设计简报转化为有序、可构建的任务列表。每项任务都是一个垂直切片：一块可以独立构建、评审和验证的 UI。

示例提示词

  • “将简报拆分成任务”
  • “我应该先构建什么？”
  • “根据设计简报创建任务列表”
  • “规划此功能的构建顺序”

流程

  1. 阅读设计简报。查找 .design/*/DESIGN_BRIEF.md。如果存在多个子文件夹，请使用最近修改的那个，或询问用户正在开发哪个功能。同时检查同一子文件夹中是否有 INFORMATION_ARCHITECTURE.md 和 tokens 文件。如果这些文件都不存在，请让用户描述他们要构建的内容。

  2. 探索现有代码库，了解已经构建的内容。重点扫描以下内容：

    • 组件目录：components/、ui/、shared/，并按名称列出每个组件
    • 现有页面/视图：列出此功能必须与之共存的现有内容
    • Tokens/主题文件：tokens.css、globals.css、Tailwind 配置、主题提供程序
    • 文件命名约定：kebab-case、PascalCase，以及文件的组织方式（按功能、按类型）
    • 测试文件：如果组件旁边已有测试，新任务应包含测试要求
    • Package.json 依赖项：已安装的 UI 库、动画库和图标集
    • 将每个相关组件分类为：可直接复用、需要修改或尚不存在。只有需要修改或创建的组件才需要单独列为任务。

  3. 将工作拆分为垂直切片。每项任务都应：

    • 可独立构建（除非明确注明，否则任务之间不应相互阻塞）。
    • 将结构、样式和交互放在同一项任务中（不要将“构建 HTML”“添加 CSS”“添加 JS”拆分成不同任务）。
    • 可验证：检查结果即可确认是否符合简报。
    • 规模适中，可在单次工作时段内完成。

  4. 按以下顺序安排任务：

    • 优先处理依赖项：先处理基础元素（tokens、布局外壳、共享组件），再处理页面专属工作。
    • 优先处理视觉重点：尽早构建最醒目的 UI 元素，让用户能在投入细节之前验证美学方向。
    • 优先处理风险：尽早处理最困难或最不确定的部分，以便在其他内容围绕它构建之前发现问题。

  5. 将任务列表保存为设计简报所在的 .design/<feature-slug>/ 子文件夹中的 TASKS.md。

任务列表模板

# 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.

规则

  • 每项任务都必须说明是复用、修改还是创建组件。
  • 切勿创建仅用于“设置项目”或“创建文件结构”的任务。这些不属于垂直切片。
  • 如果简报指定了美学理念，请在第一个构建任务中注明，以便立即确立视觉方向。
  • 将相关任务分组，但嵌套不要超过一层。平铺列表更易于执行。

评论

支持 Markdown