frontend-design
通过精心设计的调色板、字体和布局，创建独特且可访问的前端界面。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：通过精心设计的调色板、字体和布局，创建独特且可访问的前端界面。 详细介绍见：https://321skill.com/skills/frontend-design-x-5/ 请根据该页面的说明完成安装。
使用示例
“我需要设计一个医疗健康类仪表盘的首页，要求界面清晰、专业，并确保色弱用户也能清晰辨识。”，它会首先提供一个包含主色、辅助色、字体层级的调色板，然后给出页面布局的结构建议，并最终生成一个符合可访问性标准的React组件骨架代码，重点标注出关键的颜色对比度和ARIA属性设置。
介绍
该技能旨在解决前端开发中界面设计缺乏系统性和一致性的问题，帮助开发者快速构建既美观又符合无障碍标准的用户界面。
使用时，你可以向AI描述你的界面需求（例如，构建一个数据仪表盘或登录页面），它会根据你的品牌调性或功能目标，提供包含色彩方案、字体搭配、间距布局等在内的完整设计建议和代码片段。
它非常适合前端开发、UI设计师以及需要快速产出高质量UI原型的产品经理或全栈开发者使用。
建议在项目早期或设计系统搭建阶段使用，以确保设计语言的一致性。注意，它侧重于视觉和布局层面的指导，对于复杂的交互逻辑或动画实现，可能需要结合其他技能或手动编码。
核心特点
该技能将可访问性（Accessibility）作为设计决策的核心考量，而非事后补充，确保生成的界面方案从一开始就符合WCAG等标准。同时，它强调“深思熟虑的（deliberate）”设计选择，提供的是基于设计原则的系统性方案，而非零散的样式代码。
注意事项
不适合需要高度定制化复杂交互或动态视觉效果的场景，也不直接处理后端数据逻辑。
常见问题
这个技能能直接生成可运行的React/Vue组件代码吗？
可以，它会根据你的设计需求生成包含样式和基础结构的组件代码片段，但复杂的业务逻辑需要你自行补充。
它能帮助我优化现有页面的可访问性吗？
可以，你可以提供现有页面代码或描述，它会针对色彩对比度、键盘导航、ARIA属性等方面给出具体的优化建议。