frontend-design
创建有特色、可访问的前端界面
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：创建有特色、可访问的前端界面 详细介绍见：https://321skill.com/skills/frontend-design-x-9/ 请根据该页面的说明完成安装。
使用示例
'帮我设计一个登录页面，使用蓝色调色板，大号字体，布局居中，并确保符合无障碍标准。' 它会生成包含HTML、CSS和React组件的代码，包括颜色变量、字体大小、对比度检查以及键盘焦点样式。
介绍
这个 Skill 解决了前端开发中界面设计千篇一律且忽视无障碍标准的问题。它通过引导 AI 在调色板、字体和布局上做出刻意选择，帮助开发者快速生成既独特又符合 WCAG 标准的 UI 组件、页面和仪表盘，避免反复手动调整样式和对比度。
使用方法很简单：你只需描述所需界面风格、配色倾向、字体偏好或布局要求，AI 就会自动生成对应的 HTML/CSS/React 代码，并内置无障碍检查（如颜色对比度、焦点样式、语义化标签等）。你还可以进一步调整细节，例如“将按钮颜色改为绿色并确保对比度达标”。
适合前端开发、UI 设计师和全栈开发者，尤其是在构建面向公众的网站、企业内部工具或需要快速迭代原型的场景中。也适合需要兼顾美观与无障碍的团队，减少后期修改成本。
建议在使用时明确指定无障碍标准等级（如 AA 或 AAA），并配合实际用户测试验证。注意该 Skill 侧重于静态界面设计和样式，对于复杂交互逻辑或后端数据处理仍需结合其他工具。
核心特点
核心区别在于它强调在调色板、字体和布局上的刻意选择，而非仅仅生成通用界面，确保每个界面既有独特风格又符合无障碍标准。
注意事项
不适合需要大量动态交互或复杂业务逻辑的后端开发场景。
常见问题
如何用这个 Skill 调整颜色主题？
你可以描述想要的配色方案，例如'使用暖色调的调色板，确保对比度符合 WCAG AA 标准'，AI 会生成相应的 CSS 变量或设计令牌。
这个 Skill 支持哪些无障碍标准？
它支持 WCAG 2.1 AA/AAA 标准，包括颜色对比度、字体大小、键盘导航等。