frontend-design
Diseña interfaces frontend distintivas
Una salida de UI genérica hace que los productos parezcan inacabados y difíciles de confiar. Esta skill guía a Claude, Codex y Claude Code hacia un trabajo frontend pulido con una dirección visual más sólida.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/7spade-frontend-design.md and its manifest at https://skillstore.io/api/skills/7spade-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"frontend-design" 사용 중입니다. Un dashboard de analítica SaaS debe sentirse premium y útil para el monitoreo diario.
예상 결과:
Un concepto de dashboard responsive con navegación enfocada, paneles de datos compactos, tipografía sólida, acentos de color controlados y estados hover prácticos.
"frontend-design" 사용 중입니다. Una landing page para una herramienta creativa se siente demasiado genérica.
예상 결과:
Una dirección de página revisada con un tema visual más sólido, composición más audaz, tipografía con carácter, señales de movimiento y secciones de conversión más claras.
"frontend-design" 사용 중입니다. Un componente React necesita mejor estilizado y microinteracciones.
예상 결과:
Un tratamiento de componente con espaciado refinado, estados con propósito, objetivos de contraste accesibles y elecciones de animación que apoyan la interacción.
보안 감사
안전All three static findings are false positives caused by design-focused wording in SKILL.md. I found no prompt injection, exfiltration intent, external command use, network behavior, or unsafe filesystem behavior in the reviewed skill files.
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/7spade-frontend-design/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/7spade-frontend-design?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/7spade-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/7spade-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/7spade-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 인용
7Spade. (2026). frontend-design security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-frontend-design/audits/6BibTeX 인용
@techreport{7spade-7spade-frontend-design-2026,
author = {7Spade},
title = {frontend-design security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/7spade-frontend-design/audits/6},
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 6)"
version: "unspecified"
type: report
authors:
- name: "7Spade"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/7spade-frontend-design/audits/6"
identifiers:
- type: other
value: "skillstore:7spade-frontend-design:audit:6"
description: "Skillstore immutable audit report identifier"
변형 비교
설치 가능한 변형 18개각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.
이 변형이 1위인 이유
atman36-frontend-design
2026-10-25
zhanlincui-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-10-21
cesaraugustusgrob-frontend-design
2026-09-09
anthropics-frontend-design
2026-10-24
agentworkforce-frontend-design
2026-10-22
dennisliuck-frontend-design
2026-09-09
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음만들 수 있는 것
Crear un dashboard de producto
Convierte requisitos aproximados de un dashboard en una interfaz pulida con una jerarquía, diseño y detalles de interacción más sólidos.
Mejorar una landing page
Refina una página de marketing para que el diseño, la tipografía, el movimiento y el tono visual se sientan más intencionales.
Estilizar componentes de aplicación
Aplica una dirección visual distintiva a los componentes mientras mantienes la implementación práctica para el desarrollo frontend.
이 프롬프트를 사용해 보세요
Usa la skill frontend-design para crear una página web pulida para [product or topic]. Incluye HTML y CSS responsive con una dirección visual clara.
Usa la skill frontend-design para mejorar esta interfaz: [paste description]. Mantén intacto el flujo de trabajo, pero mejora el diseño, la tipografía, el color y los detalles.
Usa la skill frontend-design para diseñar un dashboard para [users]. Incluye estados clave, diseño responsive, jerarquía y detalles de interacción para uso repetido.
Usa la skill frontend-design para definir e implementar una dirección frontend distintiva para [product]. Proporciona componentes, reglas de layout, orientación de movimiento y justificación de estilizado.
모범 사례
- Proporciona la audiencia, el contexto del producto, el stack técnico y el tono deseado antes de pedir la implementación.
- Solicita estados responsive, estados vacíos, estados de carga y detalles de interacción al crear UI de aplicación.
- Revisa la accesibilidad, el rendimiento y el ajuste con la marca antes de usar código frontend generado en producción.
피하기
- No pidas solo un diseño bonito sin explicar el producto o los usuarios.
- No aceptes animación pesada ni efectos visuales cuando la interfaz necesita velocidad y claridad.
- No trates el estilizado generado como sustituto de las pruebas de accesibilidad y navegadores.