JB

jnemargut/better-plan-mode

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

55 stars 质量 52 趋势 13MIT

一种将项目规划转化为可视化、交互式HTML决策文档的AI编码技能

概览

一项AI编码技能,将项目规划转化为可视化、互动的决策体验。你不再是快速的是/否提示,而是丰富的HTML文档,包含并排选项、可视化预览、比较表和持久决策历史。 当你开始一个新项目或新功能时,“更好计划模式”会一步步引导你完成每一个有意义的决策,内容包括: - 提供清晰的推荐和通俗易懂的英文解释——设计决策时的UI渲染模型,交互决策的流程图,导航决策的网站地图,技术决策的架构图——展示相关维度上的选项分布——保存为HTML文件,随时可重访——一目了然显示所有决策并带状态追踪 技能是一个单 SKILL.md 文件。把它放到你AI编程工具的正确目录里。 光标使用.mdc规则文件代替技能目录。将技能内容复制到规则中: 然后打开 。

概述(AI 翻译)

一项AI编码技能,将项目规划转化为可视化、互动的决策体验。你不再是快速的是/否提示,而是丰富的HTML文档,包含并排选项、可视化预览、比较表和持久决策历史。

它的作用

当你开始一个新项目或新功能时,“更好计划模式”会一步步引导你完成每一个有意义的决策,内容包括:

  • 每个决定有4个选项,附有清晰推荐和通俗易懂的英文解释
  • 可视化预览——用于设计决策的渲染UI模型,用于交互决策的流程图,用于导航决策的网站地图,用于技术决策的架构图
  • 比较表显示选项在相关维度上的表现
  • 决策历史保存为HTML文件,随时可重新访问
  • 一个着陆页面,一目了然地展示所有决策并带状态追踪

决策类别

分类 涵盖内容 视觉预览
技术层面技术栈、数据库、认证、托管、API设计 架构图、代码样本

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

Better Plan Mode

An AI coding skill that transforms project planning into a visual, interactive decision-making experience. Instead of quick yes/no prompts, you get rich HTML documents with side-by-side options, visual previews, comparison tables, and a persistent decision history.

What It Does

When you’re starting a new project or feature, Better Plan Mode walks you through every meaningful decision, one at a time, with:

  • 4 options per decision with a clear recommendation and plain English explanations
  • Visual previews – rendered UI mockups for design decisions, flow diagrams for interaction decisions, sitemaps for navigation decisions, architecture diagrams for technical decisions
  • Comparison tables showing how options stack up across relevant dimensions
  • A decision history saved as HTML files you can revisit anytime
  • A landing page showing all decisions at a glance with status tracking

Decision Categories

Category What It Covers Visual Preview
Technical Tech stack, database, auth, hosting, API design Architecture diagrams, code samples
Visual/UX Style direction, color, typography, component design Rendered HTML/CSS mockups
Interaction User flows, onboarding, how key actions work Step-by-step flow diagrams
Information Architecture Navigation, content hierarchy, page structure Mini sitemaps, nav visualizations

Install

The skill is a single SKILL.md file. Drop it into the right directory for your AI coding tool.

Claude Code:

git clone https://github.com/jnemargut/better-plan-mode ~/.claude/skills/better-plan-mode

Codex:

git clone https://github.com/jnemargut/better-plan-mode ~/.codex/skills/better-plan-mode

Gemini CLI:

git clone https://github.com/jnemargut/better-plan-mode ~/.gemini/skills/better-plan-mode

Cursor:

Cursor uses .mdc rule files instead of a skills directory. Copy the skill content into a rule:

mkdir -p .cursor/rules
cp SKILL.md .cursor/rules/better-plan-mode.mdc

Then open .cursor/rules/better-plan-mode.mdc and replace the frontmatter with:

---
description: "Enhanced planning mode that presents decision points as rich HTML documents with visual previews, comparison tables, and recommendations."
alwaysApply: false
---

The skill should work with any AI coding tool that supports custom instructions or skill files. If yours uses a different directory, just put SKILL.md wherever your tool looks for skills or prompts.

Usage

Invoke the skill with:

/better-plan-mode I want to build a neighborhood book-sharing app where people can list books, browse nearby, and request to borrow

Or any project description:

/better-plan-mode A dashboard for tracking my fitness goals with charts and social features

During Planning

在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add jnemargut/better-plan-mode
新手?先看 mcpskill.org 教程 →