ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

UI Skills之apple-design与brutalist-skill:两种极致设计风格的Agent实现

UI Skills之apple-design与brutalist-skill:两种极致设计风格的Agent实现 UI Skills之apple-design与brutalist-skill两种极致设计风格的Agent实现【免费下载链接】ui-skillsSkills for Design Engineers项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skillsUI Skills 是一个面向设计工程师的 Agent 技能库收录了 209 个可被 AI Agent 加载的设计技能。本文带你认识其中两个风格极端对立的技能主打流体动效与物理交互的apple-design以及融合瑞士印刷结构与终端粗野美学的brutalist-skill看看它们如何被实现为 Agent 可直接使用的设计风格包。什么是 UI Skills给 Agent 装上设计技能 UI Skills 的核心理念是把设计方法论写成 Markdown 技能文件SKILL.md让 Agent 在写界面时自动遵循。技能统一注册在项目内的技能注册表中每个技能都有 slug、来源仓库、主题标签topics和描述通过命令行即可按分类检索或获取任意技能例如npx ui-skills list --category visual入口技能 SKILL.md 定义了路由协议Agent 先判断任务是否为 UI 相关再按主题选择最小有用的技能集最多 3 个避免上下文膨胀。注册表源码见 src/data/registry.ts每个技能的 SHA-256 摘要被预计算在 src/data/agent-skills-digests.json 中保证拉取的技能内容与注册时一致——这是技能库能放心交给 Agent 自动加载的信任基础。apple-design把苹果式动效写成 Agent 技能 apple-design来自 emilkowalski 的 skills 仓库主题是motion、interaction、visual三重标签。它解决的问题很明确把 Apple 平台的界面设计哲学翻译到 Web 端具体覆盖能力维度技能关注点手势驱动拖拽、滑动、底部 sheet 的交互实现物理动效弹簧动画、惯性momentum、可中断的过渡视觉材质半透明材料、层次与深度排版光学字号optical sizing、字距、行高无障碍尊重系统的减弱动态效果reduced-motion对新手来说这意味着你只需用自然语言告诉 Agent给这个页面加个苹果风格的抽屉交互Agent 加载该技能后就会按弹簧参数、可中断性等细节约束去实现而不是随便写几条 CSS transition。注册条目见 src/data/registry.ts。brutalist-skill瑞士印刷结构 × 终端粗野美学 brutalist-skill展示名为 industrial-brutalist-ui来自 Leonxlnx 的 taste-skill 仓库主题是taste、visual、interaction。它的定位是另一极原始而机械的界面方向——把瑞士平面印刷的网格结构与受终端/命令行启发的粗野主义brutalist视觉混在一起强调taste品味标签它不只是配色模板而是一套结构化的视觉决策约束让 Agent 产出反精致却有章法的工业风界面。它与 apple-design 正好构成光谱两端一个追求克制、流畅、拟物一个追求生硬、机械、反装饰。注册条目见 src/data/registry.ts。如何一键获取这两种设计风格技能 无需阅读长文档三步即可让 Agent 用上它们看分类npx ui-skills categories浏览所有主题分类找技能npx ui-skills list --category visual查看视觉类技能取技能npx ui-skills get apple-design或npx ui-skills get brutalist-skill把 SKILL.md 内容交给 Agent。这些命令的拼装逻辑实现在 src/lib/ui-skills-cli.ts路由规则见 skills/ui-skills-root/SKILL.md。两种极致风格怎么选⚖️对比项apple-designbrutalist-skill风格关键词流体、物理动效、半透明材质机械、粗野、瑞士印刷网格主题标签motion / interaction / visualtaste / visual / interaction适合场景移动端风 App、产品官网、强调手感开发者工具、设计工作室、强调个性的页面共同点都是纯 Markdown 技能Agent 加载即用不依赖框架 选择建议如果项目面向大众消费者优先 apple-design 的克制与流畅如果要制造强烈品牌记忆点brutalist-skill 的工业感会更出挑。小结UI Skills 证明了设计风格可以工程化apple-design 与 brutalist-skill 两个技能文件就分别把两种极致设计语言沉淀成了 Agent 可执行的知识。配合 209 个技能的注册表与 SHA-256 完整性校验这套机制让 AI 写界面第一次拥有了稳定的审美一致性——这正是设计工程Design Engineering最有意思的地方。【免费下载链接】ui-skillsSkills for Design Engineers项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skills创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表