AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Pdlc Ui Design

skill-kanfu-panda-pdlc-skills-pdlc-ui-design · by kanfu-panda

UI/UX 设计

↗ Website ↗ Repository
— No reviews yet
0 installs
11 views
0.0% view→install

Install

$ agentstack add skill-kanfu-panda-pdlc-skills-pdlc-ui-design

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Pdlc Ui Design? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

UI/UX 设计

根据需求文档，生成 UI/UX 设计方案，包含页面布局、交互流程、组件规范。

PDLC 前置检查（必须执行，不可跳过）

  1. 从用户输入中提取功能名称关键词
  2. 在 docs/01_requirements/prd/ 目录下搜索包含该关键词的 PRD 文档
  • 匹配新格式：F--**-prd.md
  • 匹配旧格式：YYYYMMDD-**-prd.md
  • 同时检查文件内容中是否包含该关键词
  1. 未找到 → 输出以下信息后立即停止，不继续执行：

`` ⛔ PDLC 守卫：未找到与「」相关的 PRD 文档。 UI 设计必须基于已有的 PRD。请先运行： 👉 /pdlc-prd ``

  1. 找到 → 提取功能ID（如 F20260326-01），读取该 PRD 内容，继续执行

工作流程

  1. 阅读需求: 阅读找到的 PRD 文档
  2. 分析用户旅程: 梳理核心用户操作路径，绘制用户旅程图
  3. 页面结构设计: 为每个页面输出 ASCII 线框图（Wireframe）
  4. 交互流程设计: 描述页面间跳转逻辑、状态变化
  5. 组件清单: 列出所需的 UI 组件及其属性
  6. 输出设计文档: 在 docs/02_design/ui-ux/ 下创建 UI 设计文档

文档内容

  • 文件名格式: --ui.md（如 F20260326-01-user-auth-ui.md）
  • 若 PRD 为旧格式无功能ID，则使用旧格式 YYYYMMDD--ui.md
  • 文档顶部必须包含 PDLC 追溯头：

```

```

  • 页面列表与层级关系
  • 每个页面的 ASCII 线框图
  • 交互状态说明（加载中、空状态、错误状态、成功状态）
  • 响应式适配方案（如需要）
  • 组件复用清单（标注哪些组件可复用已有组件）

线框图示例格式

┌─────────────────────────────────┐
│  顶部导航栏          [用户头像]  │
├─────────────────────────────────┤
│  侧边栏  │   主内容区域          │
│  ┌─────┐ │   ┌──────────────┐   │
│  │菜单1│ │   │  表格/列表    │   │
│  │菜单2│ │   │              │   │
│  │菜单3│ │   └──────────────┘   │
│  └─────┘ │   [分页器]           │
├─────────────────────────────────┤
│  底部信息栏                      │
└─────────────────────────────────┘

要求

  • 每个页面必须考虑 4 种状态：正常、加载中、空数据、异常
  • 标注交互细节：按钮点击后的反馈、表单校验时机、确认弹窗等
  • 如果是前端应用，同步在 frontend///docs/ 下放一份副本

设计目标: $ARGUMENTS

本命令的 handoff 输出：

✅ UI/UX 设计文档 完成
📦 产出：docs/02_design/ui-ux/--ui.md
👉 下一步：（本次流程结束，无后续）

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in AI & ML