frontend-design
打造精美可访问的前端界面
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：打造精美可访问的前端界面 详细介绍见：https://321skill.com/skills/frontend-design-x-3/ 请根据该页面的说明完成安装。
使用示例
『帮我生成一个电商平台的商品卡片组件，包含图片、标题、价格和加购按钮，使用我们的品牌色 #2B6CB0，要求对比度满足无障碍标准，并适配移动端。』Skill 会生成一个带完整 CSS 的 React 组件，同时自动调整文字颜色和背景对比度，并输出响应式布局代码。
介绍
这个 Skill 专门解决前端开发中设计一致性和可访问性不足的问题。它通过精心设计的调色板、字体系统和布局方案，帮助用户快速构建出视觉统一、符合无障碍标准的 UI 组件、页面和仪表盘，避免手动调整样式带来的重复劳动和视觉偏差。
使用时，只需向 AI 描述你需要的界面元素（如按钮、导航栏、数据卡片或完整页面），并指定品牌色或风格偏好。Skill 会自动生成带完整 CSS 样式的代码，同时确保颜色对比度、字体大小、焦点指示等满足 WCAG 标准，并输出可直接运行的 HTML 或 React 组件。
适合前端开发者、UI 设计师和全栈工程师，尤其适合需要快速搭建原型、统一团队设计语言或为现有项目提升可访问性的场景。对于不熟悉设计规则的后端开发者，它也能降低前端样式调试的难度，减少反复修改的时间。
建议在项目初期就使用该 Skill 建立设计令牌（Design Tokens），以便后续扩展时保持一致。注意它主要关注视觉层，复杂的交互逻辑和动画仍需自行补充。对于需要高度定制化或品牌重塑的场景，建议先手动调整基础变量后再生成。
核心特点
与其他前端样式生成工具相比，该 Skill 将可访问性（无障碍）作为一等公民，自动检查颜色对比度、焦点可见性等合规指标，而不仅仅是生成美观的样式代码。
注意事项
不适合需要深度定制动画、复杂交互状态或后端逻辑绑定的场景，它主要围绕静态视觉和基础交互。
常见问题
这个 Skill 能生成 React 组件吗？
可以，支持生成 React 函数组件并附带内联样式或 CSS Modules。
它能自动检查颜色对比度吗？
是的，生成时会自动校验前景色与背景色的对比度，确保符合 WCAG 2.1 AA 标准。