mcpField
D
design-lab

design-lab

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

关于 design-lab

design-lab 是用于现有 Web 项目的 UI 设计探索技能。它生成可运行的组件方案供浏览器比较，并根据反馈迭代，最终形成确认的设计方向和实施计划。

主要功能

  1. 01设计访谈并推断设计系统
  2. 02生成不同的 UI 组件方案
  3. 03在浏览器中并排比较方案
  4. 04针对界面元素提供反馈
  5. 05迭代设计并生成实施计划
  6. 06清理临时设计文件

适用场景

  1. 01探索 Web 组件的不同设计方案
  2. 02在实施前比较 UI 方向
  3. 03根据浏览器反馈迭代设计

安装

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

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

安装后在 Claude Code 中输入/design-lab确认已加载。

附带文件stub.yaml

详细介绍

design-lab

目录占位项 — 完整技能：0xdesign/design-plugin

决策树

  1. 是否已安装完整技能？

    • 全局：f=~/.agents/skills/design-lab/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/design-lab/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已作为 design-lab 安装，调用它并继续
    • pointer → 转到第 2 步

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

    [ -e ~/.agents/skills/design-lab ] && echo "global" || echo "project"

    全局：

    npx skills add 0xdesign/design-plugin --skill design-lab -g -y

    项目：

    npx skills add 0xdesign/design-plugin --skill design-lab -y

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

Claude Code 插件方式：

/plugin marketplace add 0xdesign/design-plugin
/plugin install design-and-refine@design-plugins

注意事项

  • 要求： 一个正在运行开发服务器的 Web 项目（这些变体会在浏览器中预览）
  • 许可证： 上游仓库中没有 LICENSE 文件

安装后调用

  • 技能名称：design-lab
  • 触发短语："design lab"、"design exploration"、"design variants"、"iterative design"
  • 仅适用于插件方式：/design-and-refine:start 命令（可选提供组件名称）

功能

在用户自己的代码库中运行交互式设计探索会话。它会先进行简短的设计访谈并推断现有设计系统，然后在临时的 design-lab 路由中生成若干不同的 UI 变体，作为真正可运行的组件。你可以在浏览器中并排比较这些变体，通过覆盖层提供元素级反馈，技能会综合反馈生成改进版本，并反复迭代，直到确认设计方向。最后，它会生成实施计划并删除临时文件。

该技能的文本依赖一个 FeedbackOverlay 模板，该模板位于技能目录之外的插件 templates 文件夹中。npx 安装只会复制技能，因此 Agent 会根据技能描述重新创建覆盖层；如需获得上游预期的完整设置，请使用上文的 Claude Code 插件方式。

不适用场景

  • 只需进行一轮设计，不需要比较和迭代 → 使用 design-consultation 或 plan-design-review
  • 润色或清理现有界面 → 使用 baseline-ui
  • 在代码库之外生成和迭代视觉设计 → 使用 design-catalogue 选择设计生成技能

评论

支持 Markdown