Habilidades frontend-design
🎨

frontend-design

Seguro 🌐 Acesso à rede📁 Acesso ao sistema de arquivos⚙️ Comandos externos

設計具辨識度的前端介面

Também disponível em: 92Bilal26,anthropics,AdamAugustinsky,AgentWorkforce,AJV009,DennisLiuCk,anthropics,YYH211,7Spade,1bertogit,7Spade,92Bilal26,1bertogit,CesarAugustusGroB,davila7,Azeem-2

通用的 AI 生成設計往往看起來一樣。此技能引導打造令人難忘、具備量產等級的前端介面，採用大膽的美學選擇與卓越的視覺精緻度。

Suporta: Claude Codex Code(CC)
📊 69 Adequado
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "frontend-design". Create a distinctive hero section for a design agency portfolio

Resultado esperado:

  • 具氛圍感的漸層雲朵效果 React 元件
  • 使用 Framer Motion 的主標/副標/CTA 交錯動畫
  • 具辨識度的字體搭配（Syne 展示字體搭配 IBM Plex Sans 內文字體）
  • 玻璃擬態的表面效果與雜訊紋理疊加
  • 具觸控互動的行動裝置響應式版面

A utilizar "frontend-design". Design a landing page for a fintech startup with bold aesthetics

Resultado esperado:

  • 深色模式設計搭配鮮明點綴色
  • 自訂玻璃擬態卡片與背景模糊
  • 卷軸觸發的顯示動畫
  • 具辨識度的幾何圖樣與漸層
  • 縮放效果的互動式懸停狀態

Auditoria de Segurança

Seguro
v5 • 1/16/2026

This is a pure documentation/guidance skill containing only design best practices, CSS examples, and React component templates. No executable code, system commands, network calls, or filesystem access. All static findings are false positives from pattern-matching on documentation content.

2
Arquivos analisados
559
Linhas analisadas
3
achados
5
Total de auditorias

Fatores de risco

🌐 Acesso à rede (2)
skill-report.json:6 SKILL.md:242
📁 Acesso ao sistema de arquivos (1)
skill-report.json:6
⚙️ Comandos externos (16)
SKILL.md:93-105 SKILL.md:105-118 SKILL.md:118-134 SKILL.md:134-142 SKILL.md:142-147 SKILL.md:147-171 SKILL.md:171-174 SKILL.md:174-197 SKILL.md:197-228 SKILL.md:228-245 SKILL.md:245-294 SKILL.md:294-355 SKILL.md:355-374 SKILL.md:374-375 SKILL.md:375-376 SKILL.md:376-377
Auditado por: claude Ver Histórico de Auditoria →

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
85
Conteúdo
21
Comunidade
100
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

建立令人難忘的網頁元件

打造具有獨特美學的網頁元件，脫離通用模板與框架的同質感

開發以設計為核心的頁面

建立具有鮮明視覺識別的落地頁、行銷網站與展示頁面

打造精緻介面

開發具一致設計方向與量產品質程式實作的應用程式

Tente Estes Prompts

主視覺區塊 
為一個 [product type] 設計具辨識度的主視覺區塊，避免紫色漸層與 Inter 字體等通用 AI 美學。
動態元件 
使用 [animation library or CSS] 為 [element type] 建立具交錯動畫的 React 元件。
視覺系統 
為 [brand/industry] 設計一致的字體與色彩系統，並具備 [aesthetic direction]。
落地頁 
為 [feature/purpose] 建立完整的落地頁區塊，包含氛圍背景、動態效果與令人難忘的視覺設計。

Melhores Práticas

  • 全力投入清晰的美學方向，而不是採取保守做法
  • 選擇具辨識度的字體以打造令人難忘的品牌識別
  • 優先打造高衝擊的動態時刻，而非零散的微互動

Evitar

  • 使用 Inter、Roboto 或系統預設等通用字體
  • 套用紫色漸層加白底等陳腔濫調的配色方案
  • 遵循可預測的版型與制式化元件模式

Perguntas Frequentes

哪些 AI 工具支援這個技能？
此技能適用於 Claude、Claude Code 與 Codex，用於生成前端程式碼與設計指引。
可處理哪些複雜度層級？
從簡單元件到複雜落地頁皆可。請將程式碼複雜度與你想達成的美學願景對齊。
它如何融入我的工作流程？
在建立新元件或頁面時呼叫此技能，並提供你的專案背景與設計目標。
我的資料安全嗎？
此技能只處理設計指令，不會存取檔案、網路或外部系統，僅生成程式碼。
為什麼我的設計看起來很普通？
通用 AI 設計會收斂到常見樣式。本技能強迫在字體、色彩、版面與動態上做出具辨識度的選擇。
這和其他設計提示有何不同？
它主動避免陳腔濫調的 AI 美學，並以可量產的程式碼強制大膽且有意識的設計決策。

Detalhes do Desenvolvedor

Licença

MIT

Repositório

https://github.com/Atman36/AI-Vibe-Prompts/tree/main/.claude/skills/design/frontend-design

Referência

main

Estrutura de arquivos

📄 SKILL.md