Back to Details

product-prototype-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Product Prototype Design

产品原型设计

Purpose

设计目标

Turn business requirements or existing prototype material into consistent, implementation-guiding product prototype pages for enterprise backend systems.
This skill is optimized for:
  • Pencil MCP 
    .pen
    generation
  • admin CRUD pages
  • page-state prototype systems
  • Element Plus-style information architecture
  • traditional admin-console visual shells
  • business-logic-aware prototype review
Default desktop canvas:
  • 1920 x 1080
将业务需求或现有原型素材转化为一致、可指导开发的企业后台系统产品原型页面。
本技能针对以下场景优化：
  • Pencil MCP .pen文件生成
  • 后台CRUD页面
  • 页面状态原型系统
  • Element Plus风格信息架构
  • 传统后台管理控制台视觉框架
  • 可识别业务逻辑的原型评审
默认桌面画布尺寸：
  • 1920 x 1080

Core Rules

核心规则

1. Default to Element Plus

1. 默认采用Element Plus风格

Unless the user explicitly overrides the design system:
  • use Element Plus visual language
  • use Element Plus component semantics
  • use enterprise admin density, spacing, and hierarchy
  • default to a traditional backend-management-system look, not a marketing-style or dashboard-hero look
  • do not ask again for style reference when the request is a normal admin prototype
  • use Element Plus to keep visible component styling consistent, not just to choose structure
  • if a reference 
    .pen
    is provided, extract layout structure, information hierarchy, note format, and content organization from it
  • do not blindly inherit a reference 
    .pen
    color palette or typography if it conflicts with Element Plus defaults
Read:
  • ./references/element-plus-components-full.md
  • ./references/element-plus-prototype-mapping.md
  • ./references/element-plus-layout-rules.md
  • ./references/reference-pen-patterns.md
  • ./references/traditional-admin-visual-tokens.md
  • ./references/traditional-admin-shell-rules.md
  • ./references/traditional-admin-checklist.md
除非用户明确指定其他设计系统：
  • 使用Element Plus视觉语言
  • 遵循Element Plus组件语义
  • 采用企业后台管理的信息密度、间距和层级结构
  • 默认使用传统后台管理系统外观，而非营销风格或仪表盘英雄区样式
  • 当需求为常规后台原型时，无需再次询问风格参考
  • 使用Element Plus保证可见组件样式一致，而非仅选择结构
  • 若提供参考.pen文件，从中提取布局结构、信息层级、备注格式和内容组织方式
  • 若参考.pen文件的调色板或排版与Element Plus默认样式冲突，请勿盲目继承
参考文档：
  • ./references/element-plus-components-full.md
  • ./references/element-plus-prototype-mapping.md
  • ./references/element-plus-layout-rules.md
  • ./references/reference-pen-patterns.md
  • ./references/traditional-admin-visual-tokens.md
  • ./references/traditional-admin-shell-rules.md
  • ./references/traditional-admin-checklist.md

2. Use page-state modeling for CRUD

2. 为CRUD操作使用页面状态建模

For backend CRUD pages, generate these state pages separately:
  1. 查询页
  2. 新增页
  3. 修改页
  4. 删除页
针对后台CRUD页面，需分别生成以下状态页面：
  1. 查询页
  2. 新增页
  3. 修改页
  4. 删除页

3. Query page is the base page

3. 查询页为基础页面

The query page is the canonical base.
  • build the query page first
  • verify it first
  • copy it into add/edit/delete state pages
Do not generate four unrelated pages independently.
查询页是标准化的基础页面：
  • 优先构建查询页
  • 优先校验查询页
  • 将查询页复制到新增/编辑/删除状态页面中进行修改
请勿独立生成四个互不相关的页面。

4. Add/Edit are overlays, not rebuilt pages

4. 新增/编辑页面采用遮罩层，而非重新构建页面

For 新增页 and 修改页:
  • keep the query-page base layout unchanged
  • add a full-page mask
  • add a right drawer above the mask
  • do not change sidebar, header, filter area, or list layout
针对新增页和修改页：
  • 保留查询页的基础布局不变
  • 添加全屏遮罩
  • 在遮罩上方添加右侧抽屉
  • 请勿修改侧边栏、页眉、筛选区域或列表布局

5. Delete is a confirmation state

5. 删除页为确认状态

For 删除页:
  • keep the query-page base layout unchanged
  • add a full-page mask
  • add a centered confirmation layer or warning panel
针对删除页：
  • 保留查询页的基础布局不变
  • 添加全屏遮罩
  • 添加居中的确认层或警告面板

6. Tables must be real

6. 表格必须为真实结构

CRUD list pages must use real table structure.
At minimum:
  • toolbar row
  • header row
  • body rows
  • cell frames
  • visible pagination
Never use a single text line to fake a table.
Visible pagination is mandatory for query/list pages.
CRUD列表页面必须使用真实的表格结构，至少包含：
  • 工具栏行
  • 表头行
  • 表体行
  • 单元格框架
  • 可见的分页组件
绝不允许使用单行文本模拟表格。查询/列表页面必须显示分页组件。

7. Query page must occupy the full usable width

7. 查询页必须占满可用宽度

  • do not leave a fake drawer lane on the query page
  • filter card and table module should occupy the full usable right-side content width
  • compute width from main content width minus page-body horizontal padding
  • on 
    1920x1080
    , keep content visually controlled so it does not feel over-stretched
  • keep the shell stable: top nav, left navigation, page title, then the main work area
  • if the reference 
    .pen
    uses denser list-page composition, absorb its structural hierarchy without copying its non-Element visual tokens directly
  • prefer the traditional admin order: top system bar -> left nav -> tabs or breadcrumb strip -> query toolbar -> action buttons -> table -> bottom-right pagination
  • the result should look like a classic operations/admin system, not a stylized SaaS landing page or card-heavy dashboard
  • query conditions should default to 
    text label + input component
    pairs
  • do not render bare search/select/date components without a visible preceding label unless the user explicitly asks for placeholder-only search
  • 查询页右侧请勿预留虚假抽屉栏
  • 筛选卡片和表格模块应占满右侧内容区域的可用宽度
  • 根据主内容宽度减去页面主体水平内边距计算实际宽度
  • 在1920x1080画布上，需保证内容视觉上紧凑，避免过度拉伸
  • 保持框架稳定：顶部导航栏 -> 左侧导航 -> 标签页或面包屑 -> 查询工具栏 -> 操作按钮 -> 表格 -> 右下角分页
  • 若参考.pen文件采用更紧凑的列表页面布局，需吸收其结构层级，但请勿直接复制非Element Plus的视觉标记
  • 优先采用传统后台管理的布局顺序：顶部系统栏 -> 左侧导航 -> 标签页或面包屑条 -> 查询工具栏 -> 操作按钮 -> 表格 -> 右下角分页
  • 最终效果应呈现为经典的运营/后台管理系统，而非风格化的SaaS着陆页或卡片密集型仪表盘
  • 查询条件默认采用「文本标签 + 输入组件」的组合形式
  • 除非用户明确要求仅使用占位符搜索，否则请勿渲染无前置可见标签的搜索/选择/日期组件

8. Business logic belongs in notes

8. 业务逻辑需放在备注中

If a page contains core business rules:
  • add a page-external business note
  • keep it secondary to the primary action flow
  • place it outside the page canvas, typically to the right side
  • use it to explain validation, permissions, status transitions, side effects, and save/delete impact
  • do not move it into the page content area unless the user explicitly asks for that
  • use Pencil 
    note
    as the default annotation component
  • keep the note outside the page frame, not inside the page layout
  • for a single page, place the note in the right-side annotation lane
  • when no better reference exists, follow the reference 
    .pen
    note pattern: page title line + 核心逻辑 + 主操作 + 关键校验
  • prefer compact note blocks around 
    250 x 240
    unless the content genuinely needs more space
  • if existing note content is trivial or placeholder text, ignore it instead of treating it as a rule source
  • do not place page-level instruction text, rule summaries, helper paragraphs, or explanatory description cards inside the page canvas by default
  • keep the page itself focused on layout, controls, data, statuses, and interaction states
  • move all non-essential explanatory text to external 
    note
    nodes
  • only keep labels, placeholders, state text, and business data that are necessary to understand the UI structure
若页面包含核心业务规则：
  • 添加页面外部的业务备注
  • 备注为次要内容，不能影响主操作流程
  • 放置在页面画布外部，通常为右侧区域
  • 用于解释校验规则、权限控制、状态流转、副作用以及保存/删除操作的影响
  • 除非用户明确要求，否则请勿将备注移入页面内容区域
  • 默认使用Pencil的「note」组件作为注释工具
  • 备注需放在页面框架外部，而非页面布局内部
  • 单页面的备注需放在右侧注释栏
  • 若无更合适的参考，需遵循参考.pen文件的备注格式：页面标题行 + 核心逻辑 + 主操作 + 关键校验
  • 备注块默认采用约250x240的紧凑尺寸，除非内容确实需要更大空间
  • 若现有备注内容为无关紧要的占位文本，可忽略，无需作为规则来源
  • 默认请勿在页面画布内放置页面级说明文本、规则摘要、辅助段落或解释性描述卡片
  • 页面本身需聚焦于布局、控件、数据、状态和交互状态
  • 将所有非必要的解释性文本移至外部「note」节点
  • 仅保留理解UI结构所需的标签、占位符、状态文本和业务数据

9. Validation is visual, not assumed

9. 校验需可视化，而非假设

Always validate by screenshot:
  • whole page
  • filter card
  • table card
  • drawer state
  • delete confirmation state
If a page still looks wrong, keep iterating.
始终通过截图进行校验，需覆盖：
  • 整页
  • 筛选卡片
  • 表格卡片
  • 抽屉状态
  • 删除确认状态
若页面视觉效果仍不符合要求，需持续迭代优化。

10. Defaults that should not need repeating in prompts

10. 无需重复提示的默认规则

Unless the user overrides them, assume:
  • Element Plus style
  • traditional admin-console shell
  • compact controls and dense information layout
  • reference 
    .pen
    files contribute structure and copywriting patterns, not mandatory visual tokens
  • query/list pages use real tables
  • query/list pages have visible pagination
  • query pages occupy the full usable width
  • query/list modules keep controlled field widths and balanced spacing
  • generation proceeds iteratively by section
  • output should target the current active editor 
    .pen
    file
  • business logic is explained with a page-external note
除非用户明确覆盖，否则默认采用：
  • Element Plus风格
  • 传统后台管理控制台框架
  • 紧凑控件和高密度信息布局
  • 参考.pen文件仅提供结构和文案模式，而非强制视觉标记
  • 查询/列表页面使用真实表格
  • 查询/列表页面显示可见分页
  • 查询页占满可用宽度
  • 查询/列表模块保持可控的字段宽度和均衡间距
  • 按区域分步迭代生成
  • 输出目标为当前激活的编辑器.pen文件
  • 使用页面外部备注解释业务逻辑

Workflow

工作流程

  1. Read the business request and classify the page type.
  2. Choose the page shell and navigation.
  3. If a reference 
    .pen
    exists, extract reusable page-shell, note, table, drawer-content, and copy patterns from it.
  4. Load the relevant Element Plus references.
  5. Load the traditional admin-shell references and treat them as the default visual-shape constraint.
  6. Reconcile the three layers:
    • structure and hierarchy from the reference 
      .pen
    • visual language and component semantics from Element Plus
    • shell density, control scale, and classic admin appearance from the traditional-admin references
  7. Build the query page first.
  8. Verify:
    • filter structure
    • table structure
    • full-width layout
    • visible pagination
    • traditional admin visual density
  9. Copy the query page into state pages.
  10. Apply overlay states:
  • add/edit: full-page mask + right drawer
  • delete: full-page mask + confirm layer
  1. Add business logic notes.
  2. Screenshot each state page and verify consistency against the traditional-admin checklist.
  1. 读取业务需求并分类页面类型
  2. 选择页面框架和导航结构
  3. 若存在参考.pen文件，从中提取可复用的页面框架、备注、表格、抽屉内容和文案模式
  4. 加载相关Element Plus参考文档
  5. 加载传统后台管理框架参考文档，并将其作为默认视觉形态约束
  6. 整合三层内容：参考.pen文件的结构和层级、Element Plus的视觉语言和组件语义、传统后台管理的框架密度、控件尺寸和经典外观
  7. 优先构建查询页
  8. 校验以下内容：筛选结构、表格结构、全屏布局、可见分页、传统后台管理的视觉密度
  9. 将查询页复制为各状态页面
  10. 应用遮罩状态：新增/编辑页面使用全屏遮罩 + 右侧抽屉；删除页面使用全屏遮罩 + 居中确认层
  11. 添加业务逻辑备注
  12. 对每个状态页面截图，并对照传统后台管理校验清单验证一致性

Required References

必备参考文档

  • ./references/element-plus-components-full.md
  • ./references/element-plus-prototype-mapping.md
  • ./references/element-plus-layout-rules.md
  • ./references/reference-pen-patterns.md
  • ./references/traditional-admin-visual-tokens.md
  • ./references/traditional-admin-shell-rules.md
  • ./references/traditional-admin-checklist.md
  • ./references/crud-state-page-rules.md
  • ./references/pencil-mcp-execution-rules.md
  • ./references/element-plus-components-full.md
  • ./references/element-plus-prototype-mapping.md
  • ./references/element-plus-layout-rules.md
  • ./references/reference-pen-patterns.md
  • ./references/traditional-admin-visual-tokens.md
  • ./references/traditional-admin-shell-rules.md
  • ./references/traditional-admin-checklist.md
  • ./references/crud-state-page-rules.md
  • ./references/pencil-mcp-execution-rules.md

Quality Bar

质量标准

The result is acceptable only if:
  • query page is complete and independently reviewable
  • add/edit states preserve the query-page base layout
  • overlay mask covers the full page
  • drawer is topmost
  • table is structurally real
  • pagination is visibly present
  • no unnecessary right-side whitespace remains on the query page
  • business logic notes explain key behavior
  • reference 
    .pen
    structure cues are absorbed where useful, without overriding the Element Plus visual baseline
  • the page reads visually as a traditional backend management system without requiring extra prompt correction
  • explanatory descriptions are not embedded inside the page canvas unless the user explicitly asks for them
仅当满足以下所有条件时，结果才符合要求：
  • 查询页完整且可独立评审
  • 新增/编辑状态保留查询页的基础布局
  • 遮罩层覆盖整页
  • 抽屉组件位于最上层
  • 表格为真实结构
  • 分页组件可见
  • 查询页右侧无多余空白
  • 业务逻辑备注解释了关键行为
  • 参考.pen文件的结构提示已被合理吸收，且未覆盖Element Plus视觉基线
  • 页面视觉上呈现为传统后台管理系统，无需额外提示修正
  • 解释性描述未嵌入页面画布内（除非用户明确要求）

Prompt Shortcuts

快捷提示词

In normal use, the user should only need one of these:
Minimal page:
text
Use the product-prototype-design skill to generate a [业务页面名称] backend prototype.
CRUD page:
text
Use the product-prototype-design skill to generate a [业务对象] management prototype with query/add/edit/delete states.
Strong-constraint version:
text
Use the product-prototype-design skill to generate a [业务对象] backend CRUD prototype.
Default to a traditional admin-console shell.
Use Element Plus semantics.
Generate 查询页、新增页、修改页、删除页.
Use the query page as the base.
Add/edit must use full-page mask + right drawer.
Delete must use full-page mask + centered confirmation.
Use a real table and visible pagination.
Place business logic in page-external notes.
Canvas size 1920x1080.
These should already be implied and should not require repetition unless the user wants to override them:
  • traditional backend-management shell
  • Element Plus semantics
  • real table
  • visible pagination
  • query page as base page
  • add/edit right drawer overlays
  • page-external business note
  • 1920 x 1080
    canvas
常规使用时，用户只需提供以下任一提示词即可：
极简页面生成：
text
使用product-prototype-design技能生成[业务页面名称]后台原型。
CRUD页面生成：
text
使用product-prototype-design技能生成包含查询/新增/编辑/删除状态的[业务对象]管理原型。
强约束版本：
text
使用product-prototype-design技能生成[业务对象]后台CRUD原型。
默认采用传统后台管理控制台框架。
使用Element Plus组件语义。
生成查询页、新增页、修改页、删除页。
以查询页为基础页面。
新增/编辑页面必须使用全屏遮罩 + 右侧抽屉。
删除页面必须使用全屏遮罩 + 居中确认层。
使用真实表格和可见分页。
业务逻辑放在页面外部备注中。
画布尺寸1920x1080。
以下规则已默认包含，无需重复提示（除非用户需要覆盖）：
  • 传统后台管理框架
  • Element Plus组件语义
  • 真实表格
  • 可见分页
  • 查询页为基础页面
  • 新增/编辑页面采用右侧抽屉遮罩
  • 页面外部业务备注
  • 1920 x 1080画布尺寸