frontend-design
快速构建可访问的独特前端界面
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：快速构建可访问的独特前端界面 详细介绍见：https://321skill.com/skills/frontend-design-x-7/ 请根据该页面的说明完成安装。
使用示例
'创建一个带搜索框的仪表盘页面，使用本 Skill 的调色板，确保按钮和输入框的对比度符合 WCAG AA 标准。' 它会自动生成包含 CSS 变量和布局的 HTML/React 代码，并标注可访问性注释。
介绍
解决什么问题
前端开发中，设计师或开发者常面临配色、排版、布局难以统一且缺乏可访问性（无障碍）的痛点。本 Skill 提供了一套经过深思熟虑的调色板、字体系统和布局规则，帮助你在构建 UI 组件、页面、仪表盘时，快速输出兼具美观与无障碍合规的界面，避免从头设计或频繁调整样式。
怎么用
安装后，你可以在项目中直接引用预定义的 CSS 变量、设计令牌（Design Tokens）或组件样式。例如，在 React 组件中导入颜色变量和间距规则，自动应用对比度满足 WCAG AA 标准的按钮、表单和卡片。支持通过修改配置来覆盖默认主题，适配品牌需求。
适合谁
主要面向前端开发工程师、UI 设计师和全栈开发者，尤其是那些需要快速搭建原型或交付产品级 UI 的人员。也适合在团队中统一设计规范、减少样式沟通成本。
使用建议或注意事项
建议在项目初期即引入本 Skill，避免后期大规模重构样式。注意：本 Skill 不包含具体业务组件逻辑（如表格、图表），仅提供基础样式和可访问性保障。对于复杂动效或高度定制化的视觉创新，可能需要额外补充。
核心特点
同类 Skill 多聚焦于单一库（如 Tailwind），本 Skill 独立于框架，提供一套完整的、可覆盖可访问性标准的调色板+排版+布局系统，开箱即用且容易定制。
注意事项
不适合需要高度定制化视觉品牌或复杂动效的场景，也不包含业务组件逻辑。
常见问题
这个 Skill 是否支持自定义主题？
支持，你可以通过覆盖 CSS 变量或配置设计令牌来修改颜色、字体等。
需要安装额外的依赖库吗？
不需要，本 Skill 独立运行，无需外部依赖，可直接在项目中引入。