- 📁 references/
- 📁 scripts/
- 📄 SKILL.md
设计师的角色。读取大纲,使用 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
booklib-ai
from GitHub
开发与编程
- 📁 assets/
- 📁 evals/
- 📁 examples/
- 📄 SKILL.md
应用 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通知滑入,列表项出现
就计划或设计不断地采访用户,直到达成共识,解决决策树的每个分支。当用户想要对计划进行压力测试、对其设计进行盘问或提到“盘问我”时使用。
Ashutos1997
from GitHub
开发与编程
- 📁 references/
- 📄 README.md
- 📄 SKILL.md
根据 Figma 文件和代码 (HTML/CSS/React/Vue/Tailwind) 的 18 条专业规则审核设计。自动检测框架,运行特定于类别的代码超级功能(咏叹调、焦点、对比度、令牌、响应式、运动、表单、导航、间距),审核暗模式和道德设计问题,在代码差异之前/之后输出,并生成结构化的开发人员移交报告。 触发条件:检查我的设计、审查我的 UI、审核我的布局、是否可访问、设计审查、排版检查、色彩对比、WCAG、a11y、像素完美、UI 批评、Figma 审核、CSS 检查、审查此组件、这看起来不错吗、深色图案、道德设计、是否符合 GDPR、检查我的入门、检查我的结帐、这是可操作的、这里有任何深色图案、检查我的登陆页面、我的 UI 是否可访问、检查我的设计系统,是这样吗?道德,我的表单是否可访问,检查我的导航,我的黑暗模式是否正确,这是否响应,检查我的空状态,检查我的错误状态。
viperrcrypto
from GitHub
开发与编程
- 📁 .claude-plugin/
- 📁 agents/
- 📁 autoresearch/
- 📄 .gitignore
- 📄 LICENSE
- 📄 logo.png
终极前端设计和 UI 工程技能。每当用户要求构建、设计、设计样式或改进任何 Web 界面、组件、页面、应用程序、仪表板、登陆页面、工件、海报或视觉输出时,请使用此功能。涵盖版式、色彩系统、空间设计、运动/动画、交互设计、响应式布局、声音设计、触觉反馈、图标系统、生成艺术、主题、React 最佳实践和 DESIGN.md 系统生成。当用户要求审核、批评、完善、简化、动画化或规范化前端时也可以使用。触发任何提及“使其看起来不错”、“修复设计”、“UI”、“UX”、“前端”、“组件”、“登陆页面”、“仪表板”、“工件”、“海报”、“设计系统”、“主题”、“动画”、“响应式”或任何提高视觉质量的请求。 即使用户没有明确请求设计帮助但任务涉及生成可视化界面,也可以使用此技能。
nasrulhazim
from GitHub
内容与多媒体
SVG 名片设计器获取联系方式和品牌偏好,然后生成 12 个正面设计概念以及可选的背面设计、交互式 HTML 预览库、带有前/后翻转动画的个人名片展示,以及带有出血区域和裁剪标记的可打印 SVG 导出。支持水平和垂直方向、六种布局风格(简约、企业、创意、优雅、大胆、科技)、多种配色方案、二维码占位符、社交媒体图标和徽标集成。每当用户要求设计名片、创建名片、制作名片或说“设计名片”、“buat kad bisnes”、“创建名片”、“reka kad perniagaan”、“设计 kad nama”、“我需要 X 的名片”时,请使用此技能。 --- # 名片设计师
heliohq
from GitHub
数据与AI
系统架构和设计思维——需求分析、组件设计、数据建模、扩展策略和权衡分析。在以下情况下使用:“设计这个系统”、“架构的用途是什么”、“X 的权衡”、“我们应该如何架构”、“系统设计”、“API 设计”、“数据模型”、“服务边界”、“架构文档”、“创建 ADR”。当设计思维完成后,这项技能就会交给 /ship:write-docs 来编写设计文档。注意:这不适用于视觉设计(使用/ship:视觉设计)或实施规划(使用/ship:设计)。 --- # 架构设计 在将系统设计决策写下来之前,请仔细思考。这项技能是关于**思考**——需求、组件、权衡、边界。当设计准备就绪时,您必须调用`Skill("write-docs")`来编写设计文档——不要内联编写文档。 ## 扩展至复杂性 并非每个决策都需要全部 5 个阶段。将深度与决策相匹配: - **小**(单一组件,明确的约束) - 第 1 阶段简要,第 2 阶段,第 5 阶段。跳过深入研究和扩展。 - **中**(多组件,一些未知)- 所有 5 个阶段,但保持每个阶段简洁。 - **大型**(新系统、重大未知因素、跨团队)——全部 5 个阶段的全面深入,带有图表和明确的负载估计。 ## 危险信号 **从不:** - 跳过需求收集并直接跳到解决方案 - 在不了解现有约束(技术堆栈、团队、时间表)的情况下进行设计 - 省略权衡分析 - 每个决策都有因某种原因被拒绝的替代方案 - 跳过边界部分 - 这是核心的防漂移机制 - 提出设计而不验证实际代码库的假设 - 将“我们想要的”与“存在的”混为一谈 - 明确差距 ## 第 1 阶段:需求收集在设计任何东西之前,请先了解您要解决的问题。 ### 功能要求 - 系统必须做什么?列出具体能力。 - 输入/输出有哪些
当用户要求“委托工作流程”、“创建工作流程”、“设计工作流程”、“启动工作流程”,或者想要交互式设计和生成具有阶段、实体和副驾驶代理的纯文本工作流程时,应使用此技能。
JunhuaLiu1
from GitHub
开发与编程
创建具有高设计质量的独特的生产级前端界面。当用户要求构建 Web 组件、页面、工件、海报或应用程序(示例包括网站、登陆页面、仪表板、React 组件、HTML/CSS 布局或设计/美化任何 Web UI 时)时,请使用此技能。生成富有创意、精美的代码和 UI 设计,避免通用的 AI 美学。
seunghan91
from GitHub
测试与安全
iOS 26 / iPadOS 26 Liquid Glass 设计系统,用于 Web 和应用程序开发。来自 Apple 官方 Figma 社区工具包的精确设计标记、组件规格、布局模式和动画参数。
thinkwork-ai
from GitHub
内容与多媒体
就计划或设计不断地采访用户,直到达成共识,解决决策树的每个分支。当用户想要对计划进行压力测试、对其设计进行盘问或提到“盘问我”时使用。
sjungling
from GitHub
开发与编程
当用户要求“设计 CLI”、“改进命令结构”、“格式化终端输出”、“检查 CLI 可用性”、“设计帮助文本”或“添加标志和参数”时,应使用此技能。在设计新的 CLI 工具、改进命令界面、格式化终端输出或检查 CLI 可用性时自动激活。不适用于 GUI/网页设计、后端 API 或 shell 脚本。