frontend-design
创建独特、可访问的前端界面
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：创建独特、可访问的前端界面 详细介绍见：https://321skill.com/skills/frontend-design-x-8/ 请根据该页面的说明完成安装。
使用示例
'帮我设计一个用户仪表盘页面，使用深色主题，确保符合WCAG 2.1 AA标准'，它会生成包含调色板、字体选择和布局的HTML/CSS代码，并附带可访问性注释。或者
对AI说：'将这个React组件改成更现代的风格，保持原有可访问性'，它会在保留焦点样式和语义化标签的前提下调整视觉样式。
介绍
前端开发中，UI设计往往面临两难：既要视觉独特吸引用户，又要保证可访问性符合标准，还要兼顾开发效率。这个Skill正是为了解决这一矛盾而设计——它帮助你在构建组件、页面或仪表盘时，有意识地选择调色板、字体和布局，确保最终产出既美观又无障碍。
使用时，只需描述你的界面需求（如’设计一个深色主题的管理后台首页’），它会生成包含完整样式方案的HTML/CSS代码，并自动标注可访问性要点（如对比度、焦点样式、语义化标签）。你还可以要求针对特定框架（React、Vue等）输出组件代码，或根据品牌色板生成配套设计令牌。
适合前端开发、UI设计师、全栈开发等角色，尤其适合需要快速产出高质量UI原型或维护设计系统的场景。对于注重设计规范和无障碍合规的团队，这个Skill能显著减少审查和返工成本。
建议配合设计系统文档使用，并在生成后手动验证极端情况下的可访问性。注意它不擅长处理复杂动画或3D渲染，也不适合需要高度定制化插画的场景。
核心特点
与其他前端设计Skill相比，它强制要求'有意的设计决策'——每次输出都会明确说明调色板、字体和布局的选择理由，并默认嵌入WCAG 2.1 AA级可访问性检查，而非仅生成视觉样式。
注意事项
不适合需要复杂动画、3D渲染或高度定制化插画的场景。
常见问题
这个Skill能直接生成完整的网页应用吗？
它专注于前端界面的样式和可访问性，不包含后端逻辑或交互功能，需要与其他Skill配合使用。
支持哪些前端框架？
支持React、Vue、Angular等主流框架，也可以输出纯HTML/CSS，具体可在描述中指定。