SuperAPI AI Directory
Partner中文AI newsFavorites
Skillstui-prd-to-descriptions

tui-prd-to-descriptions

Design & creation

View repository

Updated 10-16 03:15

About this skill

PRD Interface → Multi-format Description

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

When to Use

  • The user provides a PRD document or PRD interface section and needs to obtain all of the following at once: 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, 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 types of blocks, all must be produced)

1. TUI_RENDER (ASCII interface)

  • Interface mockups drawn with monospaced characters, may have multiple screens, each screen may be labeled with a name (such as "Login Page", "Home Page").
  • Purpose: to supplement the PRD's "interface prototype association" or appendix; does not drive Stitch/Pencil execution.
  • Convention: no TAB; each line has a consistent 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 call 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 call it.

Logic Rules

  1. Parse the PRD: extract the page/screen list, each screen's features and main components, 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, for direct use by stitch-skills.
  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 call Stitch MCP or Pencil MCP.
  • Actual Stitch drawing is completed by stitch-skills ; actual Pencil drawing is completed by pencil-skills . This skill only produces descriptive language.

References