Token导航 LogoToken导航TokenDH.com
中转站排行榜
前端设计external-servicegithub未标认证来源可访问许可证需确认审计通过

aile-pencil-design（艾尔铅笔设计）

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

494

周安装

21

GitHub Stars

公开资料未说明

下载量

173
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：aile-pencil-design（艾尔铅笔设计）
来源仓库：https://github.com/zhucl1006/ailesuperpowers
仓库路径：skills/aile-pencil-design
安装命令：
npx skills add https://github.com/zhucl1006/ailesuperpowers --skill aile-pencil-design
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills
npx skills add https://github.com/zhucl1006/ailesuperpowers --skill aile-pencil-design

简介

产出可审查、可执行的 UI 设计产物并嵌入状态矩阵说明。

  • 适用于新增页面或交互变更时的视觉规范与组件层级定义。
  • 采用 MCP-first 方式将设计描述转化为具体实现约束条件。
  • 若无 UI 变化必须明确标注原因并在 analysis.md 中记录。
  • aile-pencil-design 属于前端设计类 Skill，可作为该场景下的辅助能力补充。

SKILL.md

Aile：Pencil 设计（aile-pencil-design）

概述

当 Story 涉及 UI/交互变更时，本技能用于阶段 2 产出可审查、可执行、可回溯的设计产物：

  • docs/plans/{Story-Key}/design.pen（推荐）
  • 在 docs/plans/{Story-Key}/analysis.md 回填 UI 设计章节与证据
  • 若不产出 .pen，必须明确写出“本 Story 无 UI 设计”及原因

本技能采用 MCP-first 方式，核心目标是把“设计描述”升级为“设计执行规范 + 证据化门禁”。

来源原 Skill

  • 来源：superpowers 原始需求分析与计划能力（已迁移为 aile-only）
  • 策略：保留原 Skill 作为基线与回退路径，本 Skill 复制改写并强化 Pencil MCP 执行规范。

何时使用 / 何时跳过

使用场景

  • Story 新增页面、弹窗、关键交互流程
  • 现有页面布局、状态展示、交互反馈发生变化
  • 需求明确要求提供设计稿/画布/原型

跳过场景

  • 纯后端、数据处理、脚本、配置调整且无可见 UI 变化
跳过时必须在 analysis.md 写明：本 Story 无 UI 设计，并给出理由。

输入契约（先定义再作图）

在开始 MCP 操作前，先固化以下输入：

  1. 页面/模块边界：本次改动影响哪些页面或弹层
  2. 状态矩阵：正常 / 空 / 加载 / 异常（必要时加权限态）
  3. 交互路径：入口、主流程、失败回路、返回路径
  4. 复用策略：优先复用现有组件，缺失时再新增

输出契约（必须遵守）

  • 产物目录：docs/plans/{Story-Key}/
  • 设计文件：design.pen（有 UI 变更时必需）
  • analysis.md 的 UI 章节必须包含：

- 页面结构 - 核心交互流程 - 状态设计（正常/空/加载/异常） - 与 PM UI 示意对照说明 - 关键截图与布局检查结论

执行流程（MCP-first）

Step 0：Pencil MCP 可执行性预检

执行前必须确认：

  1. Pencil 已启动（桌面端或编辑器扩展）
  2. MCP 已连接且工具可用
  3. 目标文件位于项目工作区
  4. 已约定保存策略（关键批次后手动保存）

若预检失败：

  • 在 analysis.md 标记 UI 设计阻塞
  • 记录阻塞原因、影响范围、恢复条件
  • 输出最小线框说明和状态清单，待 MCP 恢复后补齐 design.pen

Step 1：初始化设计上下文

按顺序调用最小工具链：

  1. open_document
  2. get_editor_state
  3. get_guidelines（按场景选择）
  4. batch_get（一次性检索可复用组件）
  5. get_variables（缺失时再 set_variables 补齐最小 token）

Step 2：分批构图（结构优先）

  • 每次 batch_design 控制在 <=25 操作
  • 先骨架后细节：布局框架 → 组件实例 → 文案与状态 → 视觉微调
  • 推荐批次：

- 批次 A：发现与复用 - 批次 B：骨架搭建 - 批次 C：核心状态（正常/空/加载/异常） - 批次 D：失败回路与返回路径

Step 3：每批质量门禁（硬性）

每一批都必须完成以下检查后再进入下一批：

  1. snapshot_layout（problemsOnly=true）检查重叠/裁剪/越界
  2. snapshot_layout（常规）复核结构
  3. get_screenshot 抽样关键节点截图（至少主流程 + 异常态）

未通过则立即修正，不允许带问题进入下一批。

Step 4：回填计划文档

在 analysis.md 的 UI 小节回填：

  • .pen 文件路径
  • 状态覆盖清单（正常/空/加载/异常）
  • 交互路径覆盖（入口、主流程、失败回路、返回路径）
  • 遗留风险与后续动作

Step 5：准备 G2 审查材料

PR 中至少包含：

  • analysis.md
  • design.pen（如有 UI 变更）
  • docs-templates/g2-design-review-checklist.md 对应自检结果

失败兜底与恢复策略

  1. MCP 不可用：标记阻塞并降级为线框说明，不得跳过 UI 章节
  2. 权限/连接异常：先检查 Pencil 是否运行、MCP 是否可见、工作区权限是否正确
  3. 保存风险：关键批次后立刻手动保存并落 Git 版本

UI Definition of Done（DoD）

满足以下条件才允许进入开发阶段：

  • 已产出并保存 design.pen，或明确“本 Story 无 UI 设计”
  • 状态矩阵至少覆盖正常/空/加载/异常四态
  • 主流程与失败回路均有可见反馈
  • snapshot_layout 与 get_screenshot 验收通过
  • analysis.md 的 UI 章节已完整回填

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

35.06%
按下载量换算61

Claude

27.58%
按下载量换算48

Cursor

20.86%
按下载量换算36

Gemini CLI

8.78%
按下载量换算15

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

external-service

该 Skill 可能调用第三方服务、云服务或外部模型 API，使用前需要确认账号、额度、数据发送范围和服务条款。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/zhucl1006/ailesuperpowers

SKILL.md 来源

github.com

/zhucl1006/ailesuperpowers/tree/main/skills/aile-pencil-design

skills-sh

skills.sh

/zhucl1006/ailesuperpowers/aile-pencil-design

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

aigc-director（澳大利亚国际投资委员会主任）

aigc-director 用于补充前端设计相关能力，适合在 Local Agent 中需要让 Agent 承接前端设计相关任务时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

aiogram-framework（aiogram 框架）

aiogram-framework 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。