用 Skills 给 AI Agent 注入设计品味 ✍ sitin🕐 2026-07-15📦 7.8 KB 🟢 已读 𝕏 文章列表 介绍了开源技能库 emilkowalski/skills,它能为 AI 编程 Agent 注入设计品味,解决 AI 生成 UI 动画和交互时缺乏质感的问题。文章详解了其核心功能、安装方法、实操流程,并对比了 Taste-Skill、Hallmark 等类似工具的差异。 AI设计前端Agent工具Claude CodeCursor开源交互UI # 现在用 CodexClaude Code 或 Cursor 写一个网页并不难不过要想把一个网页设计的好看高级还是有 > 采集时间: 2026-07-15 22:30:32 > 作者: sitin (@sitinme) > 来源: https://x.com/sitinme/status/2077216108533493887 > 共 9 条帖子 --- ## 2026-07-15 10:18:07 现在用 Codex、Claude Code 或 Cursor 写一个网页并不难,不过要想把一个网页设计的好看高级,还是有点难度的。 最近发现一个给 AI Agent “注入设计品味”的开源技能库:emilkowalski/skills 一句话:专门解决 AI 做 UI 动画和交互时“没品味”的问题。 它不是新的 AI 模型,也不是设计软件,而是一套可以安装到 AI 编程 Agent 里的“设计经验包”: 把一位资深设计工程师关于动画、交互和 UI 细节的判断,整理成 AI 可以执行的规则。 核心技能包括: - improve-animations:扫描整个代码库,按 8 个维度审计动画,输出可执行的改进计划 - review-animations:严格按规则审查动画 - animation-vocabulary:教 AI 用精确语言描述动画 - apple-design:蒸馏苹果设计原则 最聪明的地方是:它不直接改代码,而是先审计 → 生成 prioritized plan → 再让 Agent 去执行。用强模型做审查,便宜模型做落地。 对经常用 AI 做前端 / UI 的人来说,这可能是目前最实用的“设计品味”注入工具。     > **引用的帖子** > @sitinme > 现在分析网页设计的工具还真的不少,之前分享过一些,这又翻到一个不太一样的开源模板,叫 ai-website-cloner-template > > 它的思路也特别直接: > 你丢给它一个网址,它就指挥 AI 编程 agent 把这网站拆开看, > 提取设计 token 和素材,写出组件规格, > 再派一堆 agent x.com/sitinme/status… > [查看原帖](https://x.com/sitinme/status/2071764813580206470/photo/1) >  >  --- ## 2026-07-15 10:18:08 怎么安装 需要先安装 Node.js、npm/npx 和 Git。Skills CLI 不需要单独全局安装,但会通过 Git 下载仓库。 安装全部技能: npx skills@latest add emilkowalski/skills 只安装主技能: npx skills add [github.com/emilkowalski/skills…](https://t.co/Ulm7Y7mqZ4) --skill emil-design-eng 只安装动画审查: npx skills add [github.com/emilkowalski/skills…](https://t.co/Ulm7Y7mqZ4) --skill review-animations [Skills.sh](https://Skills.sh) 当前列出的兼容 Agent 包括 Codex、Claude Code、Cursor、GitHub Copilot、Windsurf、Gemini、Cline 等。CLI 通常会检测当前环境,或者提示你选择安装目标。 另外,Skills CLI 默认会收集匿名安装统计。官方称数据包括技能名称、技能文件和时间戳,不包括个人及设备信息;如需关闭,可设置: [$env](https://x.com/search?q=%24env&src=cashtag_click):DISABLE_TELEMETRY=1 npx skills add emilkowalski/skills **链接卡片**: [GitHub - emilkowalski/skills: Skills for Design Engineers.](https://t.co/ljBl218c3l)  --- ## 2026-07-15 10:18:13 一套更完整的实操流程 比较推荐的使用方式不是“装完就让它自由发挥”,而是形成一个闭环: ·使用 emil-design-eng 创建或修改组件。 ·启动项目,让 Agent 通过浏览器实际查看界面。 ·录制动画或放慢播放,检查真实手感。 ·使用 review-animations 审查改动。 ·使用 improve-animations 扫描整个项目。 ·选择优先级最高的计划执行。 ·再运行一次审查和视觉验证。 Skill 本身只提供判断规则,并不会自动获得视觉能力。 要真正发挥效果,最好搭配浏览器截图、Playwright、录屏或真实设备测试。 它和 Taste-Skill 有什么区别 我之前分享过 Taste-Skill,可以这样理解: Taste-Skill 更偏整体视觉方向、反 AI 味、页面风格和审美约束;emilkowalski/skills 更窄、更严格,也更偏动画、交互手感和设计工程。 前者适合回答“这个页面整体应该长什么样”,后者更擅长回答“这个按钮、弹窗和抽屉为什么感觉不对”。 两者可以一起使用,但规则发生冲突时,最好提前指定优先级,否则 Agent 可能在多个设计观点之间摇摆。  --- ## 2026-07-15 10:18:13 也有人建议,面对“AI 味很重”的网站,可以使用 Base UI 配合 Emil 的 Skills 重新设计 🔗: **链接卡片**: [GitHub - emilkowalski/skills: Skills for Design Engineers.](https://t.co/ljBl218c3l)  --- ## 2026-07-15 11:10:51 嗯嗯,是的 --- ## 2026-07-15 16:31:39 总体来讲,emilkowalski/skills 偏重动效与交互细节,用 Emil 在 Vercel、Linear 的设计经验指导 AI 正确处理缓动、时长、反馈和动画审查。 --- ## 2026-07-15 16:32:09 之前分享的ai-website-cloner-template 它是“网页复刻流水线”,让 AI 分析指定网站的截图、样式、资源和交互,再重建成 Next.js 项目。 > **引用的帖子** > @sitinme > 现在分析网页设计的工具还真的不少,之前分享过一些,这又翻到一个不太一样的开源模板,叫 ai-website-cloner-template > > 它的思路也特别直接: > 你丢给它一个网址,它就指挥 AI 编程 agent 把这网站拆开看, > 提取设计 token 和素材,写出组件规格, > 再派一堆 agent x.com/sitinme/status… > [查看原帖](https://x.com/sitinme/status/2071764813580206470/photo/1) >  >  --- ## 2026-07-15 16:32:34 Hallmark,它是强约束的反“AI 味”设计系统,通过页面结构、主题选择和 57 项检查,让不同项目真正呈现不同的视觉风格。 > **引用的帖子** > @sitinme > 之前分享过Taste-Skill,让 AI 生成的 UI 不再一眼看起来像 AI 生成。 > > 然后我又看到了跟它比较类似的一个工具:Hallmark,是一个 AI coding assistant 的设计 skill。 > > 安装后,它会给 Claude Code / Cursor / Codex x.com/sitinme/status… > [查看原帖](https://x.com/sitinme/status/2067543806959067173/photo/1) >  >  >  --- ## 2026-07-15 16:33:01 Taste Skill,它是覆盖范围最广的前端审美技能包,包含布局、字体、动效、重设计、图片转代码以及多种明确的视觉风格。 [▶ 视频](https://x.com/sitinme/status/2077310453370519686) 视频缩略图:  > **引用的帖子** > @sitinme > AI 写前端的下一步,可能不是“更快”,而是“更有品味”。 > > 看到一个可以称之为“一份写给 AI Agent 的前端审美手册”的开源项目:Taste Skill。 > > 它不是 UI 组件库,也不是 Tailwind 模板,而是一套写给 AI Agent 的「前端审美规则包」。 > > 专门解决一个问题:为什么 AI 生成的页面越来越像? > [查看原帖](https://x.com/sitinme/status/2077310453370519686) ---
如 如何(以及为何)构建 Agent First 应用 文章介绍了如何使用 Agent-Native 框架构建 Agent First 应用。通过统一的前端动作与 Agent 工具,实现 UI 与 Agent 的双向同步。应用支持通过聊天交互、集成外部 Agent、A2A 通信及自动化任务,且完全开源。 技术 › Agent ✍ Steve (Builder.io)🕐 2026-07-29 AgentAgent-NativeClaude前端A2A开源自动化框架UI
开 开源发布灵剪 lingjian-video 作者开源了灵剪(lingjian-video)项目,这是一种可以逐关审核的AI短视频生成工具。它将脚本、分镜、配音等流程自动化,但允许用户在每个环节对候选内容进行审核和决策。项目支持4种首发风格,基于Apache-2.0协议开源,并可用作Agent Skill。 技术 › Skill ✍ 爆裂队长NEXT🕐 2026-07-19 开源灵剪视频生成AIAgent自动化审核Apache-2.0工具
开 开源个 Skill|解决 X 转国内赛道的内容审查违规难题 文章介绍了一个开源的 AI Skill 工具 media-publish-check,旨在帮助创作者解决从海外平台(如 X)转至国内自媒体平台(抖音、小红书等)时遇到的内容审查和违规限流问题。该工具整合了大量平台规则和违禁词库,支持发布前的内容自审和优化,降低违规风险。 技术 › Skill ✍ Sherry小水🕐 2026-07-15 AI内容审查开源自媒体AgentSkill内容风控工具
耗 耗时30天,WeSight正式开源:一个入口,用所有 Agent 本文介绍了 WeSight 的正式开源,这是一款开源桌面 AI Agent 控制台。它整合了 Claude Code、Codex、Hermes 等多种 Agent 引擎,通过可视化工作台实现了对本地 Agent 的统一调度、模型管理和运行监控。WeSight 支持 Agent 团队协作、IM 通道绑定(如飞书)、技能管理及桌面宠物等创新功能,旨在降低多 Agent 协作门槛,让开发者专注于创意本身。 技术 › Agent ✍ 苍何🕐 2026-06-02 WeSight开源Agent工具苍何桌面端工作台模型管理协作AI
还 还在用 AI 学术妲己学论文?这套 Agent 科研团队帮你打败99%研究生 本文指出当前 AI 辅助学术论文写作中普遍存在的“幻觉”和造假问题,并介绍了一个名为 academic-research-skills (ARS) 的开源 Agent 系统。该系统通过多 Agent 协作、引用核验、反谄媚协议及完整性闸门机制,实现了从调研、写作到审稿的防出错流水线,旨在解决 AI 写作不可靠的痛点。 技术 › Agent ✍ Gyro🕐 2026-05-18 AI学术研究Agent论文写作工具Claude开源科研工作流效率
正 正式开源 html-anything:让 AI Agent 输出世界级设计水准的 HTML 文章宣布正式开源 AI 工具 html-anything。该工具历时 3 天开发,包含 1.5 万行代码,旨在解决 AI Agent 输出 HTML 设计差的问题。它内置 75 套技能模板,支持 18 种主流代码 Agent CLI(如 Claude Code、Cursor 等)的自动探测与会话复用,实现零 API Key 成本。同时支持 Markdown、数据及图像等 11 种文件格式转换,并可一键发布至社交媒体或导出高 DPI 图片。 技术 › 工具与效率 ✍ Tom Huang🕐 2026-05-17 开源AI AgentHTML前端Markdown效率工具ClaudeCursor自动化设计
H Hermes WebUI 终极指南:在浏览器中掌控你的 AI 终端 本文介绍了专为 Hermes Agent 打造的 WebUI 可视化控制台。该工具采用 Python 原生后端与 Vanilla JS 前端,旨在提供零框架、零构建的秒级启动体验。文章详细阐述了其核心功能,包括流式输出、思维链可视化、内嵌文件浏览器及安全护栏,并提供了原生与 Docker 两种部署方案及常见问题排错指南。 技术 › Hermes ✍ Mulight 沐光🕐 2026-04-29 AIAgentWebUI可视化部署指南Hermes前端DevOps工具教程
我 我用Obsidian + Claude Code搭了一个健脑房 本文详细介绍了作者如何构建基于Obsidian和Claude Code的个人工作流系统。文章提出了“未经人脑处理的知识不进仓库”和“输入服务于输出”两大原则,通过构建COO、CTO、心理医生等AI Agent角色,配合定时任务和自动化工作流,实现了一个具有问责机制、自动化记录和个人百科功能的数字“健脑房”,旨在提升思考质量与工作效率。 技术 › 工具与效率 ✍ Haoshan Hong🕐 2026-04-06 ObsidianClaude CodeAgent工作流个人知识管理AI自动化生产力提示词开源
我 我的 Vibe Coding 项目:从 WorkAny 到 FastClaw 作者分享了近三个月使用 Claude Code 进行 Vibe Coding 的实战经历,产出了多个与 Agent 生态相关的项目。包括桌面 Agent WorkAny、OpenClaw 托管服务 ClawHost、多租户 Agent OS FastClaw、微信桥接器 WeClaw、工具库 AnyClaw 等,展示了个人利用 AI 极速开发并构建产品生态的全过程。 技术 › Agent ✍ idoubi🕐 2026-04-06 Claude CodeVibe CodingAgentOpenClaw开源项目实战Full Stack工具WeClawFastClaw
I I got tired of being a human AGENTS.md 作者受够了每次与编码代理沟通时重复上下文,因此开发了AsterMem,一个本地运行的内存服务器。它将记忆存储为Markdown文件,支持离线运行,并自动提炼用户画像供代理读取。用户可完全控制和编辑记忆,避免黑盒问题。 技术 › Agent ✍ Asterove🕐 2026-07-29 Agent本地化隐私保护MarkdownCursorClaudePythonFastAPIReact开源
H Hermes Agent Masterclass: 安装、配置与基础命令 本文介绍了开源 AI Agent Hermes 的安装与基础配置。Hermes 由 Nous Research 开发,支持多种模型和终端运行,具有会话复用和技能积累的独特设计。文章详细讲解了在 Windows、macOS 和 Linux 上的安装步骤、设置向导流程以及如何配置推理提供商。 技术 › Agent ✍ tonbi🕐 2026-07-29 HermesAgentAI安装教程CLI工具与效率开源
T Trajectory: Agent 经验数据的标准格式 文章介绍了 Trajectory,一个开源的数据格式标准化工具,旨在统一不同编码代理会话(如 Claude Code、Codex 等)的数据格式。该格式注重令牌效率,便于代理从过去的经验中学习,解决跨平台数据碎片化问题。 技术 › Agent ✍ Letta🕐 2026-07-25 TrajectoryLettaAgent数据格式Claude Code开源机器学习