技能 frontend-aesthetics
📦
frontend-aesthetics
内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问
改进前端视觉设计
通用前端界面往往看起来相似，并且缺少品牌焦点。此技能会指导排版、色彩、动效和层次深度选择，以打造更清晰的界面。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "frontend-aesthetics" from https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics.md and its manifest at https://skillstore.io/api/skills/barnhardt-enterprises-inc-frontend-aesthetics/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“frontend-aesthetics”。 评审一个使用默认字体、紫到蓝渐变和居中内容的落地页。
预期结果:
- 使用更有辨识度的标题字体，同时保持正文字体高度可读。
- 将大量渐变的强调色处理替换为一个品牌强调色和克制的阴影。
- 通过非对称对齐和更清晰的区块层级创建更强的布局节奏。
正在使用“frontend-aesthetics”。 规划一个用于项目监控的深色仪表盘。
预期结果:
- 使用近黑色基底，并为卡片和表格设置略微抬升的表面。
- 将主强调色保留给激活状态、主要操作和重要指标。
- 添加细腻的悬停过渡、加载状态和数据更新反馈。
正在使用“frontend-aesthetics”。 改进一个感觉不一致的组件库。
预期结果:
- 统一图标描边样式、圆角半径、边框透明度和焦点状态。
- 为主要、次要、破坏性和禁用操作分别定义不同处理方式。
- 检查表单是否具备持久标签、具体的验证消息和可读的对比度。
安全审计
安全v8 • 2026/7/6 打开版本化报告
The flagged external command findings are Markdown fences, inline formatting, or frontend template examples, not executable shell commands. The flagged network findings are public reference links, and the blocker findings are design guidance, not reconnaissance. No prompt injection attempt or malicious semantic intent was found.
3
已扫描文件
1,084
分析行数
0
复核项
0
已忽略误报
风险因素
⚙️ 外部命令 (27)
motion-patterns.md:129-134 SKILL.md:48-62 SKILL.md:62-65 SKILL.md:65-73 SKILL.md:73-76 SKILL.md:76-85 SKILL.md:85-96 SKILL.md:96-118 SKILL.md:118-129 SKILL.md:129-142 SKILL.md:142-145 SKILL.md:145-170 SKILL.md:170-177 SKILL.md:177-201 SKILL.md:201-210 SKILL.md:210 SKILL.md:221-235 SKILL.md:235-238 SKILL.md:238-253 SKILL.md:253-256 SKILL.md:256-276 SKILL.md:276-292 SKILL.md:292-293 SKILL.md:293-294 SKILL.md:294-299 SKILL.md:299-300 SKILL.md:300
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/barnhardt-enterprises-inc-frontend-aesthetics/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/barnhardt-enterprises-inc-frontend-aesthetics.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
Barnhardt-Enterprises-Inc. (2026). frontend-aesthetics security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8BibTeX 引用
@techreport{barnhardt-enterprises-inc-barnhardt-enterprises-inc-frontend-aesthetics-2026,
author = {Barnhardt-Enterprises-Inc},
title = {frontend-aesthetics security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-aesthetics security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Barnhardt-Enterprises-Inc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8"
identifiers:
- type: other
value: "skillstore:barnhardt-enterprises-inc-frontend-aesthetics:audit:8"
description: "Skillstore immutable audit report identifier"
比较变体
2 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
Skillstore 评分最高
作者 / 来源 Skillstore 评分 证据置信度 Skillstore 使用量 已更新
barnhardt-enterprises-inc-frontend-aesthetics
Skillstore 评分 79
证据置信度 高
Skillstore 使用量 124
已更新
2026-09-09
crossbill-highlights-frontend-aesthetics
Skillstore 评分 78
证据置信度 高
Skillstore 使用量 26
已更新
2026-09-09
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
72
社区
91
规范符合性
你能构建什么
打磨产品仪表盘
改进仪表盘界面的数据密度、视觉层级、深色表面、悬停状态和状态指示器。
评审落地页方向
找出通用的视觉选择，并用更有表现力的排版、聚焦的强调色和有用的动效替代它们。
构建品牌化 UI Kit
为字体、颜色、组件、图标、背景和交互状态创建实用规则。
试试这些提示
刷新简单页面
使用 frontend-aesthetics 技能改进此页面。重点关注排版、一个强调色、背景层次深度和清晰的视觉层级。
评审现有界面
审查此界面中的通用视觉模式。列出在字体、颜色、间距、动效和组件方面影响最大的设计改动。
设计仪表盘系统
使用此技能创建仪表盘视觉系统。定义排版、深色表面、强调色用法、表格样式、状态徽章和动效状态。
创建品牌专属方向
使用该技能为此品牌创建有辨识度的前端方向。解释视觉理由，并为关键界面提供实现指导。
最佳实践
- 选择一个主强调色，并仅在清晰表达状态含义时使用语义颜色。
- 为标题使用有辨识度的排版，同时保持正文可读且无障碍。
- 为状态变化、加载、悬停反馈和页面转场添加有目的的动效。
避免
- 避免将默认字体栈作为精致界面的主要品牌表达。
- 避免紫蓝渐变、彩虹强调色，以及在同一屏幕上使用多个主按钮。
- 避免扁平的深色背景、深色表面上的白色卡片，以及含糊的表单错误消息。
常见问题
此技能改进什么？
它可以改进前端页面、仪表盘、品牌化组件和界面评审的视觉方向。
它会生成完整的应用代码吗？
不会。它提供设计指导和实现模式，智能体可以在构建 UI 时应用这些内容。
哪些工具可以使用此技能？
报告列出了对 Claude、Codex 和 Claude Code 的支持。
它需要互联网访问吗？
不需要。它包含参考链接，但核心指导包含在技能文件中。
它只适用于深色主题吗？
不是。它强调真正的深色示例，但这些原则同样适用于浅色品牌化界面。
它能取代人类设计师吗？
不能。它帮助智能体避免通用选择，但产品语境和品牌判断仍然重要。
开发者详情
许可证
MIT
Skillstore 修订
r1
版本提示
作者未声明版本。
引用
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
维护新鲜度
2026/7/18
使用量
28 次下载 · 323 次浏览
文件结构