技能 designing-frontend
📦
designing-frontend
内容修订 r1 安全
设计独具特色的前端界面
通用界面会让产品显得千篇一律。此技能可引导 Claude、Codex 和 Claude Code 朝着明确的视觉方向、精致的代码和验证流程推进。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "designing-frontend" from https://skillstore.io/skills/byunk-designing-frontend.md and its manifest at https://skillstore.io/api/skills/byunk-designing-frontend/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“designing-frontend”。 对独具特色的分析仪表盘的请求。
预期结果:
一个聚焦的仪表盘概念，包含特定领域的排版、结构化密度、克制的动效，以及响应式生产界面指导。
正在使用“designing-frontend”。 一个感觉通用的普通注册页面。
预期结果:
重新设计的注册流程，具有更强的视觉层级、有目的的色彩、精致的悬停状态和可访问性检查。
正在使用“designing-frontend”。 面向创意工具的新产品页面。
预期结果:
一个大胆的页面方向，包含富有表现力的字体、上下文相关的视觉效果、交互细节和实现优先级。
安全审计
安全v9 • 2026/7/23 打开版本化报告
All four static alerts are false positives caused by ordinary visual design language in SKILL.md. No system reconnaissance, prompt injection, or other malicious intent was found.
1
已扫描文件
61
分析行数
0
复核项
0
已忽略误报
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/byunk-designing-frontend/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/byunk-designing-frontend/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/byunk-designing-frontend.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 引用
Byunk. (2026). designing-frontend security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/byunk-designing-frontend/audits/9BibTeX 引用
@techreport{byunk-byunk-designing-frontend-2026,
author = {Byunk},
title = {designing-frontend security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/byunk-designing-frontend/audits/9},
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: "designing-frontend security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "Byunk"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/byunk-designing-frontend/audits/9"
identifiers:
- type: other
value: "skillstore:byunk-designing-frontend:audit:9"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
70
社区
91
规范符合性
你能构建什么
构建产品仪表盘
创建一个精致的仪表盘，使其符合产品领域，并避免通用 SaaS 风格。
刷新营销页面
通过更强的层级、动效和视觉质感，将普通页面转化为令人印象深刻的 Web 体验。
原型设计新的应用界面
在转换为生产级前端代码之前，探索明确的美学方向。
试试这些提示
创建落地页区块
使用 designing-frontend skill 为金融应用创建一个落地页区块。让它具有辨识度、可访问，并达到生产就绪状态。
改进现有组件
使用 designing-frontend skill 重新设计此组件。保留数据模型，改进层级、动效、色彩和响应式行为。
设计完整界面
使用 designing-frontend skill 构建完整的入门引导界面。定义美学方向，实现界面，并验证可访问性。
创建特定领域的系统
使用 designing-frontend skill 为医疗分析工具创建视觉系统。包括布局规则、组件、状态和验证说明。
最佳实践
- 在请求实现之前，提供产品领域、受众、框架和可访问性要求。
- 在首次构建后，请求验证层级、响应式表现、交互和可访问性。
- 当品牌或用户预期已知时，请求明确的美学方向。
避免
- 不要在缺少领域上下文的情况下要求通用的现代设计。
- 在添加动画、对比度或高密度布局时，不要跳过可访问性检查。
- 不要在无关项目中重复使用相同的字体、渐变和布局模式。
常见问题
此技能会编写前端代码吗？
是。它会引导模型编写生产级 HTML、CSS、JavaScript、React、Vue 或类似的前端代码。
它包含现成的设计资产吗？
否。它提供设计和实现指导，但不打包字体、图片或模板。
它能帮助提升可访问性吗？
是。该工作流在验证过程中包含可访问性校验，尤其针对交互、对比度和层级。
它只适用于落地页吗？
否。它适用于组件、页面、应用界面和完整的前端体验。
哪些工具支持此技能？
报告列出了对 Claude、Codex 和 Claude Code 的支持。
用户应提供哪些上下文？
提供受众、目的、框架、品牌约束、可访问性需求，以及需要避免的风格示例。