frontend-design
通过精心设计的色彩、字体与布局，创建独特且可访问的前端界面。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：通过精心设计的色彩、字体与布局，创建独特且可访问的前端界面。 详细介绍见：https://321skill.com/skills/frontend-design-x/ 请根据该页面的说明完成安装。
使用示例
‘我需要为管理后台设计一个可访问的数据表格组件，使用深色主题，并遵循 WCAG AA 标准。’ 它会引导你选择对比度足够的色彩方案，定义清晰的字体层级和行高，规划键盘导航逻辑，并可能生成相应的 React 组件结构和 CSS-in-JS 样式代码。
介绍
这个 Skill 旨在解决前端开发者在构建用户界面时，如何系统性地应用设计原则，以创建既美观独特又具备良好可访问性的组件、页面或仪表盘。它关注于设计决策的落地，而不仅仅是视觉稿的生成。
使用时，你可以向 AI 描述你的界面需求（例如“设计一个数据看板的导航栏”），AI 会引导你考虑色彩搭配、字体层级、间距布局以及可访问性要求，并可能生成相应的 CSS 代码片段或设计令牌，帮助你快速实现设计意图。
它非常适合前端开发工程师、全栈开发者和 UI 设计师，尤其是那些需要将设计稿转化为高质量、可维护的前端代码，或希望在设计系统指导下进行开发的用户。
建议在项目初期或构建可复用组件库时使用，以便建立统一的设计语言。注意，它侧重于界面实现层面的设计指导，而非提供完整的视觉创意或品牌策略。
核心特点
与单纯生成 UI 代码的 Skill 不同，它强调“有意识的设计选择”，将可访问性、设计系统（如设计令牌）和布局原则深度融入前端开发流程，帮助开发者产出符合 WCAG 标准且风格统一的界面。
注意事项
不适合需要生成完整视觉设计稿、品牌标识或复杂交互动画的场景。
常见问题
这个 Skill 能直接生成设计图吗？
不能，它主要提供设计原则指导和代码实现，帮助你落地设计，而非生成视觉设计稿。
它能帮助我检查现有代码的可访问性问题吗？
它的核心是指导创建过程，虽然会考虑可访问性，但并非专门的代码审计工具。