frontend-design
打造独特且无障碍的前端界面
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：打造独特且无障碍的前端界面 详细介绍见：https://321skill.com/skills/frontend-design-x-6/ 请根据该页面的说明完成安装。
使用示例
'我需要一个博客文章卡片组件，包含标题、摘要、日期和阅读更多按钮，风格要现代简约，主色为蓝色系，字体用无衬线字体。' 它会生成一段完整的HTML结构及对应的CSS样式，并确保色彩对比度符合无障碍标准，同时提供响应式布局支持。
介绍
本技能帮助你在构建前端界面时，系统地处理调色板、字体和布局，确保最终产品既美观又具备无障碍性。它解决的是从零开始设计UI时容易出现的风格不统一、可访问性不足的问题，让你有意识地做出每一个设计决策。 使用方式非常直接：你只需描述需要的组件或页面类型，比如“创建一个包含表单和按钮的卡片组件”，技能就会自动生成符合你设定风格（如调色板、字体、间距）的HTML/CSS代码。你也可以在现有项目中应用，通过调整令牌来快速迭代设计。 适合前端开发者、UI设计师、全栈开发人员，特别是那些需要快速构建原型或统一产品视觉风格的人。如果你正在做一个仪表盘、管理后台或任何需要一致视觉语言的Web应用，这个技能能显著提升效率。 建议在使用前先明确你的设计系统基础（如主色、字体堆栈、网格系统），技能会基于这些参数输出代码。同时注意，它专注于视觉层面，复杂的交互逻辑仍需手动编写。
核心特点
与同类技能相比，它强调在生成代码时对调色板、字体和布局进行有意识的选择，而非随机组合，且内置了可访问性（无障碍）检查，确保输出符合WCAG标准。
注意事项
不适合处理后端逻辑、复杂状态管理或需要大量自定义JavaScript交互的页面。
常见问题
如何快速生成一个响应式导航栏？
直接描述你的需求，比如“生成一个深色主题的响应式导航栏，包含Logo和三个菜单项”，技能会输出对应的HTML/CSS代码。
这个技能支持自定义颜色吗？
支持，你可以指定调色板（如主色、辅助色、中性色），技能会据此生成和谐的配色方案。