frontend-design
构建独特的前端界面
通用 AI 界面往往看起来重复且未完成。此技能可引导 Claude、Codex 和 Claude Code 完成更精致的前端工作，并提供清晰的视觉方向。
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/yyh211-frontend-design.md and its manifest at https://skillstore.io/api/skills/yyh211-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“frontend-design”。 面向工作流自动化产品的 SaaS 落地页。
预期结果:
一个响应式页面概念，包含大胆的 hero 区域、不对称的区块布局、聚焦的行动号召以及可访问的视觉层级。
正在使用“frontend-design”。 一个感觉过于普通的深色分析仪表盘。
预期结果:
一个更精致的仪表盘方向，包含更紧凑的信息分组、更清晰的卡片、克制的动效和更强的图表对比度。
正在使用“frontend-design”。 一组用于自定义组件库的按钮。
预期结果:
一个按钮系统，覆盖主要、次要、文本、加载、禁用、悬停和聚焦状态，并具备一致的视觉规则。
安全审计
安全All static findings were adjudicated as false positives. The external command alerts matched Markdown backticks and inline code, while the blocker and entropy alerts matched readable frontend guidance. No prompt injection, data exfiltration intent, or executable installer logic was found.
风险因素
⚙️ 外部命令 (19)
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/yyh211-frontend-design/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/yyh211-frontend-design?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/yyh211-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/yyh211-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/yyh211-frontend-design.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 引用
YYH211. (2026). frontend-design security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/yyh211-frontend-design/audits/7BibTeX 引用
@techreport{yyh211-yyh211-frontend-design-2026,
author = {YYH211},
title = {frontend-design security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/yyh211-frontend-design/audits/7},
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-design security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "YYH211"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/yyh211-frontend-design/audits/7"
identifiers:
- type: other
value: "skillstore:yyh211-frontend-design:audit:7"
description: "Skillstore immutable audit report identifier"
比较变体
18 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
atman36-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-09-09
cesaraugustusgrob-frontend-design
2026-09-09
agentworkforce-frontend-design
2026-09-09
Skillstore 评分
评分依据 证据置信度: 高你能构建什么
创建产品落地页
将产品概念转化为独特的响应式页面，具备强有力的排版、布局和以转化为导向的页面区块。
改进内部仪表盘
通过更清晰的视觉层级、可用的间距、可访问的对比度和聚焦的交互细节，刷新数据密集型界面。
构建自定义 Web 组件
设计可复用的按钮、卡片、面板和状态，避免默认框架样式，并呈现出有意图的设计感。
试试这些提示
为我的产品设计并构建一个响应式落地页。选择一个强有力的视觉方向，并在实现前解释关键设计选择。
重新设计这个组件，让它更具辨识度并达到生产可用水平。改进排版、间距、状态、动效和可访问性。
为这些工作流创建一个精致的仪表盘界面。优先考虑扫读、对比、响应式布局和清晰的数据层级。
为一个小型组件系统创建前端设计方向。定义排版、色彩、间距、动效、状态和使用规则。
最佳实践
- 在请求实现前，提供产品目标、目标用户和技术栈。
- 在同一个请求中说明可访问性、响应式行为和交互状态需求。
- 根据你的品牌规则和现有组件模式审查生成的设计。
避免
- 不要在缺少产品上下文的情况下要求通用的现代设计。
- 不要接受会削弱可读性或键盘访问能力的视觉润色。
- 如果未说明约束，不要将此指导与严格的设计系统混用。