前端UX/UI设计的代理技能，真正看起来不错
概览
你知道那种风格。渐变的团块英雄。完美对称的三列网格。一个漂浮在空间中的“开始”按钮，没有视觉重量。技术上是正确的。完全被遗忘。 AI代理虽然快，但毫无品味。它们几秒钟内就能搭建整页，做每一个决定时都自信得像是从未真正用过他们正在构建的东西。 这9项技能解决了这个问题。它们将真正的设计思维注入你的代理工作流程，让输出不再像是从模板组装出来的。 区别并不微妙。这就像用户完成任务和关闭标签页的区别。 支持Claude Code、Cursor、OpenCode、Kiro以及任何支持该技能格式的软件。 不是那种“加替代文本就搞定”的版本。键盘流畅、屏幕阅读器意识、语义结构、弹性布局、可读内容、包容默认。这种跨设备和能力都能用的无障碍，不会让人觉得被强行绑定。
概述（AI 翻译）
你知道那种风格。渐变的团块英雄。完美对称的三列网格。一个漂浮在空间中的“开始”按钮，没有视觉重量。技术上是正确的。完全被遗忘。
AI代理虽然快，但毫无品味。它们几秒钟内就能搭建整页，做每一个决定时都自信得像是从未真正用过他们正在构建的东西。
这9项技能解决了这个问题。它们将真正的设计思维注入你的代理工作流程，让输出不再像是从模板组装出来的。
问题，并肩而立
| 没有技能 | 有技能 | |
|---|---|---|
| 表单 | 将所有字段汇入一页，无分组，内联验证，第一次按键即触发 | 相关字段分组，渐进披露，验证模糊，用通俗语言解释错误 |
| 导航 | 汉堡菜单中每个页面的平面列表 | 基于用户任务的层级结构，清晰的寻路，深度需要时的线索 |
| 错误状态 | Something went wrong. |
We couldn't save your changes because the file is too large. Try one under 10MB. |
| 视觉等级制度 | 所有东西大小和重量都一样。重要行动被埋藏。 |
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
Frontend Agent Skills
You know the look. Gradient blob hero. Perfectly symmetrical 3-column grid. A “Get Started” button floating in space with no visual weight. Technically correct. Completely forgettable.
AI agents are fast but tasteless. They scaffold a full page in seconds and make every decision with the confidence of someone who has never actually used the thing they’re building.
These 9 skills fix that. They inject real design thinking into your agent’s workflow so the output stops looking like it was assembled from a template.
The problem, side by side
| Without skills | With skills | |
|---|---|---|
| Forms | Dumps every field on one page, no grouping, inline validation that fires on first keystroke | Groups related fields, progressive disclosure, validates on blur, explains errors in plain language |
| Navigation | Flat list of every page in a hamburger menu | Hierarchy based on user tasks, clear wayfinding, breadcrumbs where depth demands it |
| Error states | Something went wrong. |
We couldn't save your changes because the file is too large. Try one under 10MB. |
| Visual hierarchy | Everything the same size and weight. Important actions buried. | Primary action is obvious. Secondary content recedes. Your eye knows where to go. |
| Accessibility | alt="" on every image, calls it done |
Keyboard flows, focus management, semantic structure, screen reader announcements, resilient across zoom and user settings |
The difference isn’t subtle. It’s the difference between a user finishing the task and a user closing the tab.
Install
npx skills@latest add hueyexe/frontend-agent-skills
Works with Claude Code, Cursor, OpenCode, Kiro, and anything that supports the skills format.
Install all 9, or pick what you need:
npx skills@latest add hueyexe/frontend-agent-skills --skill ui-visual-composition
The 9 skills
♿ accessibility-inclusive-design
Not the “add alt text and call it done” version. Keyboard flows, screen reader awareness, semantic structure, resilient layouts, readable content, inclusive defaults. The kind of accessibility that works across devices and abilities without feeling bolted on.
🧱 design-systems-frontend-architecture
Turns isolated screens into reusable systems. Design tokens, component contracts, responsive layouts, semantic markup, CSS strategy, documentation, governance. For when you need the agent to think in systems instead of one-off pages.
📝 forms-inputs-checkout
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add hueyexe/frontend-agent-skills