php中文网

How to Create Custom Plans with “planmd” in Goose

php中文网

什么是鹅?
goose 是一种开发代理,可通过在终端或 ide 中自动执行编码任务来增强软件开发。在您输入的指导下,它会智能地分析您的项目需求,生成必要的代码,并自主实施更改。在与 goose 合作时,采用结构化方法来指导其执行以实现特定目标至关重要。这就是 plan.md 文件的用武之地。 plan.md 文件允许您为 goose 定义自定义计划,使用灵活的文本格式和 jinja 模板的强大功能来创建动态、可重用且面向目标的计划。

如何设置 goose
在创建自定义 plan.md 文件之前,您需要设置 goose。

第 1 步: 在 github 上分叉 goose 和 goose 插件存储库并克隆它们。

第2步:安装homebrew — 访问brew.sh并按照安装步骤操作,或运行:

/bin/bash -c "$(curl -fssl https://raw.githubusercontent.com/homebrew/install/head/install.sh)"

第 3 步: 要安装 goose,请使用 pipx。首先确保 pipx 已安装:

brew install pipx
pipx ensurepath

第四步:然后安装goose:

pipx install goose-ai

第 5 步: 启动会话 — 从您的终端导航到您要启动的目录并运行:

goose session start

goose 与您首选的法学硕士合作。默认情况下,它使用 openai 作为 llm 提供者。系统会提示您设置 api 密钥。

什么是“plan.md”文件?

plan.md 文件是一个文本文件,用作 goose 遵循的蓝图。它由两个基本组成部分组成:

a kickoff message that sets the context and overall goal
a structured list of tasks for goose to execute.

为什么使用 plan.md 文件?

  • 定制:
    您可以针对特定任务或项目定制 goose 的操作。

  • 可重复使用性:
    模板可以轻松地重复使用和修改类似目标的计划。

  • 清晰度:
    概述目标和步骤可确保更好的控制和可预测性。

创建您的第一个 plan.md 文件

假设您希望 goose 帮助建立一个新的设计系统。以下是您的 plan.md 的示例:

your goal is to set up a fresh design system for our app's redesign.

- create folders for design components (buttons, forms, colors)
- set up color palette based on brand guidelines
- create typography styles for headings and body text
- design basic button components with all states
- create form elements (inputs, dropdowns)

看到任务中每行开头的那些破折号 (-) 了吗?超级重要! goose 会寻找这些信息来了解需要采取哪些步骤。要使用此计划运行 goose:

goose session start --plan plan.md

在计划中使用 jinja 模板
jinja 是一个模板引擎,允许您直接在文本文件中嵌入变量、循环和条件。使用 jinja,您可以使 plan.md 文件变得动态且适应性强。

key jinja 语法

  • 变量: {{ 变量 }}

  • 循环: {% for item in list %}...{% endfor %}

  • 条件: {% if condition %}...{% endif %}

记住我们的 plan.md 文件,这是使用 jinja 模板的增强版本的样子。

# design system setup plan for {{ brand_name }}

## goal
set up a fresh design system for the {{ project_name }} app's redesign.

---

## steps to follow

### 1. create folders
organize design components into well-structured folders:
- **buttons:** include all button components and their states (default, hover, active, disabled).
- **forms:** include inputs, dropdowns, checkboxes, and radio buttons.
- **colors:** store primary, secondary, and accent color palettes.

### 2. set up color palette
define a consistent color palette adhering to the brand guidelines:
- **primary color:** {{ primary_color }} 
- **secondary color:** {{ secondary_color }}
- **accent colors:** {{ accent_colors | join(", ") }}
- **neutral colors:** add greys, whites, and blacks for backgrounds and borders.
- **accessibility:** ensure color contrast meets accessibility standards (wcag).

### 3. create typography styles
define text styles for the app:
- **headings:** {{ heading_styles | join(", ") }} 
- **body text:** include base styles, captions, and links.
- **font guidelines:** use {{ font_family }} with font sizes ranging from {{ font_sizes | join(", ") }}.

### 4. design button components
design the following button states:
- default
- hover
- active
- disabled

ensure all buttons are:
- **responsive:** scalable across device sizes.
- **accessible:** incorporate clear focus states for keyboard navigation.

### 5. create form elements
design essential form components:
- input fields (default, focused, error)
- dropdowns (expanded, collapsed)
- checkboxes and radio buttons (checked, unchecked, disabled)
- submit buttons (loading, error)

---

## additional notes
- test designs for usability and accessibility before finalizing.

将参数传递给计划
执行期间可以将参数传递到 plan.md 文件中。例如,为了使我们的设计系统设置计划动态且可重用,我们使用 jinja 模板,它允许我们传递根据特定项目、品牌或设计要求定制内容的参数。通过传递不同的参数集,我们可以轻松地为任何重新设计或产品生成个性化计划。

示例:与 jinja 传递参数

定义数据:第一步是准备要传递到模板中的数据。这包括品牌名称、颜色、排版风格和其他设计特定细节等值。

{
    "brand_name": "awesomeapp",
    "project_name": "awesomeapp redesign",
    "primary_color": "#3498db",
    "secondary_color": "#2ecc71",
    "accent_colors": ["#e74c3c", "#9b59b6", "#f1c40f"],
    "heading_styles": ["h1 (32px)", "h2 (24px)", "h3 (20px)"],
    "font_family": "roboto, sans-serif",
    "font_sizes": ["12px", "14px", "16px", "18px", "24px", "32px"],
}

要使用此计划和参数运行 goose,您将运行以下命令:

goose session start --plan plan.md --args brand_name=awesomeapp,project_name="awesomeapp redesign",primary_color="#3498db",secondary_color="#2ecc71",accent_colors="#e74c3c,#9b59b6,#f1c40f",heading_styles="h1 (32px),h2 (24px),h3 (20px)",font_family="roboto, sans-serif",font_sizes="12px,14px,16px,18px,24px,32px"

goose 将使用这些值填充 plan.md 中的占位符。

# Design System Setup Plan for AwesomeApp

## Goal
Set up a fresh design system for the AwesomeApp Redesign app's redesign.

---

## Steps to Follow

### 1. Create Folders
Organize design components into well-structured folders:
- **Buttons:** Include all button components and their states (default, hover, active, disabled).
- **Forms:** Include inputs, dropdowns, checkboxes, and radio buttons.
- **Colors:** Store primary, secondary, and accent color palettes.

### 2. Set Up Color Palette
Define a consistent color palette adhering to the brand guidelines:
- **Primary Color:** #3498db
- **Secondary Color:** #2ecc71
- **Accent Colors:** #e74c3c, #9b59b6, #f1c40f
- **Neutral Colors:** Add greys, whites, and blacks for backgrounds and borders.
- **Accessibility:** Ensure color contrast meets accessibility standards (WCAG).

### 3. Create Typography Styles
Define text styles for the app:
- **Headings:** 
  - H1 (32px)
  - H2 (24px)
  - H3 (20px)
- **Font Family:** Roboto, sans-serif
- **Font Sizes:** 
  - 12px
  - 14px
  - 16px
  - 18px
  - 24px
  - 32px

### 4. Design Button Components
Design the following button states:
- Default
- Hover
- Active
- Disabled

Ensure all buttons are:
- **Responsive:** Scalable across device sizes.
- **Accessible:** Incorporate clear focus states for keyboard navigation.

### 5. Create Form Elements
Design essential form components:
- Input Fields (default, focused, error)
- Dropdowns (expanded, collapsed)
- Checkboxes and Radio Buttons (checked, unchecked, disabled)
- Submit Buttons (loading, error)

---

## Additional Notes
- Test designs for usability and accessibility before finalizing.

最佳实践和提示

  • 定义明确的目标:确保每个计划都以明确的目标开始。
  • 使用可重用模板:创建可以针对不同项目自定义的通用模板。
  • 文档假设:添加注释或注释来解释占位符和结构。
  • 测试小更改:验证 plan.md 文件中的每个更改以确保正确渲染。

结论
plan.md 文件是一个多功能工具,用于指导 goose 的执行以实现您的目标。通过结合明确的目标、结构化的步骤和动态 jinja 模板,您可以创建可重用且高度可定制的计划。无论您是要改进移动应用程序的用户体验还是处理复杂的项目,plan.md 都可以帮助您为 goose 提供清晰度、适应性和精确性。

以上就是How to Create Custom Plans with “planmd” in Goose的详细内容,更多请关注php中文网其它相关文章!