mcpField
C
claude-wireframe-skill

claude-wireframe-skill

github.com/podo设计与 UI29161 次安装1 天前更新
代码仓库

关于 claude-wireframe-skill

claude-wireframe-skill 通过多 Agent 工作流为 UI 问题生成五种不同的 UX 方案，适合设计探索；它会提取代码库中的设计背景，先生成黑白线框，再并行制作彩色变体。

主要功能

  1. 01生成五种 UX 方案
  2. 02扫描代码库设计背景
  3. 03生成黑白线框
  4. 04并行制作彩色变体

适用场景

  1. 01探索 UI 问题的多种方案
  2. 02沿用现有设计系统模式
  3. 03比较稳妥与探索性方向

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill claude-wireframe-skill

安装后在 Claude Code 中输入/claude-wireframe-skill确认已加载。

附带文件stub.yaml

详细介绍

claude-wireframe-skill

目录条目占位内容 — 完整技能：Magdoub/claude-wireframe-skill

决策树

  1. 是否已安装完整技能？ 检查此位置的技能是否仍有 das: 块：

    • 全局：grep -q "^das:" ~/.agents/skills/claude-wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 项目：grep -q "^das:" .agents/skills/claude-wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 没有 das: 块 → 已安装完整技能，调用它并继续
    • 存在 das: 块 → 转到第 2 步

  2. 检测作用范围，然后安装：

    检测作用范围：

    [ -e ~/.agents/skills/claude-wireframe-skill ] && echo "global" || echo "project"

    全局（使用 -g 安装）：

    npx skills add Magdoub/claude-wireframe-skill --skill claude-wireframe-skill -g -y

    项目（不使用 -g 安装）：

    npx skills add Magdoub/claude-wireframe-skill --skill claude-wireframe-skill -y

    Claude Code： 发送以 ! 开头的任一命令作为聊天消息，即可在不离开对话的情况下运行它。

安装后调用

技能名称：claude-wireframe-skill，触发词：“claude-wireframe-skill”、“5 UX approaches”、“exploratory wireframe”、“Magdoub wireframe”

功能

启动多 Agent 线框图工作流，为任意给定的 UI 问题生成 5 种截然不同的 UX 设计方案：1 种安全方案，用于扩展现有设计系统；另外 4 种探索性方案，用于挑战惯例。技能会先扫描代码库，提取持久化的设计上下文（颜色、组件、模式），然后生成黑白线框图，再并行生成彩色方案。当你需要发散思维，而非单一的最佳猜测时，这个技能很有用。

不适用场景

  • 只需要输出单个线框图时 — 改用 wireframe-skill 或 wireframer
  • 绘制 Excalidraw 图表时 — 改用 excalidraw-diagram
  • 想快速一次性获得结果，不想承担并行 Agent 的开销时

评论

支持 Markdown