frontend-design
用设计思维打造可访问的前端界面
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：用设计思维打造可访问的前端界面 详细介绍见：https://321skill.com/skills/frontend-design-x-4/ 请根据该页面的说明完成安装。
使用示例
'为我公司的数据仪容盘设计一个深色主题的UI，主色调为蓝色，确保按钮和文字的对比度满足无障碍标准。' 它会生成一段包含完整HTML/CSS的代码，包括侧边栏、图表容器、卡片组件，并在每个区块的注释中说明配色和排版的选择依据。
介绍
这个 Skill 解决的是前端开发中「界面好看但不好用」或「可用但缺乏个性」的典型矛盾。它帮助你在构建 UI 组件、页面或仪表盘时，系统性地完成调色板选择、排版搭配、布局决策，并确保最终产出符合无障碍标准（WCAG）。你不需要在设计工具和代码之间来回切换，AI 会直接生成带有设计考量的 HTML/CSS 或 React 代码。
使用方式很简单：你可以描述你想要的界面风格（如「深色主题的数据看板」「清新风格的注册表单」），也可以指定具体的品牌色或字体偏好。Skill 会基于你的描述，自动生成带有语义化标签、高对比度配色、响应式布局的前端代码片段，并在代码注释中解释设计决策的原因。
适合前端开发、UI 设计师、全栈工程师，以及需要快速产出原型或页面的产品经理。如果你正在做设计系统、品牌官网、内部工具界面，或者需要为现有项目补充可访问性优化，这个 Skill 会很顺手。
建议在需求明确时使用，例如知道页面的大致结构或功能。如果对设计方向完全没想法，可以先给 AI 一个参考链接或图片描述。另外，生成的代码需要你根据实际项目框架（如 React/Vue）做适配，因为 Skill 输出的是纯 HTML/CSS 或通用组件。</限制>
核心特点
同类 Skill 通常只生成代码，而这个 Skill 会在生成前主动询问或推导出调色板、排版和布局的「设计原则」，并在代码中通过注释固化这些决策，让最终界面既独特又符合无障碍标准。
注意事项
不适合需要复杂交互逻辑（如动画循环、多步表单状态管理）或后端数据绑定的完整页面。
常见问题
怎么让生成的界面符合品牌色？
在描述中直接给出品牌色值（如 #2B6CB0）或上传 Logo 图片，AI 会自动提取主色并生成配色方案。
支持 WCAG 2.1 AA 标准吗？
支持，生成时默认采用高对比度配色（至少 4.5:1），并为非文本内容提供替代文本。