wireframer

wireframer

目录占位条目 — 完整技能：agilek/wireframer-skill

决策树

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

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

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

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

   全局：

   npx skills add agilek/wireframer-skill --skill wireframer -g -y
   

   项目：

   npx skills add agilek/wireframer-skill --skill wireframer -y
   

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

Claude Code 插件方式：

/plugin marketplace add agilek/wireframer-skill
/plugin install wireframes-designer@wireframer

注意事项

• 要求： 有权编辑项目的 agents.md、CLAUDE.md 或 .cursorrules（首次使用时，技能会将其样式规则追加到其中，或在不存在时创建 agents.md）；可访问网络，以便加载生成的原型所需的 Google Fonts、wired-elements 和 react-doodle-icons
• 许可证： 仓库中没有 LICENSE 文件

安装后调用

• 技能名称：wireframer
• 触发短语："wireframe"、"low fidelity"、"lo-fi mockup"、"UI structure"

功能介绍

根据简单描述生成可点击的 Balsamiq 风格原型：一个单页应用（使用原生 HTML/JS 或 React），采用严格的灰度样式、手绘风格的 wired-elements 组件、涂鸦图标和粗略线条边框，并使用真实文案而非 lorem ipsum。它会在做出任何视觉设计决策之前，先确立布局、内容层级和导航，从而迫使设计以内容为先，避免过早地纠结像素细节。请在使用 impeccable 或 ui-craft 等设计技能之前使用它。

需要注意的副作用： 首次在项目中使用时，该技能会将样式规则写入 AI 指令文件（追加到现有的 agents.md、CLAUDE.md、.cursorrules 等文件，或创建 agents.md），并告知你已完成此操作。如果不希望如此，请检查差异。