frontend-design
前端设计助手，构建美观可访问的UI
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：前端设计助手，构建美观可访问的UI 详细介绍见：https://321skill.com/skills/frontend-design-x-2/ 请根据该页面的说明完成安装。
使用示例
'帮我设计一个现代简约风格的仪表盘页面，主色调为科技蓝，使用非衬线字体，卡片布局，并确保文本对比度符合无障碍标准。' 它会输出一个包含卡片、图表占位、导航栏的响应式 HTML 页面，并附上语义化颜色变量和排版注释，方便你直接使用或进一步修改。
介绍
这个 Skill 主要解决前端开发过程中界面设计缺乏一致性和可访问性的问题。许多开发者虽然能写出功能代码，但在色彩搭配、排版层次、布局节奏上容易凭直觉，导致界面风格不统一、用户体验差。本 Skill 提供了一套系统化的设计决策框架，帮助你在构建 UI 组件、页面、仪表盘时，有意识地选择调色板、字体和布局，从而产出更专业、更易用的界面。
使用方法很简单：在需要设计前端界面时，直接对 AI 描述你的需求，比如“设计一个深色模式的数据看板，使用蓝色系，卡片式布局”，AI 会基于你提供的场景和偏好，生成符合设计原则的 HTML/CSS 代码，并附带可访问性标注。你还可以指定风格（如极简、现代、圆润）或品牌色，AI 会自动调整语义化颜色和对比度。
适合前端开发者、UI 设计师、全栈工程师以及需要快速搭建原型的产品经理。无论你是从零开始一个新项目，还是优化现有页面的视觉一致性，这个 Skill 都能减少你在设计决策上的反复试错，尤其适合那些希望提升界面审美但缺乏专业设计背景的开发者。
使用建议：最好先明确你的设计目标（如品牌色、目标用户群体），并善用调色板与排版参数的组合。注意，本 Skill 侧重于视觉层，不处理复杂的交互逻辑或后端数据绑定。对于高度定制化的动效或特殊布局，可能需要额外的手动调整。
核心特点
与同类前端设计 Skill 相比，它强调“有意识的设计选择”——不只是生成代码，而是让 AI 在调色板、排版、布局三个维度上给出解释和替代方案，帮助开发者理解设计决策背后的逻辑，而不仅仅是复制粘贴。
注意事项
不适合需要复杂交互逻辑、后端数据绑定或高度定制动效的场景，也不适合替代专业 UI 设计师进行品牌系统设计。
常见问题
如何安装这个 Skill？
可以通过 npm install frontend-design 安装，或在支持自定义 Skill 的 AI 工具中导入提示词文件。
支持哪些颜色主题？
支持自定义品牌色、深色模式、浅色模式，以及 WCAG 无障碍对比度标准。