tui-prd-to-descriptions

PRD interface → multi-format description

Convert the interface/screen descriptions in the PRD into three deliverables for document supplementation and for use by the downstream stitch-skills and pencil-skills. This skillonly produces descriptive textand does not invoke Stitch MCP or Pencil MCP.

When to use

• The user provides a PRD document or PRD interface section and needs to simultaneously obtain: an ASCII interface (to supplement the PRD), a Stitch-recognizable prompt, and a Pencil-executable plan.
• The output structure of "PRD interface → multi-format" needs to be clarified to facilitate integration with the stitch-skills and pencil-skills pipelines.

Input

• PRD document or interface-related paragraphs in the PRD: feature overview, page/screen list, interface descriptions in detailed functional requirements, and visual/theme preferences in non-functional requirements.
• Optional: target framework or design description summary (such as uView Pro, Element Plus), used to generate more fitting Stitch and Pencil descriptions.

Output (three kinds of blocks, all must be produced)

1. TUI_RENDER (ASCII interface)

• Interface sketches drawn with monospaced characters, may have multiple screens, and each screen may be labeled with a name (such as "Login Page" or "Home Page").
• Purpose: supplement the PRD's "interface prototype association" or appendix; does not drive Stitch/Pencil execution.
• Conventions: no TAB; each line has the same width (such as widthCols=70).

2. STITCH_PROMPT (Stitch-executable description)

• Segmented structure, compatible with stitch-skills' prd-to-stitch-workflow :[Context]、[Layout]、[Components]、[Content]。
• Can be used directly or after minor adjustments as the generate_screen_from_text prompt, or as input to stitch-ui-prompt-architect.
• Downstream: consumed by stitch-skills and executes Stitch MCP; this skill does not invoke it.

3. PENCIL_PLAN or PENCIL_BATCH_DESIGN (Pencil-executable description)

• PENCIL_PLAN: a sequence of steps, each step containing the tool name (such as mcp__pencil__open_document、mcp__pencil__batch_design), intent, and key parameters; consistent with the output format of pencil-skills' pencil-ui-design-spec-generator.
• PENCIL_BATCH_DESIGN: can be used directly for Pencil MCP batch_design operations (each batch ≤25 operations).
• Downstream: executed step by step by pencil-skills or an Agent via Pencil MCP; this skill does not invoke it.

Logical rules

1. Parse the PRD: extract the page/screen list, the functions and main components of each screen, interaction points, and visual/theme preferences.
2. ASCII: generate wireframe-style ASCII by screen or by region, maintaining monospacing and readability.
3. Stitch description: generate segmented Stitch prompts by screen, including device type, layout, components, and content descriptions, so that stitch-skills can use them directly.
4. Pencil description: generate PENCIL_PLAN or PENCIL_BATCH_DESIGN fragments according to the "subsequent interface design" requirements, consistent with the PENCIL_PLAN format of pencil-skills.

Boundaries (no capability crossover)

• Do not invoke Stitch MCP or Pencil MCP.
• Actual drawing by Stitch is completed by stitch-skills ; actual drawing by Pencil is completed by pencil-skills . This skill only produces descriptive language.

References

• Boundaries and the three output formats:docs/boundary-and-outputs.md
• PRD interface → multi-format conventions:docs/prd-interface-to-multi-format.md
• Component vocabulary: this library's tui-* Component skills (tui-button, tui-input, etc.) can reference their semantics and specifications when composing interfaces.

Common Pitfalls (Gotchas)

1. Version Compatibility: Pay attention to compatibility between framework versions and dependency libraries; APIs may differ across versions
2. Configuration File Format: Configuration file format errors are the most common problem; it is recommended to use your editor's syntax checking
3. Environment Variables: Ensure all necessary environment variables are set correctly, and do not hardcode sensitive information
4. Dependency Conflicts: When multiple versions coexist, watch out for dependency conflicts, and use a lock file to lock versions
5. Performance Pitfalls: Pay attention to performance optimization in large-data scenarios, and avoid common problems such as N+1 queries

Usage Workflow

Step 1: Environment Preparation

Ensure the development environment has the necessary dependencies and tools installed.

Step 2: Configuration Initialization

Perform basic configuration according to project requirements.

Step 3: Using Core Features

Implement core functionality according to the example code.

Step 4: Test Verification

Run tests to ensure the functionality works properly.

Step 5: Deployment and Launch

After completing development, proceed with deployment and monitoring.