스킬 frontend-design

📦

frontend-design

Name: frontend-design
Author: anthropics

콘텐츠 리비전 r2 안전

Crear interfaces frontend distintivas

El trabajo de frontend puede parecer genérico cuando las decisiones de diseño son vagas. Esta skill guía a Claude, Codex y Claude Code para crear interfaces pulidas con tipografía, maquetación, color y movimiento más sólidos.

지원: Claude Codex Code(CC)

🥉 78 브론즈

Maintain this Skill? Claim it 🥉 78 브론즈

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청

Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/anthropics-frontend-design.md and its manifest at https://skillstore.io/api/skills/anthropics-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/anthropics-frontend-design.md 서명된 manifest GET /api/skills/anthropics-frontend-design/manifest 서명된 lockfile GET /api/skills/anthropics-frontend-design/lockfile

테스트해 보기

"frontend-design" 사용 중입니다. Crea un dashboard para un equipo de logística que rastrea envíos retrasados.

예상 결과:

Un concepto de dashboard funcional con tablas de estado densas, estados de alerta, colores sobrios y pulido de interacción para operaciones diarias.

"frontend-design" 사용 중입니다. Crea una página de lanzamiento para una nueva herramienta de edición de audio.

예상 결과:

Una página de lanzamiento distintiva con tipografía potente, ritmo visual inspirado en audio, llamadas a la acción claras y movimiento refinado.

"frontend-design" 사용 중입니다. Rediseña una tarjeta de precios para una herramienta de desarrolladores.

예상 결과:

Un componente de precios más definido con jerarquía mejorada, mayor claridad en la comparación de planes, estados hover y un tono de producto más específico.

보안 감사

안전

v9 • 2026. 7. 23. 버전별 보고서 열기

All three static findings are false positives caused by ordinary frontend design guidance. The skill contains no system reconnaissance, prompt injection, data exfiltration, or other malicious intent.

스캔된 파일

분석된 줄 수

검토 항목

오탐 무시됨

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: codex 감사 이력 보기 →

이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/anthropics-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/anthropics-frontend-design/security.svg)](https://skillstore.io/skills/anthropics-frontend-design?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/anthropics-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/anthropics-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/anthropics-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 인용

anthropics. (2026). frontend-design security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/anthropics-frontend-design/audits/9

BibTeX 인용

@techreport{anthropics-anthropics-frontend-design-2026,
  author = {anthropics},
  title = {frontend-design security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/anthropics-frontend-design/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: "frontend-design security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "anthropics"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/anthropics-frontend-design/audits/9"
identifiers:
  - type: other
    value: "skillstore:anthropics-frontend-design:audit:9"
    description: "Skillstore immutable audit report identifier"

변형 비교

설치 가능한 변형 18개

각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.

이 변형이 1위인 이유

Skillstore 점수가 가장 높음

작성자 / 소스 Skillstore 점수 증거 신뢰도 Skillstore 사용량 업데이트됨

AI-Vibe-Prompts 권장

atman36-frontend-design

Skillstore 점수 81

증거 신뢰도 높음

Skillstore 사용량 50

업데이트됨

2026-10-25

anthropics

frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 478

업데이트됨

2026-09-09

ZhanlinCui

zhanlincui-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 376

업데이트됨

2026-09-09

YYH211

yyh211-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 214

업데이트됨

2026-09-09

1bertogit

1bertogit-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 198

업데이트됨

2026-10-13

92Bilal26

92bilal26-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 31

업데이트됨

2026-10-19

am-will

am-will-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 26

업데이트됨

2026-10-23

AdamAugustinsky

adamaugustinsky-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 25

업데이트됨

2026-10-21

Azeem-2

azeem-2-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 24

업데이트됨

2026-09-09

CesarAugustusGroB

cesaraugustusgrob-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 20

업데이트됨

2026-09-09

davila7

davila7-frontend-design

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 15

업데이트됨

2026-09-09

anthropics 현재

anthropics-frontend-design

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 140

업데이트됨

2026-10-24

pbakaus

pbakaus-frontend-design

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 93

업데이트됨

2026-09-09

7Spade

7spade-frontend-design

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 52

업데이트됨

2026-10-18

sickn33

sickn33-frontend-design

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 31

업데이트됨

2026-09-09

AgentWorkforce

agentworkforce-frontend-design

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 24

업데이트됨

2026-10-22

AJV009

ajv009-frontend-design

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 18

업데이트됨

2026-10-22

DennisLiuCk

dennisliuck-frontend-design

Skillstore 점수 76

증거 신뢰도 높음

Skillstore 사용량 11

업데이트됨

2026-09-09

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

Dirección para página de producto

Crear una página de producto memorable con un punto de vista visual claro y detalles de interacción pulidos.

Construcción de interfaz de aplicación

Guiar la implementación de una pantalla funcional de app con decisiones cohesivas de maquetación, tema y movimiento.

Diferenciación de prototipo

Convertir una idea inicial en un prototipo distintivo que evite patrones de página genéricos.

이 프롬프트를 사용해 보세요

Crear una página simple

Crea una página web pulida para este producto: [describe product]. Elige una dirección estética clara e implementa la pantalla principal.

Rediseñar un componente

Rediseña este componente para [audience]. Mantén la misma función, pero mejora la tipografía, el espaciado, el color, el movimiento y la jerarquía visual.

Crear una vista de app

Diseña e implementa una vista de app para [workflow]. Incluye estados realistas, información densa cuando sea necesario y detalles de interacción cohesivos.

Definir una dirección de diseño

Crea un concepto frontend para [brand or product]. Define la dirección estética y luego implementa una interfaz funcional que demuestre esa dirección.

모범 사례

Proporciona la audiencia, el propósito del producto y el stack técnico antes de pedir la implementación.
Pide estados de interacción reales, incluidos carga, vacío, error, hover y comportamiento responsive.
Revisa la accesibilidad, el rendimiento y la compatibilidad con navegadores después de implementar la dirección visual.

피하기

No solicites una landing page moderna genérica sin contexto del producto.
No dependas de efectos decorativos cuando el flujo de trabajo principal no está claro.
No omitas las pruebas de maquetación móvil, contraste y acceso con teclado.

자주 묻는 질문

¿Qué ayuda a crear esta skill?

Ayuda a crear páginas frontend, componentes e interfaces de aplicación distintivos con una dirección visual más sólida.

¿Qué herramientas pueden usar esta skill?

El informe enumera soporte para Claude, Codex y Claude Code.

¿Genera código funcional?

Sí. La skill indica al asistente que implemente código frontend funcional para la interfaz solicitada.

¿Elige un estilo de diseño?

Sí. Pide al asistente comprometerse con una dirección estética clara antes de codificar.

¿Está limitada a un solo framework?

No. La skill menciona HTML, CSS, JavaScript, React, Vue y opciones frontend similares.

¿Qué deben proporcionar los usuarios para obtener los mejores resultados?

Los usuarios deben proporcionar el propósito del producto, la audiencia objetivo, las restricciones técnicas y cualquier flujo de trabajo requerido.

개발자 세부 정보

작성자

anthropics

라이선스

Complete terms in LICENSE.txt

Skillstore 리비전

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/anthropics/claude-plugins-official/tree/main/plugins/frontend-design/skills/frontend-design

참조

89edfdc710d0846129dcee6a929477b04f08052c

유지보수 최신성

2026. 7. 25.

사용량

120 다운로드 · 254 조회

파일 구조

📄 SKILL.md