Skill 多语言阅读指南
frontend-design用途、用法与原始来源
创建具有独特性、生产级且设计质量高的前端界面。当用户要求构建 Web 组件、页面、作品、海报或应用程序时（例如网站、落地页、仪表盘、React 组件等），请运用此技能。HTML/CSS布局，或者当styling/beautifying适用于任何网页用户界面）。生成富有创意、精良的代码和用户界面设计，避免千篇一律的AI美学。
原文采集时间:
- SKILL.md
.agents/skills/frontend-design/SKILL.md- 仓库 Star
- 5,871
- 仓库最近更新
- 2026/08/29
- 能力分类
- 设计
- 最近采集时间
许可：MIT
流程片段用于帮助阅读上游说明。本页没有执行第三方 Skill，不属于实测评测。
下面的用途和操作片段来自上游文档，由本站整理并翻译，和另行标注的 Codez 编辑分析分开展示。
这个 Skill 能做什么
创建具有独特性、生产级且设计质量高的前端界面。当用户要求构建 Web 组件、页面、作品、海报或应用程序时（例如网站、落地页、仪表盘、React 组件等），请运用此技能。HTML/CSS布局，或者当styling/beautifying适用于任何网页用户界面）。生成富有创意、精良的代码和用户界面设计，避免千篇一律的AI美学。
如何使用：上游操作流程
概述
这项技能指导创建独具特色、达到生产级别的界面，避免千篇一律的“AI垃圾”美学。编写实际可用的代码，并格外注重美学细节和创意选择。用户提供前端需求：需要构建的组件、页面、应用程序或界面。需求可能包含有关用途、受众或技术限制的背景信息。
原文片段 · L6 ↗前端美学指南
字体：选择美观、独特且引人注目的字体。避免使用 Arial 和 Inter 等通用字体；相反，选择能够提升前端美感的独特字体；选择出人意料、个性鲜明的字体。将醒目的标题字体与精致的正文字体搭配使用。颜色与主题：坚持统一的美学风格。使用 CSS 变量来保持一致性。醒目的主色调搭配鲜明的强调色比平淡均匀的配色方案效果更佳。
原文片段 · L26 ↗环境与依赖
本次未从该文件选出独立的环境要求片段，不代表无需依赖。请继续核对仓库的安装说明和引用文件。
限制与结果检查
本次未从该文件选出独立的限制片段，不代表适用于所有输入或环境。请阅读完整原文，并自行验证实际结果。
开始使用前
- 先核对支持的 Agent 宿主和仓库安装说明。保留完整 Skill 目录及其引用的脚本、资源和文档，只复制 SKILL.md 可能漏掉依赖。
- 向 Agent 提供实际输入、期望输出和验收标准。调用方式与可用工具取决于宿主环境，本站不假定存在通用的安装命令。
- 先在临时项目或输入副本上试用。涉及修改文件、远程服务或计费资源的操作，应逐项核对后再授权。
- 按照原文检查项和自己的需求验证输出。成功触发或仓库 Star 较高，都不能证明结果正确。
继续阅读原始文档
相关 Skill
翻译与介绍范围
本页从固定版本的上游 SKILL.md 整理用途与操作片段，译文使用辅助翻译。它不是完整手册，也不代表经过兼容性实测；使用前请核对原文及其引用文件。
介绍依据下方列出的固定版本；当前仓库动态和目录采集时间单独展示。
- 固定版本来源
- 阅读原文 ↗
- 原文采集时间
- 来源提交版本
cf865e94de7729751c747171785b6ce57e7b178c- 原文 SHA-256
1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873