architecture
为功能设计 PM 友好的技术架构。没有代码,只有高层设计决策。
为功能设计 PM 友好的技术架构。没有代码,只有高层设计决策。
编译器驱动的设计工作流程,适合使用 Claude Code 在 Figma 中进行设计的设计师。涵盖组件和完整的界面/屏幕。当设计人员想要执行以下操作时使用:(1) 进行新设计(规范 + 编译 + 执行),(2) 修复更正并学习,(3) 交付已完成的设计,(4) 设置知识库,或 (5) 检查状态。
为任何用户体验、产品设计或交互设计推理任务激活此技能。每当用户要求用户体验评论、设计决策、模式推荐、可访问性审查、研究方法指南、利益相关者沟通策略、AI/UX 权衡分析或暗模式识别时使用。触发诸如“我应该使用”、“最好的方法是什么”、“挑战我的想法”、“帮助我做出决定”、“审查这个设计”、“我错过了什么”、“我如何向利益相关者展示这个”、“设计可用性测试”或“我应该使用什么研究方法”等短语。这项技能在高级从业者层面上发挥作用:它询问前提,在阻力下保持立场,并指出其他代理人跳过的权衡。即使请求的措辞很随意,也始终要激活复杂的用户体验决策。
负责品牌、内容和设计工作流程的多角色人工智能创意团队。当任务涉及简短分析、研究、规划、脚本编写、视觉指导、品牌设计、营销材料、社交媒体执行或跨不同创意角色的项目协调时使用。
当用户要求设计系统架构、做出架构决策或将 PRD 转化为技术设计时,应该使用此技能
SVG 名片设计器获取联系方式和品牌偏好,然后生成 12 个正面设计概念以及可选的背面设计、交互式 HTML 预览库、带有前/后翻转动画的个人名片展示,以及带有出血区域和裁剪标记的可打印 SVG 导出。支持水平和垂直方向、六种布局风格(简约、企业、创意、优雅、大胆、科技)、多种配色方案、二维码占位符、社交媒体图标和徽标集成。每当用户要求设计名片、创建名片、制作名片或说“设计名片”、“buat kad bisnes”、“创建名片”、“reka kad perniagaan”、“设计 kad nama”、“我需要 X 的名片”时,请使用此技能。 --- # 名片设计师
量子环路自主开发流程的一部分(集体讨论→规范→计划→执行→审查→验证)。在实施之前对功能理念进行深入的苏格拉底式探索。一次提出一个问题,提出 2-3 种权衡的替代方法,逐节提出设计以供批准,并保存批准的设计文档。在开始新功能、探索想法或编写规范之前使用。触发点:集思广益、探索想法、设计、思考、ql-集思广益。
应用 Rachel Nabors 的《Animation at Work》中的网页动画原理。涵盖人类对运动的感知、动画的 12 条原则、动画模式(过渡、补充、反馈、演示、装饰)、CSS 过渡、CSS 动画、Web 动画 API、SVG/Canvas/WebGL、与故事板和运动组合进行动画交流、性能(仅限复合属性、will-change、RAIL)、可访问性(首选减少运动、前庭障碍)和团队工作流程。在“动画”、“过渡”、“CSS 动画”、“关键帧”、“缓动”、“动作设计”、“网页动画”、“首选减少运动”、“故事板”、“视差”、“加载动画”、“悬停效果”、“微交互”上触发。 --- # 工作中的动画技能 您是一位网络动画专家顾问,以 Rachel Nabors 所著的《工作中的动画》的 5 章为基础。您可以通过两种方式提供帮助: 1. **设计应用** — 应用动画原理来创建有目的的、高性能的网页动画 2. **设计审查** — 分析现有动画并提出改进建议 ## 如何决定哪种模式 - 如果用户要求 *创建*、*添加*、*实现*、*动画* 或 *构建* 动画 → **设计应用** - 如果用户要求 *审查*、*审核*、*评估*、*优化* 或 *修复*动画 → **设计审查** - 如果不清楚,请简要询问他们更喜欢哪种模式 --- ## 模式 1:设计应用程序 在帮助创建动画时,请遵循以下决策流程: ### 步骤 1 — 对动画的目的进行分类 每个动画都必须有明确的目的。 使用这五种模式进行分类: |图案|目的|何时使用 |示例| |--------|---------|-------------|---------| | **过渡** |显示视图/状态之间的状态变化 |导航页面、打开面板、切换选项卡 |页面滑入、模态打开/关闭 | | **补充** |将元素带入/带出已存在的视图 |将项目添加到列表、显示通知、显示内容 | Toast通知滑入,列表项出现
设计师的角色。读取大纲,使用 CSS 设计系统 + JS 幻灯片引擎 + 每张幻灯片内容生成单个 HTML 演示文稿文件。接受视觉参考(URL、屏幕截图、设计规范)并提取设计信号以告知同构映射。每当用户说“设计幻灯片”、“生成幻灯片”、“生成幻灯片”、“构建幻灯片”、“视觉样式”、“引用此样式”、“喜欢此设计”、“设计”、“生成幻灯片”、“视觉样式”、“引用此样式”或想要将大纲转换为实际幻灯片时使用。 --- # codeck design ## 角色激活 阅读`$DECK_DIR/diagnosis.md`以获取推荐的设计角色及其结构映射。你就是那个人。他们的形式逻辑——他们如何组织空间、张力、节奏——成为你的视觉逻辑。 选择角色是为了结构匹配,而不是领域: > 内容逐层构建,每一页都增加复杂性 → Ravel (Bolero):视觉简单到丰富,颜色逐渐饱和,每一页添加一个元素。 >> 内容由对比和对立力量驱动 → 卡拉瓦乔:高对比度照明、黑白主导、谨慎使用强调色,就像决定性的一笔。 >> 内容去除噪音,揭示一个真相 → Dieter Rams:删除一切不必要的东西,最后一张幻灯片是最空洞、最有力的。直接应用他们的形式逻辑。不要解释它们的原理——将它们体现在每一个视觉选择中。如果“diagnosis.md”不存在,请使用 AskUserQuestion 或建议先运行“/codeck”。 ## AskUserQuestion 格式 1. **重新整理** — “编解码器设计,{当前步骤}” 2. **简化** — 简单语言 3. **推荐** — 建议 + 原因 4. **选项** — 选择仅陈述经过验证的事实。对于未渲染的结果,请说“将”而不是“是”。 ## 设置 ```bash DECK_DIR="$HOME/.codeck/projects/$(basename "$(pwd)")" mkdir -p "$DECK_DIR" bash "$HOME/.claude/skills/codeck/scripts/status.sh" "$DECK_DIR" ``` 阅读 `$DECK_DIR/outline.md` — 页面结构、内容点、用户意图、设计者注意事项。读取`$D
iOS 26 / iPadOS 26 Liquid Glass 设计系统,用于 Web 和应用程序开发。来自 Apple 官方 Figma 社区工具包的精确设计标记、组件规格、布局模式和动画参数。
创建具有高设计质量的独特的生产级前端界面。当用户要求构建 Web 组件、页面、工件、海报或应用程序(示例包括网站、登陆页面、仪表板、React 组件、HTML/CSS 布局或设计/美化任何 Web UI 时)时,请使用此技能。生成富有创意、精美的代码和 UI 设计,避免通用的 AI 美学。
skill-sample/ ├─ SKILL.md ⭐ 必备:技能说明入口:用途 / 安装 / 用法 / 示例 / 依赖 ├─ manifest.sample.json ⭐ 推荐:机器可读元信息:用于索引 / 校验 / 自动填表 ├─ LICENSE.sample ⭐ 推荐:授权与使用范围:开源 / 限制 / 商用说明 ├─ scripts/ │ └─ example-run.py ✅ 可运行示例脚本:让用户导入后立刻验证“能用” ├─ assets/ │ ├─ example-formatting-guide.md 🧩 输出规范:统一排版 / 结构 / 风格 │ └─ example-template.tex 🧩 模板资源:报告/文档模板,快速生成标准产物 └─ references/ 🧩 参考资料库:方法论 / 结构指南 / 最佳实践 ├─ example-ref-structure.md 🧩 结构参考:章节框架 / 目录组织 ├─ example-ref-analysis.md 🧩 分析参考:常用套路 / 指标口径 └─ example-ref-visuals.md 🧩 视觉参考:图表规范 / 可视化建议
更多 Agent Skills 规范 详见Anthropic官方文档:https://agentskills.io/home
├─ ⭐ 必备:YAML Frontmatter(必须存在,放在文件最顶部) │ ├─ ⭐ name :技能唯一名;须符合命名规则,并建议与目录名一致 │ └─ ⭐ description :技能描述;建议包含触发关键词(便于检索/匹配) │ ├─ ✅ 可选:Frontmatter 扩展字段(规范允许,但非强制) │ ├─ ✅ license :许可证标识(也可配合单独 LICENSE 文件) │ ├─ ✅ compatibility :兼容性/运行环境要求(仅在确实有限制时写) │ ├─ ✅ metadata :任意键值对(如 author/version/source_url 等) │ └─ 🧩 allowed-tools :允许工具白名单(规范标注为 experimental) │ └─ ✅ 推荐:Markdown 正文(自由格式,但建议按“渐进式披露”组织) ├─ ✅ Overview / Purpose :一句话说明目标 + 不做什么(边界) ├─ ✅ When to use :触发条件/适用场景(让模型/用户知道何时调用) ├─ ✅ Step-by-step :步骤化流程(最好 3–6 步,保证可复现) ├─ ✅ Inputs / Outputs :输入格式、输出格式、产物位置(文件/文本/JSON等) ├─ ✅ Examples :至少 1 个可复制示例(越“能跑”越好) ├─ 🧩 Files & References :引用assets/、references/、scripts/(相对路径) ├─ 🧩 Edge cases :边界情况/限制(大文件、速率限制、失败回退) ├─ 🧩 Troubleshooting :常见错误与解决(依赖缺失、路径不对、权限问题) └─ 🧩 Safety notes :涉及联网/写文件/执行命令时给出提醒(建议写)
在 GitHub 和各类社区里,技能文件分散、难检索、也难判断是否可靠。SkillWink 把开源技能集中整理成可搜索、可筛选、可直接下载使用的技能库,让你更快找到“正好能用”的那一个。并且支持在SkillWink上直接上传skills。
我们提供 AI 语义搜索 + 关键字检索,支持 版本更新与多维排序(下载/点赞/评论/更新),并为每个技能提供 SKILL.md 开放标准与来源信息。你还可以在详情页直接 评论讨论、交流用法与改进建议。
快速上手:
支持下载与导入 skills(.zip/.skill),本地放置后即可生效:
~/.claude/skills/(Claude Code)
~/.codex/skills/(Codex CLI)
~/.gemini/skills/(Gemini CLI)
同一份 SKILL.md 跨平台通用。
你需要了解的:技能是什么、怎么运行的、怎么找、怎么导入、怎么判断可信、怎么参与共建。
这里的“skills(技能)”是一种可复用的任务能力包,通常包含 SKILL.md 说明(用途、输入输出、使用方法)以及可选的脚本/模板/示例文件。
你可以把它理解为:给 AI 助手或工具链用的“插件说明书 + 资源包”,可被反复安装与分享。
技能系统采用“渐进式披露”策略,高效管理上下文信息,具体流程如下:
发现阶段:系统启动时,智能体仅加载各技能的名称与简要描述——信息精简,足以判断其适用场景,避免冗余加载。
激活阶段:当任务需求与某技能描述匹配时,智能体才将对应的完整 SKILL.md 说明文档动态载入上下文。
执行阶段:智能体严格遵循文档指引执行操作,并按需调用关联文件或运行内置代码模块。
核心优势:该设计使智能体始终保持轻量高效,同时具备“按需扩展上下文”的能力,既保障响应速度,又确保复杂任务拥有充分执行依据。
推荐 3 种方式组合使用:
注:以上导入方式文件大小控制在10M之内。
常见路径如下(不同系统略有差异,以你本机为准):
同一份 SKILL.md 通常可以跨工具复用。你在 SkillWink 导入后,也可以查看“放置指引/安装说明”。
可以。很多技能本质是标准化说明 + 资源,只要目标工具支持读取该格式,就能共享使用。
比如:检索类技能 + 写作类技能 + 自动化脚本,形成“发现 → 处理 → 输出”的工作流。
一部分skills来源于公开的 GitHub 仓库。我们会筛掉低质量仓库(至少 2 星),并扫描基本质量指标,还有一部分是SkillWink平台的创作者独立上传的。作为使用者,在安装前应始终审查代码,对安全问题负责。
最常见原因是这几类:
我们会尽量避免。你可以用 排序 + 评论 让“好用的”更靠前: