mcpField
D
design-with-claude

design-with-claude

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

关于 design-with-claude

design-with-claude 将确定性设计审计与基于 Markdown 的专项技能结合，供评估视觉界面的团队使用。它扫描八类问题并生成报告，供后续按优先级修复。

主要功能

  1. 01扫描八类设计问题
  2. 02检查 WCAG 对比度和标记启发式
  3. 03生成可分享的审计报告
  4. 04使用专项斜杠命令
  5. 05按优先级梳理问题

适用场景

  1. 01修改前审计设计系统
  2. 02在 CI 中运行设计检查
  3. 03依据审计报告排列修复顺序

安装

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

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

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

附带文件stub.yaml

详细介绍

design-with-claude

完整软件包：imsaif/design-with-claude（MIT）

决策树

  1. 是否已安装该软件包？ 检查 Agent 的技能目录中是否有 design-with-claude。

    • 是 → 调用并继续
    • 否 → 前往第 2 步

  2. 使用哪种 Agent？

    • 任意 Agent（Claude Code、Cursor、Cline、Gemini CLI、Antigravity，……）→ npx skills add imsaif/design-with-claude
    • 改用 Claude Code 插件 → /plugin marketplace add imsaif/design-with-claude

  3. 只想运行审计，不安装？ npx dwic-audit 无需安装，也无需令牌。

安装命令

npx skills add imsaif/design-with-claude

安装后调用

  • 技能名称：design-with-claude
  • 触发短语："design with claude"、"audit my design system"、"WCAG contrast audit"、"dashboard design"、"b2b SaaS design"

功能

包含两个相辅相成的部分。

测量。 npx dwic-audit 会对 8 个类别进行确定性静态扫描——颜色、排版、间距、无障碍、表单、导航、动效、文案。它会进行 WCAG 对比度计算、令牌解析和标记语言启发式分析，不运行大模型。它会输出一个仪表板，写入可分享的 .dwic/audit-<date>.md，并在出现错误时以非零状态码退出，因此可用于 CI。不会有任何内容离开本机。

修复。 设计专家以斜杠命令的形式提供，每个专家都是纯 Markdown 编写的领域专家，没有运行时依赖。审计类别与专家相对应（对比度问题 → /color-specialist，未标注的输入框 → /form-designer，等等）；/design-triage 会读取审计报告，并按优先级处理问题。如果问题涉及多个领域，/design-brief 会根据自然语言说明进行分流。

当请求较为含糊时（"改进我们的设计"、"这个设计怎么样？"），请使用它——先进行测量，再调用审计结果所指向的专家，而不是凭空猜测。

不适用场景

  • 不涉及设计的非视觉工作
  • 你已经知道如何完成的一行 CSS 修改
  • 已安装的单个专用技能就足以满足需求时——避免为了偶尔的需求安装整套工具

评论

支持 Markdown