# Tui Prd To Descriptions

> From PRD interface/screen descriptions, output ASCII UI (for PRD supplement), Stitch-executable prompt (for stitch-skills), and Pencil-executable plan (for pencil-skills). Does not call Stitch or Pencil MCP.

- Skill: `full-stack-skills/tui-prd-to-descriptions` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add full-stack-skills/tui-prd-to-descriptions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/full-stack-skills/tui-prd-to-descriptions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: full-stack-skills (https://skillmd.com/u/full-stack-skills)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/full-stack-skills/tui-prd-to-descriptions

---


# PRD 界面 → 多格式描述

将 **PRD 中的界面/屏幕描述** 转化为三种可交付物，供文档补充与下游 stitch-skills、pencil-skills 使用。本技能**只产出描述文本**，不调用 Stitch MCP 或 Pencil MCP。

## 何时使用

- 用户提供 PRD 文档或 PRD 界面章节，需要同时得到：ASCII 界面（补充 PRD）、Stitch 可识别的提示词、Pencil 可执行计划。
- 需要明确「PRD 界面 → 多格式」的产出结构，便于与 stitch-skills、pencil-skills 流水线衔接。

## 输入

- **PRD 文档** 或 **PRD 中的界面相关段落**：功能概述、页面/屏幕列表、详细功能需求中的界面说明、非功能需求中的视觉/主题偏好。
- 可选：目标框架或设计说明摘要（如 uView Pro、Element Plus），用于生成更贴合的 Stitch 与 Pencil 描述。

## 输出（三种块，均需产出）

### 1. TUI_RENDER（ASCII 界面）

- 等宽字符绘制的界面示意，可多屏，每屏可标注名称（如「登录页」「首页」）。
- 用途：补充 PRD 的「界面原型关联」或附录；不驱动 Stitch/Pencil 执行。
- 约定：无 TAB；每行宽度一致（如 widthCols=70）。

### 2. STITCH_PROMPT（Stitch 可执行描述）

- 分段结构，与 stitch-skills 的 [prd-to-stitch-workflow](https://github.com/partme-ai/stitch-skills/blob/main/docs/prd-to-stitch-workflow.md) 兼容：`[Context]`、`[Layout]`、`[Components]`、`[Content]`。
- 可直接或经微调后作为 `generate_screen_from_text` 的 prompt，或作为 stitch-ui-prompt-architect 的输入。
- 下游：由 **stitch-skills** 消费并执行 Stitch MCP；本技能不调用。

### 3. PENCIL_PLAN 或 PENCIL_BATCH_DESIGN（Pencil 可执行描述）

- **PENCIL_PLAN**：步骤序列，每步含工具名（如 `mcp__pencil__open_document`、`mcp__pencil__batch_design`）、意图、关键参数；与 pencil-skills 的 pencil-ui-design-spec-generator 输出格式一致。
- **PENCIL_BATCH_DESIGN**：可直接用于 Pencil MCP `batch_design` 的 operations（每批 ≤25 操作）。
- 下游：由 **pencil-skills** 或 Agent 按步执行 Pencil MCP；本技能不调用。

## 逻辑规则

1. **解析 PRD**：提取页面/屏幕列表、每屏功能与主要组件、交互要点、视觉/主题偏好。
2. **ASCII**：按屏或按区域生成线框式 ASCII，保持等宽与可读性。
3. **Stitch 描述**：按屏生成 Stitch 分段提示，包含设备类型、布局、组件与内容描述，便于 stitch-skills 直接使用。
4. **Pencil 描述**：按「后续界面设计」需求生成 PENCIL_PLAN 或 PENCIL_BATCH_DESIGN 片段，与 pencil-skills 的 PENCIL_PLAN 格式一致。

## 边界（无能力交叉）

- **不调用** Stitch MCP 或 Pencil MCP。
- Stitch 实际绘制由 **stitch-skills** 完成；Pencil 实际绘制由 **pencil-skills** 完成。本技能仅产出描述语言。

## 参考

- 边界与三种输出格式：[`docs/boundary-and-outputs.md`](https://github.com/full-stack-skills/t2ui-skills/blob/main/docs/boundary-and-outputs.md)
- PRD 界面→多格式约定：[`docs/prd-interface-to-multi-format.md`](https://github.com/full-stack-skills/t2ui-skills/blob/main/docs/prd-interface-to-multi-format.md)
- 组件词汇表：本库 `tui-*` 组件技能（tui-button、tui-input 等）可在组合界面时引用其语义与规范。

## 常见陷阱 (Gotchas)

1. **版本兼容性**：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. **配置文件格式**：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. **环境变量**：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. **依赖冲突**：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. **性能陷阱**：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

## 使用流程

### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。

### Step 2: 配置初始化
根据项目需求进行基础配置。

### Step 3: 核心功能使用
按照示例代码实现核心功能。

### Step 4: 测试验证
运行测试确保功能正常。

### Step 5: 部署上线
完成开发后进行部署和监控。