
一种将项目规划转化为可视化、交互式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
推荐工具
换一个关键词,或者移除筛选条件。
安装
npx skillfish add jnemargut/better-plan-mode