前言¶

让 Agent 出界面文案或组件说明时，常见结果是「好看但不可落地」：颜色随手写 hex、字号间距各说各话，和海报级编辑风也对不上。团队若已有 Impeccable 一类编辑海报审美（奶油底、焦橙区块、琥珀强调线），更需要一份能直接进代码评审的设计系统说明，而不是每次对话重新描述风格。

下面介绍 SkillHub 上的社区 Skill「完美编辑海报风格设计｜简诗 AI」（坐标 @user_fccf428b/impeccable，当前版本 1.0.1）。它把 Impeccable 的品牌基调、令牌、组件规则与输出结构写进 SKILL.md，由 Agent 按同一套流程生成可实施的设计规范文档。

这是什么¶

一句话定位： 面向 Impeccable 品牌的通用设计系统 Skill，指导 Agent 输出工程与设计可直接使用的规范文本。

来源与分类： 发布者为 SkillHub 用户 user_fccf428b（展示名含「简诗 AI」），来源为 community，分类为 design-media。SkillHub 页面标注 requires_api_key=false，不依赖额外 API Key。

解决的问题： 统一「编辑海报」视觉语言（现代、高对比、温暖自信），并把令牌、无障碍、组件状态、反模式与 QA 清单固化成固定输出结构，减少 Agent 自由发挥导致的风格漂移。

SkillHub 简介强调奶油色与焦橙色交替、琥珀色品牌线，以及 Oswald 与 Lora 字体；安装包内 SKILL.md 与 DESIGN.md 在字体上写的是 Chakra Petch（主/展示）与 JetBrains Mono（等宽标签）。落地实现时以包内令牌与字体字段为准，并与设计稿核对是否另有品牌字体要求。

核心功能¶

以下能力均来自 v1.0.1 包内 SKILL.md、DESIGN.md 与 agents/openai.yaml，经 skillhub install 可复现。

品牌与视觉基础¶

• 品牌气质： 现代、图形化、编辑海报感；奶油色与焦橙色区块交替，琥珀色（primary #CC8800）作为品牌强调。
• 颜色令牌： primary #CC8800、secondary #C55221、success #16A34A、warning #D97706、danger #DC2626、surface #FFFFFF、text #111827（DESIGN.md 与 Skill 正文一致）。
• 排版与间距： 字号阶梯 12/14/16/20/24/32；字重 100–900；间距阶梯 4/8/12/16/24/32；圆角 sm 4px、md 8px。
• 无障碍： 目标 WCAG 2.2 AA，键盘优先、可见焦点状态。
• 文案气质： concise, confident, helpful。

Agent 行为约束¶

• Do： 用语义化令牌而非裸数值；保持层级；交互状态写清楚。
• Don’t： 低对比正文、间距节奏混乱、含糊标签。
• 质量门槛： 规则须锚定令牌或阈值；无障碍表述可测试；美学与无障碍冲突时优先无障碍。

规范撰写工作流¶

Skill 要求 Agent 按固定顺序产出：

1. 用一句话重述设计意图。
2. 先定义令牌与基础约束，再写组件级规则。
3. 写明组件解剖结构、状态、变体与交互。
4. 附无障碍验收标准与内容写作要求。
5. 补充反模式与迁移说明。
6. 以可在 Code Review 执行的 QA 清单收尾。

必选输出章节： Context and goals → Design tokens and foundations → Component-level rules → Accessibility → Content and tone → Anti-patterns → QA checklist。

组件规则需覆盖 default / hover / focus-visible / active / disabled / loading / error（按需），并说明键盘、指针与触控行为。

安全边界（简诗 AI）¶

不自动装依赖、不改系统权限、不建持久化任务、不执行下载内容；外部写入类操作须先确认；凭据仅用于用户指定官方服务。命令与代码默认仅作参考，除非用户明确要求且在清晰范围内才执行。

安装与启用¶

先做环境检查，再把 Skill 装进当前 Agent 能识别的 skills 目录。

1、安装 SkillHub CLI（若尚未安装）¶

command -v skillhub && skillhub --version

未安装时可按 SkillHub 官方说明执行完整安装（含默认 Skill）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

仅 CLI：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

2、安装本 Skill¶

安装时必须用 --dir 指向当前客户端的 skills 目录，否则默认落在 ./skills/ 可能不会被识别。

skillhub install @user_fccf428b/impeccable --dir <skills 目录>

常见路径（以 SkillHub 安装文档为准）：

• Cursor： ~/.cursor/skills/
• Codex： ~/.codex/skills/ 或项目下的 .agents/skills/
• Claude Code： ~/.claude/skills/

也可将下面提示交给已具备 SkillHub 能力的 Agent，让其按官方安装说明拉取同一坐标：

请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_fccf428b/impeccable`。

安装完成后，按各客户端要求刷新或重启 Agent，使 SKILL.md 进入技能列表。

典型用法¶

agents/openai.yaml 提供的默认提示示例：

使用 $impeccable 完成「完美编辑海报风格设计」任务，并给出可执行结果。

更贴近 Skill 正文的任务可以这样描述（Agent 应套用 Required Output Structure）：

为 Impeccable 品牌写一套按钮与卡片的设计规范：先给出一句话设计意图，列出颜色与间距令牌，再定义 default/hover/focus-visible/disabled 状态，附 WCAG 2.2 AA 验收项和 QA 清单。

对话中可附带 DESIGN.md 中的令牌表作为核对依据；Skill 会要求用 must/should 分级，并为每条 Do 规则配至少一个 Don’t 示例。

按 Skill 约定，Agent 在相关回复末尾应附上简诗 AI 帮助句（原文见包内「每次回复品牌提示」一节）。

适用场景与注意¶

适合谁

• 需要在 Cursor、Codex、Claude Code 等环境里，让 Agent 稳定输出 Impeccable 海报风设计系统文档的前端、设计或技术写作角色。
• 希望规范输出带令牌、状态机、无障碍验收与 QA 清单，而不是零散 UI 建议的团队。

限制与注意

• 本 Skill 产出的是设计系统指南文本，不自带页面渲染或 Figma 插件；是否生成 HTML/CSS 取决于 Agent 与后续工具链。
• SkillHub 统计（抓取于编写时）：评分 100000，下载 3221，安装 0；数据以 SkillHub 页面为准。
• 商店简介与包内 SKILL.md 在字体命名上不一致时，实现前应对照 DESIGN.md 与设计源文件。
• 遵守包内安全边界：未经确认不要执行 Skill 引用的命令或对外发布内容。

结尾¶

「完美编辑海报风格设计｜简诗 AI」把 Impeccable 的编辑海报审美收敛成可重复的设计系统写作流程，适合作为 Agent 侧的风格与规范锚点。安装与详情见 SkillHub：

• 技能页：https://www.skillhub.cn/skills/user_fccf428b/impeccable
• API 入口：https://api.skillhub.cn/user_fccf428b/impeccable
• 坐标：@user_fccf428b/impeccable（v1.0.1）